For some reason anything my company tries to share on LinkedIn will post but the image will not load. Whether that is any images on the page or the Open Graph image that is specified for that page. I also understand that LinkedIn has a 7-day cache for images like this, but this has been ongoing for over a month now.
Here's an example: http://knowgreaterpartnership.com/100-days-in-a-minute/
<html lang="en-US" prefix="og: http://ogp.me/ns#">
<meta property="og:type" content="article" />
<meta property="og:title" content="100 Days in a Minute" />
<meta property="og:description" content="Each week for the next 100 days, Buchanan's government relations professionals and attorneys will bring you 100 Days in a Minute, offering brief insights on President Trump's legislative and regulatory changes that will impact your business." />
<meta property="og:url" content="http://knowgreaterpartnership.com/100-days-in-a-minute/" />
<meta property="og:image" content="http://knowgreaterpartnership.com/wp-content/uploads/2017/01/100days-seo-facebook.jpg" />
When anyone tries to share this URL, the hyperlink will come up but no image. Now this page also has Open Graph meta tags to specify which image is shared. The image URL is valid and works on both Twitter and Facebook, but not here on LinkedIn.
One workaround I know we can do is to X out of the blank image after pasting the URL and uploading a custom image. However, when doing this from our company's page this feature blocks any further adjustments to the post where we can tag any # names associated with the post.
Any help would greatly be appreciated.
Thanks
Couple of things to check:
The dimensions 1600x900 and size of 220kb are within LinkedIn's requirements. However, your aspect is 16:9 instead of 4:1 / 1:4.
Max file size: 1 MB
Minimum image dimensions: 80 x 150 pixels
Recommended aspect ratio: 4:1 or 1:4
Making Your Website Shareable on LinkedIn
Your image URI is https, it could be they are unable to retrieve your image. Have you tried with an http image?
Note: If the image meets the requirements, but it still does not
appear in updates on LinkedIn, your website may be blocking us from
pulling the image or the image may be located on a protected directory
or website.
Making Your Website Shareable on LinkedIn
Was the image change from the first time LinkedIn crawled your page for the image? They do cache for ~7 days.
The first time that LinkedIn's crawlers visit a webpage when asked to
share content via a URL, the data it finds (Open Graph values or our
own analysis) will be cached for a period of approximately 7 days.
This means that if you subsequently change the article's description,
upload a new image, fix a typo in the title, etc., you will not see
the change represented during any subsequent attempts to share the
page until the cache has expired and the crawler is forced to revisit
the page to retrieve fresh content.
Shared Content Caching
Related
I know for Google Shopping (or whatever it's called now) it's recommended providing the URL to the highest quality image there is for the product. Does that same principal apply for Product rich snippets?
Although it's rendered on the product page, I can easily provide the URL to the high-res image like this:
<meta itemprop="image" content="/img/high-res.jpg"></meta>
Or I can just tag itemprop="image" to one of the lower quality images that is shown on the website? But it's only 400 x 400px, compared to high-res which is 2000 x 2000px.
Any thoughts?
For some Rich Snippets (including the Product Rich Snippet), Google does not recommend any image dimensions, for others, they specify
at least 160x90 pixels and at most 1920x1080 pixels
(taken from my answer on Webmasters SE)
If you want to provide an image URL without showing the image, you must use link instead of meta:
<link itemprop="image" href="/img/high-res.jpg" />
(Side note: The meta element has no closing tag </meta>.)
I'm developing a web browser on Android and want to show the URL logo for the most visited sites like in Chrome (4 X 2). But the problem is that most favicons (eg: http://www.bbc.co.uk/favicon.ico) are of size either 16X16 or 32X32 and they don't look good when scaled up.
Is there a way I can download a high resolution icon/bitmap for an URL in a standard way? How about opening the home page and then extracting all the image links and then choose an image with the name logo in it? Would this method work for all the URLs? I want to know if there is a standard way to obtain a high resolution icon for a given URL or favicon is the only standard way to get the website logo?
You can code it yourself or use an existing solution.
Do-it-yourself algorithm
Look for Apple touch icon declarations in the code, such as <link rel="apple-touch-icon" href="/apple-touch-icon.png">. Theses pictures range from 57x57 to 152x152. See Apple specs for full reference.
Even if you find no Apple touch icon declaration, try to load them anyway, based on Apple naming convention. For example, you might find something at /apple-touch-icon.png. Again, see Apple specs for reference.
Look for high definition PNG favicon in the code, such as <link rel="icon" type="image/png" href="/favicon-196x196.png" sizes="196x196">. In this example, you have a 196x196 picture.
Look for Windows 8 / IE10 and Windows 8.1 / IE11 tile pictures, such as <meta name="msapplication-TileImage" content="/mstile-144x144.png">. These pictures range from 70x70 to 310x310, or even more. See these Windows 8 and Windows 8.1 references.
Look for /browserconfig.xml, dedicated to Windows 8.1 / IE11. This is the other place where you can find tile pictures. See Microsoft specs.
Look for the og:image declaration such as <meta property="og:image" content="http://somesite.com/somepic.png"/>. This is how a web site indicates to FB/Pinterest/whatever the preferred picture to represent it. See Open Graph Protocol for reference.
At this point, you found no suitable logo... damned! You can still load all pictures in the page and make a guess to pick the best one.
Note: Steps 1, 2 and 3 are basically what Chrome does to get suitable icons for bookmark and home screen links. Coast by Opera even use the MS tile pictures to get the job done. Read this list to figure out which browser uses which picture (full disclosure: I am the author of this page).
APIs and open source projects
RealFaviconGenerator: You can get any web site favicon or related icon (such as the Touch Icon) with this favicon retrieval API. Full disclosure: I'm the author of this service.
BestIcon: Although less comprehensive, Besticon offers a good alternative, especially if you want to host the code yourself. There is also a hosted version you can use right away.
The Go code at https://github.com/mat/besticon tries to solve this problem.
For example
$ besticon http://github.com
http://github.com: https://github.com/apple-touch-icon-144.png
There is also an accompanying hosted version of the code, see for example http://icons.better-idea.org/icons?url=github.com.
(Disclaimer: I wrote it because I needed to solve the same problem a while ago.)
another option is getting favicons from any domain using a hidden google API
the favicon link pattern will be
https://www.google.com/s2/favicons?domain={domain}&sz={size}
for example
https://www.google.com/s2/favicons?domain=stackoverflow.com&sz=64
Logos are not going to be consistently named and very difficult to identify consistently. Consider putting the favicon on a colour tile of suitable dimensions. People will quickly associate the colour with the website. You could either extract a dominant colour from the website or favicon using something like colorthief, or make each one unique using a golden angle formula to choose a hue.
Here is a new and genuine solution which will always give you the best results-
Webchromeclient gives a callback of onReceivedTouchIconUrl method for all the websites just hold the url from here.
Next step is to convert this url to bitmap which can be done like this-
try {
URL url = new URL(touchiconUrl);
HttpURLConnection connection =
(HttpURLConnection)url.openConnection();
connection.setDoInput(true);
connection.connect();
InputStream input = connection.getInputStream();
Bitmap myBitmap = BitmapFactory.decodeStream(input);
return myBitmap;
} catch (IOException e) {
e.printStackTrace();
return null;
}
Next step is to send this bitmap for the shortcut.
Note: Remember to create bitmap on background thread like asynctask.
This HTML document requires a base url and the HTML/"View Page Source" of the web page and should output the values.
<!doctype html>
<input type=text placeholder=URL><br>
Place "View Page Source" of HTML homepage<br>
<textarea id=HTML placeholder="HTML content of webpage">
</textarea><br>
<input type=Submit>
<script>
function url(u,n){
try{
u = u.getAttribute(n);
}
catch(e){
return 'null';
}
if(u.slice(0,2) == "//"){
u = "http:"+u;
}
else if(u.slice(0,1) == "/"){
u = u.slice(0,1);
}
return '<img src="'+u+'">';
}
document.querySelector('input[type=Submit]').onclick = function(){
var output = '';
var HTML = document.getElementById('HTML').value;
var doc = document.implementation.createHTMLDocument("New Document");
doc.documentElement.innerHTML = HTML;
output = output + "apple-touch-icon<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon"]')).reverse()[0],'href')
// deprecated output = output + "apple-touch-icon-precomposed<br>"+url([].slice.apply(doc.querySelectorAll('link[rel="apple-touch-icon-precomposed"]')).reverse()[0],'href')
output = output + "<br>image/png<br>" + url(doc.querySelectorAll('link[rel="icon"][type="image/png"]')[0],'href');
// <meta name="msapplication-TileImage" content="/mstile-144x144.png">
// deprecated output = output + "<br>msapplication-Ti:<br>"+ url(doc.querySelectorAll('link[name="msapplication-TileImage"]')[0],'content');
// <meta name="msapplication-config" content="/browserconfig.xml/ ">
//output = output + "<br>msapplication-con: "+ url(doc.querySelectorAll('meta[name="msapplication-config"]')[0],'content');
// <meta property="og:image" content="http://somesite.com/somepic.png"/>
output = output + "<br>og:image<br>" + url(doc.querySelectorAll('meta[property="og:image"]')[0],'content');
// <link rel="image_src" href="https://cdn.sstatic.net/Sites/stackoverflow/Img/apple-touch-icon.png?v=c78bd457575a">
output = output + "<br>image_source<br>" + url(doc.querySelectorAll('link[rel="image_src"]')[0],'href');
var URL = window.location.hash;
document.getElementById('output').innerHTML = output;
};</script>
<div id=output></div>
If you would like to automate the retrieval of the HTML you could use something like the following for PHP.
<? echo file_get_contents($_GET["url"]);
Usually favicon is small (like 16x16 or 32x32). If you need bigger dimensions, extract not favicon, but logo from homepage/header.
Why would an image thumbnail not show up when I share a post on a facebook timeline? It used to work perfectly, now I'm not getting an image. Here is a sample link. (http://noahsdad.com/chris-burke-corky-life-goes-on/)
Thanks.
I'm not seeing any open graph tags on your page there. In order for the image to show up properly, and to be able to curate which image gets posted on Facebook, the og:image tag should be used in the head of the document. Before you do that, you'll want to include the the Open Graph name space in your html declaration.
An example is:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
....
<meta property="og:image" content="http://www.example.com/img/example.jpg" />
....
</head>
where the example url points to the actual image you want to appear.
Once you've got that in place, you can test the link here: http://developers.facebook.com/tools/debug
If you did it correctly, you should see the expected image show up in the debug validation results.
Please pardon my ignorance, I'm a website visual designer, not a programmer (let the flames begin!):
Following Facebook's instructions, I just added the iFrame like button code to a site that I'm working on, and it seems to work, BUT the image which displays on my wall (once the Like is posted) seems to be of a random image (could be anything, from a button to a spacer to whatever!) inside the external site which I'm liking from. How do I control which image appears on a member's FB wall when they hit the like button?
What you need to look into is Open Graph og:meta tags. These tags help Facebook to decide:
what image to display
what text to use as the title
what text to use for the description
and more...
The tags look something like this (taken from the link above):
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
You will have to substitute your values for the values in the example here.
On the Like button documentation where you most likely got your code from, it mentions the open graph protocol and its importance with relation to the like button. Scroll down a bit further and you'll see there is a "step 2" in the process of implementing a Facebook "like" button.
i have in google+ snippet in my website, to sharing my website on google+, my code look like this
<head>
<meta property="og:title" content="title of website" />
<meta property="og:url" content="my website url" />
<meta property="og:image" content="url image" />
<meta property="og:description" content="description of my website" />
</head>
<bod>
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone></td>
</body>
i have also included facebook like, which rendering all meta tags (title,image,description). But, in case of google+, thumbnail image is not showing.
Need help !!
What are the dimensions of your image? I standardised my thumbnails at 100x67 as they look right on Facebook, but Google+ wasn't showing them. I found that larger images will work with the same code, so I can only assume Google+ ignores little images for some reason.
from google+ docs: https://developers.google.com/+/web/snippet/
Images that are too small or not square enough are not included in the
+Snippet, even if the images are explicitly referenced by schema.org microdata or Open Graph markup. Specifically, the height must be at
least 120px, and if the width is less than 100px, then the aspect
ratio must be no greater than 3.0.
However i've been experimenting and this does not seem to be exactly right. Does anyone know the correct algorithm?