How can I place my icon before URL?
Assuming you want a favicon, here is a wonderful link about how to create one.
CSharpCorner Favicon Tutorial
This icon is called Favicon you can get more help on this at following location.
http://www.thesitewizard.com/archive/favicon.shtml
If you want to display an icon before/after all links (not a favicon as others have assumed (fair assumtion however) ) then do it in CSS.
http://www.hunlock.com/blogs/Attach_icons_to_anything_with_CSS
Edit: updated due to first comment that this is not an answer.
Your question is rather unclear, but I presume you mean you want your website to display a picture in a browser just before the actual url text. This is called a favicon.
Wikipedia explains it well.
use code below to put image.png before the url
<link rel="shortcut icon" href="image.png" />
Related
Since a few weeks, the favicon of my webzine is no longer displayed, and this on the browser of my work, but also on my personal PC.
I do not think I have changed the configuration. I tried to re-upload it, to no avail.
https://www.yubigeek.com/
In the Google Chrome Developer Console, there is an error on favicon.ico (404) but in the source code of the page, this URL is not called.
There are however two tag link with a rel = "icon" and the URL of the favicon, if I click on the links, the images are there.
This is due to a div markup which wrongly appears if the head section of your pages. Such markup should only be in the body.
More details
Most browsers accept body-only markups in head. But Chrome has a particular behavior. When this happens, Chrome considers the head section to be closed. Therefore, following head markups are actually considered to be in the body. And since favicon markups do not work when there are in body...
This is why your favicon fails on Chrome but works on Firefox.
How to fix
Your first two div are around line 153, still in the head. As a hint, their ids are fb-root and fb-customerchat. That should help you spot which plugin is doing this.
Should you disable this plugin, at least for now? Your choice.
You should also report this issue to the plugin developer. You must not be the only one impacted by this issue.
The best way to add WordPress Favicon is adding favicon via Appearance > Customize > Site Identity. Create favicon image at least by 512 x 512 and follow the path to navigate. Then upload the image in Site Identity section. Save it and you're done.
Please follow this for more info.
It seems you're using a PNG image, you can try to add attribute type.
So your link would be something like : <link rel="icon" href="yourpath" type="image/png">
EDIT : Plus, put your .ico file in the root of you website if it's not already done.
This approach might help if you cannot fix invalid head markup explained by #philippe_b:
remove_action( 'wp_head', 'wp_site_icon', 99 );
add_action( 'wp_head', 'wp_site_icon', 0 );
Add it to functions.php in your child theme. This way we print site icons on top of head.
For one of my websites I am using Open Graph to enrich posts shared from my website. But LinkedIn is not picking the image specified in og:image. The image is modified for the LinkedIn bot to be 200px X 200px by a simple PHP script.
I found some experiencing a similar problem (Linkedin not getting thumbnail image) but this problem is not yet solved.
I know it's old but this helped.
Linkedin caches link preview content for 7 days. You have to do the following to clear Linkedin Preview cache:
Step 1: Visit https://www.linkedin.com/post-inspector/inspect/
Step 2: Enter your url and click on Inspect, You will see the updated preview image
Step 3: Now try sharing your url on Linkedin
You might need to check linkedin post cache and refresh it for a specific link.
https://www.linkedin.com/post-inspector/
This question is a bit old but I ran into the same situation and got it solved so I just post my solution( or my understanding how it work) for others have the same problem.
(Thank you for #Justin Kominar, his answer in this question helps me.)
Make sure you have prefix="og: http://ogp.me/ns# in your tag, when you have iframe(s), make sure which page is calling the share function.
Make sure you set all four <meta> tags in you site and give the correct type to <meta property="og:type> (please go to ogp.me for more information)
Make sure you pass the correct url(the one you want to share, eg.https://news.com/this_news) to <meta property="og:url> especially when you use dynamic url
In the page you pass to og:url ( it is very important to understand linkedin will go to this page to look for the information not the page you call the share function, most of the time they are the same but sometimes that is not the case), you need to do step 1 and 2, set <meta og:image> AND MAKE SURE THE IMAGE LINK IS VALID AND THE IMAGE DOES EXIST
Hope it will help.
I faced with wrong image choosing by LinkedIn in my WordPress site. I found the problem by discovering URL by LinkedIn post inspector and saw that oEmbed tag was used dispite og:image tag is existed:
Does your code look like this?
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:title" content="My Shared Article Title" />
<meta property="og:description" content="Description of shared article" />
<meta property="og:url" content="http://example.com/my_article.html" />
<meta property="og:image" content="http://example.com/foo.jpg" />
</head>
<body>
…
</body>
</html>
Also, check the documentation here:
https://developer.linkedin.com/docs/share-on-linkedin
Also, check your URL with Facebook Linter (it works with all OG tags):
https://developers.facebook.com/tools/debug/
Adding a garbage parameter at the end of my link, helped me force linkedin to get og:image again.
I found my solution on this post
Per #checkTek's comment, LinkedIn does not support .webp images for the og:image property.
Try to 1000x425 image. It works for me.
This answer is for the people who tried all the methods described in the above answers and still got no luck !!
I had this scenario and I fixed it by renaming the og:image.
I believe image with long name can trick the linkdin to prevent the image from scraping.
before the tag was
<meta property="og:image" name="image" content="images/meta-this-is-a-very-long-name.jpg">
I fixed this issue by renaming it to a smaller name.
<meta property="og:image" name="image" content="images/meta-image.jpg">
voila.. it worked !!
Warning - i'm using JavaScript
Check step
First of all, you have to check if your website/blog have all the meta tags correctly puted on tag of your HTML document. You can do this by just puting your website link on
https://developers.facebook.com/tools/debug and debugging.
But if you just get the wrong image no matter what on Linkedin post inspector but not on Facebook debugger (both use open graph tags) the problem is the Linkedin. So if this you can continue here.
My problem and the solution
I have my images on AWS, so i use 2 different links, one is for the service, the other is the link of the image.
The problem with Linkedin, is that he cannot read two URLs. So you have to encode properly.
My service is somenthing like this
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
Now, you gonna see an example. I have a function that just get this two together. Take a look:
Example:
// The service -
https://d1muf25xaso8hp.cloudfront.net/[IMAGE_URL]?options
// Function Input -
https://s3.amazonaws.com/appforest_uf/imageID/200x200.png
// Function Output -
https://d1muf25xaso8hp.cloudfront.net/https%3A%2F%2Fs3.amazonaws.com%2Fappforest_uf%2Ff1643682361025x516549218825449500%2F200x200.png?w=&h=&auto=compress&dpr=1&fit=max
The function
const resizeS3Image = (s3_url) => {
let s3_clean_url = s3_url;
s3_clean_url = s3_clean_url.replace(/\//g, '%2F').replace(/\:/, '%3A');
const cloudFrontCompressedImage = `https://d1muf25xaso8hp.cloudfront.net/${s3_clean_url}?w=&h=&auto=compress&dpr=1&fit=max`;
return cloudFrontCompressedImage;
};
Things you may have notice
The second URL (the image) have some things replaced, like the slash ('/') and colon (':'), for the equivalent code on URL encode.
2 - How i did it ? using regex pattern and the .replace native JS constructor.
Tools and references that i used
https://www.w3schools.com/tags/ref_urlencode.asp
Remind to
When you're debuggin again your website on the Linkedin Post inspector, remind to add after the URL somenthing after '?' like https://yourwebsite/post/what-is-lorem-impsum?aaaa=912093090
That way, you gonna update the Linkedin SEO Cache.
I was using the LinkedIn Post Inspector and it wasn't finding my image. However, Facebook Debugger was showing it. Both platforms use Open Graph (OG).
In my case, the issue that was causing this to happen were spaces in the original image name (replaced in URL with +)).
This worked:
https://images.mywebsite.com/abc/name_of_image.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
This was failing:
https://images.mywebsite.com/abc/Name+of+Image+-+Test+-+4.png?auto=compress,format&rect=0,0,3600,1890&w=1200&h=630
For me the problem was the image size. Once I increased the size from 300px wide to 1200px wide it worked.
For LinkedIn:
The maximum file size allowed is 5MB.
The minimum image dimension should be 1200px X 627px.
https://dev.to/samuelorobosa/how-to-handle-linkedin-and-twitter-link-previews-23eg
However, the post inspector was finding smaller images around 750MB. So the true value is somewhere between 300:1200
p.s. gifs work on linkedin but are a single still frame on twitter
I'm hosting a (very) small website on dropbox. I don't even have a domain name for it, I just need an easy way for my not so technology savvy teacher to access it and using an online service like wordpress or tumblr seemed like too much trouble and not as effective as I would like. I plan on putting it in my public folder and just sending her that link, something I've done in the past to show my friends websites I've made in class.
However, for some reason, CSS formatting isn't working. This is a problem I've noticed in the past but at the time wasn't important. I have it relatively linked in my head tag and it works when I pull up the files saved on my hard drive. Its only when I try to access it through dropbox do I notice this problem.
I've looked and it doesn't seem like anyone else has had this problem, I've only found multiple references to dropbox supporting CSS so I have no idea why this is happening.
This is the link in my code, and it's inside the head tag:
<link rel="stylesheet" type="text/css" href="css/format.css" />
Any help would be much appreciated. ^^
EDIT: Here's the page, there's not much on it yet but there's suppossed to be background formatting behind the navigation links in the top.
https://dl-web.dropbox.com/get/Public/EPortfolio/WritingAndForum.html?w=947f0aa1
To give an example expanding on Cfreak's comment, you would need to individually share the CSS file, then reference it in the HTML like this:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/u/1234567/cssfile.css">
A much easier way (and more correct) is to put your stylesheet in a folder called css and then have a relative link to it with "./" It gets you out of the long url trouble.
<link rel="stylesheet" type="text/css" href="./css/styles.css">
I want to display an image and some text on the URL bar of browser.
I am able to display an image by using tag <link type="image/x-icon" href="../../images/iconFav.bmp" rel="shortcut icon" /> but could not show text beside the image.
What actually I wanted to do is just like stackoverflow shows an image on URL bar, I would like to show an image and few text :)
Otehr example would be to have a look at https://developers.facebook.com/docs/reference/fql/ which displays an image and facebook.com beside that image on URL bar
That text (displayed next to the favicon.ico) is the HTML title element:
<html><head><title>Your text here</title></head></html>
That favicon isn't displaying because BMP is not a supported favicon file format. For the best support use an ICO file. See: http://en.wikipedia.org/wiki/Favicon#File_format_support
You can use Favicon.co.uk to convert your image to ICO format if you like
Then link to it like this:
<link href="/location/of/favicon.ico" rel="shortcut icon" />
Then for the title use <title>Your Title</title> inside the <head> tag
You need to read up on favicons. Also ensure your using the right doctype with the right fav icon link. You need to convert your favicon to a ico file with a converter: I prefer this one: http://www.prodraw.net/favicon/index.php
I think what you're referring to is the SSL extended validartion information. Modern browsers display sites running under HTTPS with the domain in blue or green (depending on the type of SSL certificate purchased).
More details about extended validation are available at http://en.wikipedia.org/wiki/Extended_Validation_Certificate but effectively it's not possible to control the text - it's either the domain of your site e.g. facebook.com or the name of your organisation e.g. "PayPal Inc." and requires an SSL certificate to be purchased and is only shown on your website when browsed using SSL.
It can't be done. On https sites, some browsers will put things beside the image (the site name) to show that you are visiting the site in a secured way, but there is no way that a programmer can control this, it's built into the browser. You can control the favicon image, that's all.
I think that text appears if the site is secure and verified by some organisation. But I was able to display the image on location bar by using <link type="image/x-icon" href="../../images/iconFav.bmp" rel="shortcut icon"/>
I have a Favicon and in my page I have something like:
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
This works fine. But inspired by the book "Ultra Fast asp" I am trying to remove all the small bits that are not necessary. I read a lot about browsers looking for favicon.ico anyway. (People complaining about 404 errors if they do not have a favicon).
So I was wondering: what is the use of the link if the browser looks for it anyway. It is "dead wood" -> so can I just remove this link completely or am I missing something.
thanks for your ideas,
Pleun
Using the explicit link syntax allows you to use different icons on different pages, and to have icon support on the browsers that do not automatically download the favicon.ico that is in the root of the site.
If you only ever use one icon on a website and don't care about browsers that do not automatically download the root icon, the links are not needed.
As long as your favicon is in the root of your website (ie. /favicon.ico), then yes you can drop this link. The link allows you to change where you want to store your favicon.
The standard specified by W3C uses the link tag rather than automagically look for the file in the root, but all major browsers will support both ways.
The Wikipedia article about favicon is a good overview of the possibilities and the browser support.