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
Related
I have a bigcommerce store. I tried to use a 3rd party tracking tool that adds some url parameters to the url for tracking. It works well on all pages, except of home page. For example
http://twigpencils.com/cloth-pencils?param=1 and same version without the param (just delete the param=1) bring me to the same page (with the url param on the relevant page).
However, when trying the same on the home page
http://twigpencils.com/?param=1 creates a 404 error vs regular home page without the param (?param=1) that works just fine.
Any idea how to fix?
Thanks
John
John, I want to help you with this but first, I see 3 issues that could be affecting the behavior you describe:
First, a Broken Meta Tag
At around line 8 of your HTMLHead.html file, your meta tag for keywords is broken:
<meta name="keywords"twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils " />
It's missing the content= attribute. It should look like this:
<meta name="keywords" content="twig pencil,apple pencil,apple pencils,dictionary pencil,graphite,chaparral,colored pencils" />
Second, A Major Syntax Error
This error may be breaking several functions on your page.
Uncaught SyntaxError: Unexpected token < Line: 34
At around line 34 in your HTMLHead.html Panel file, a couple lines above where you placed the Google Webmaster Verification meta tag, one of your javascript tags is incomplete:
<script type="text/javascript" async defer
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
The problem is at the end of this line <script type="text/javascript" async defer, as its missing a closing >. The code should at least look like this:
<script type="text/javascript" async defer>
</script>
<meta name="google-site-verification" content="3TJvxTrq55AqFcwuo2KtEH1uUMBZPyeQ5LBnmVh8OKk" />
However, considering it has async defer, it leads me to believe that it was supposed to load an external script, and either someone deleted the srcattribute and also accidentally deleted the >, or some improper BC commenting or something of that nature is breaking the tag. I can help further if I saw the actual code as it is in the BC Design backend.
Third, Non-WWW or WWW
I notice that when I navigate to http://twigpencils.com/?param=1, it takes me to http://www.twigpencils.com/, which would be fine, except that when I navigate to http://twigpencils.com/cloth-pencils?param=1 it takes me to http://twigpencils.com/cloth-pencils?param=1.
This is a fairly major problem, but is fairly easy to solve.
Either you need to forward from WWW to non-WWW on your domain/hosting backend, and/or do the same on your Google Webmaster Panel, or do both.
Before we try to figure out the main problem you mentioned, you should resolve these 3 issues first as they could be affecting the behavior you describe, but are at the very least breaking many things on your site.
Let me know if this helps and if you have nay other questions.
This has to do with a broken .htaccess file, causing PHP to not correctly parse the parameters. Unfortunatly bigcommerce does not allow you to edit the .htaccess file directly.
I'd recommend checking out shopify or another platform. I've been trying to get support from bigcommerce on this for weeks, to no avail. Their support team is not very helpful.
OK guys, tell me what I am doing wrong... Is this a new Google Plus issue? Or — to use an old Facebook term I created — an Unannounced Platform Change? (note the date of this question)
Please Note that I'm asking about Google Plus Share Buttons, not the GP+1 like button which is a different beast…
The Description Tag is not passed thru to the share window or to the Google Plus page post. If you inspect the Google window code with Firebug, you will see this:
<div class="Zm"></div>
…which is where the description tag should display.
Demo and source code located here.
Now...
The demo and the more complex script are both HTML5 validated. I have tested this with both schema.org tags and open graph tags:
All Tags work fine in the Google Structured Data Testing Tool here.
Results are the same in both cases: description tag does not display, so that's not the problem.
I have tested this on http:// and https:// with the same results: description tag does not display, so that's not the problem.
I have tested this on FF22.0 with and without AdBlockPlus && Chrome 28.0 and the results are the same: description tag does not display, so that's not the problem.
I have tested different button types with the same results: description does not display, so that's not the problem.
And I have googled for hours… and cannot find any "current links" to this issue that are not simple code errors.
So what part of this am I missing?
Any ideas, comments, suggestions or solutions would be greatly appreciated!
Google+ dropped the shared page's description.
You can find indications of that by looking at the "Basic Page" example at https://developers.google.com/+/web/share/ which used to show a description until several weeks ago. The current status of Google documentation clearly shows that a "description" is not expected or used anymore.
<html>
<head>
<title>Share demo: Basic page</title>
<link rel="canonical" href="http://www.example.com" />
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>
</head>
<body>
<g:plus action="share"></g:plus>
</body>
</html>
So, the only important tags are:
the "page title",
and — optionally — the "canonical link" (for SEO reasons).
That's it!
Obviously, Google downgraded website descriptions to less relevant in Google+ just like they did in their search engine a long time ago.
Most probably this was done for the same reasons Google once started to put less emphasis on the description of pages in their Search Engine product too: to avoid spam and keyword stuffing from polluting their Google Search and Google+ products.
For additional, "official" reference that Google generally marked descriptions to be "less important" a long time ago, check https://support.google.com/webmasters/answer/35624?rd=1 which states in the section "Create good meta descriptions":
...Google will sometimes use the meta description of a page in search results snippets, if we think it gives users a more accurate description than would be possible purely from the on-page content...
Well, "sometimes" obviously does not include Google+ (anymore) and — to be honest — I see their point. After all, you can (and should) "describe" the link in your Google+ post textarea yourself… which would also be the most logic thing to do: tell your users why the linked website is worth visiting instead of relying on a site's description.
You can use Google Snippet via meta tags to inform google what to display when your link is shared... You can view details # https://developers.google.com/+/web/snippet/ (Customize the snippet people see when your page is shared. Using this tool, you can generate code for your page that indicates the images and text that best represent what's being shared.)
<!-- Update your html tag to include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">
<!-- Add the following three tags inside head. -->
<meta itemprop="name" content="Title For Example.com">
<meta itemprop="description" content="Sample Description For The Article..">
<meta itemprop="image" content="http://www.example.com/1.jpg">
Hope this helps.
I have a website http://gornany.org/home/GammaGallery/1390?id=0
i want to show the image on Facebook profile which the user write a comment about, i want to change this code using JavaScript
<meta property="og:image" content="" />
i tried a lot of things like
$("meta[property='og\\\\\\\\:image']").attr("content","");
$('meta[property="og:image"]').attr('content',"" );
but nothing work
Any help?
I dont think you can do that. Javascript is a client-side language so when Facebook reads the og:image meta tag the javascript code hasn't run yet. Hence, Facebook requests the page from the server and it will not be able to find the updated tags.
Check the debugger if you need to test this: http://developers.facebook.com/tools/debug
EDIT: But if in fact that was gonna work I think you need to escape your tag like:
$("meta[property='og\\:image']").attr("content", "");
I'm attempting to add a LinkedIn Share button to our content-driven website. I've generated the embed code using the button builder, but whenever I try to actually use the button, I get a generic error:
There was a problem performing this action, please try again later.
It's been doing this for several days (since I first added the code), so I don't know if the error is on the LinkedIn side or mine. Is there any way to get a more specific error message? The code they provide is just a script tag that you paste in:
<script src="http://platform.linkedin.com/in.js" type="text/javascript"></script>
<script type="IN/Share"></script>
Unfortunately LinkedIn's "support" forums are limited to the various API's; there's nowhere available to submit a question regarding the build-a-button functionality. I'm hoping someone else has used this function and can point me in the right direction.
Most likely the page you are trying to share is not web accessible (local, under htaccess password or something). It looks to me like LinkedIn tries to actually look at the page you are sharing, and if it can't reach it, it gives you this message.
Most likely the url which you are sharing is not encoded, try encoding that, also follow this article for more.
The easiest way to ensure the linkedin share button works properly, is to use
<!DOCTYPE html>
instead of other alternatives.
look at the data-url attrbute. Remove the "http://" and only use "www." for your website url. That fixed my issue at least.
I found this way for validate in xhtml:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
< script src="http://platform.linkedin.com/in.js" type="text/javascript">< /script>
< div id="linkedin">< /div>
< script type="text/javascript">
var po2 = document.createElement('script');
po2.type = 'IN/MemberProfile';
po2.setAttribute("data-id","http://www.linkedin.com/pub/luca-di-lenardo/11/4b7/3b8");
po2.setAttribute("data-format","hover");
po2.setAttribute("data-text","Luca Di Lenardo");
document.getElementById("linkedin").appendChild(po2);
< /script>
Remove the white space and it works!
If anyone is getting this error, and cannot figure out why, I recommend checking the URL of the page you're sharing with: LinkedIn Post Inspector.
So, for instance, if I were to check out how wikipedia.org looks when shared, I would visit and enter that URL, like so...
https://www.linkedin.com/post-inspector/inspect/https:%2F%2Fwww.wikipedia.org%2F
And I see...
But there's a ton of information here, showing how everything is parsed, from the description to the title to the image selection for thumbnail display...
Warning: Add an og:image tag to the page to have control over the content's image on LinkedIn.
Title: Wikipedia
Type: Article
Image: No image found
Description: Wikipedia is a free online encyclopedia, created and edited by volunteers around the world and hosted by the Wikimedia Foundation.
Author: No author found
Publish date: 6/1/2020, 6:39:59 AM
They even give you instructions on how to fix your page! Hey, got some advice for Wikipedia.org here!
Provide a metadata tag for the og:image in the page's head section. For example:
<meta name="image" property="og:image" content="[Image URL here]">
We're creating a Interaction design pattern website for a class.
We've been using google docs to create the patterns list during the classes, sharing it with the teacher for evaluation.
So the environment is this:
We've been able to fetch a single image from each presentation we want to display, such as: http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b
We've created an RSS feed for cooliris to open: (small example from it):
<.item>
<.title>e7_pattern_7.78<./title>
<.link>http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b<./link>
<.guid>dd2dpzk6_164zcwm3jgv_b<./guid>
<.media:thumbnail url="http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b" />
<.media:content url="http://docs.google.com/file?id=dd2dpzk6_164zcwm3jgv_b" type="image/png" />
<./item>
Sorry for the points in the middle of the tag is only for stackoverflow not to filter it.
So the problem is the following, the rss works correctly, as the cooliris opens all viewports for all images. But both the thumbnail and content remain black for all the pictures.
If you try to open them by the above url you can download them, with the type="image/png" if should work for piclens to open it.
Anyone got a sugestion or idea why we can't access the images from google docs via cooliris ?
The server needed a crossdomain.xml to allow cooliris. So we can't do it directly from google but we'll just download it a put on another server.
Try putting type="image/png" in the media:thumbnail tag too.. additionally, put your feed through an RSS validator, just to see if it checks out..