Twitter Card Preview doesn't fetch my image - html

I'm using the Twitter Card Preview tool to test my Twitter Card set up.
<meta property="twitter:url" content="http://liberalgeek.com/content/why-do-atheists-celebrate-christmas" />
<meta property="twitter:card" content="summary" />
<meta property="twitter:description" content="I can't speak for all atheists, I can only speak for myself, so please leave a comment below and explain why you celebrate Christmas! When I hear someone ask, "Why do atheists celebrate Christmas?" my first thought often is: Better Question: Why do Christians celebrate Christmas?" />
<meta property="twitter:creator" content="#kennywyland" />
<meta property="twitter:title" content="Why do Atheists celebrate Christmas?" />
When I use the above meta tags, the Preview works and I get the expected results. When I try to add a twitter:image tag though, it fails. Here is an example:
<meta property="twitter:image" content="http://liberalgeek.com/sites/default/files/styles/large/public/Christmas%20Tree.jpg" />
If I include a twitter:image meta tag and I click the Preview button, it spins for a bit and then gives me the error:
Looks like something is technically wrong.
Please try again in a few minutes.
I've tried other images on that site with no success. I've tried other (non-drupal) sites hosted on the same apache server to make sure it wasn't a drupal problem:
<meta property="twitter:image" content="http://www.journalscape.com/kenny/images/acupuncture-kenny-2003-08-20-small.jpg" />
If I copy one of these images to a different machine with a different apache server, twitter sees it and it works just fine. Twitter shows it in the preview.
I have checked my robots.txt on both sites. Nothing in my robots.txt should prevent Twitterbot from fetching, but just in case I've explicitly added the code they suggested:
User-agent: Twitterbot
Disallow:
However, I am watching my apache web logs scroll by and Twitter never attempts to fetch the image. When I click the preview button, I would expect to see an entry in the access log showing twitter fetching the image... but nothing. I've tried several images to make sure it wasn't an issue of caching.
What am I doing wrong?
EDIT: I found one of the sites running on my machine (same apache) works just fine. If I use this image:
<meta property="twitter:image" content="http://www.geekqi.com/images/StylizedYinYangRedLucida.png" />
Then twitter fetches it immediately. I don't understand why one works and the other doesn't.

As it turned out, the problem was a timing one. After adding the robots.txt file, I needed to wait a couple of hours for Twitter to see the new robots.txt and then it started fetching my images just fine.

Related

It took too long to get a response for this URL, so we will not scrape this content -linkedin

I am trying to share an article on linkedin. Everything is okay but linkedin does not recognize featured image.
I put my article URL on Linkedin Post inspector tool
Post inspector tool result: It took too long to get a response for this URL, so we will not scrape this content
screenshot of linkedin post inspector tool result
I search on google why linkedin can not pull featured Image. I find a solution described in this article
https://www.linkedin.com/help/linkedin/answer/46687/making-your-website-shareable-on-linkedin?lang=en
I placed og tag accordingly.
I changed image width to 1200px height to 800px.
I kept image size under 5MB but it does not fix the problem.
Then I changed file permission to server.
I changed permission of storage->app->public->posts to 755. Image file permission generates 644 by default. I used laravel framework to my blog website if this information is helpful.
I also checked facebook debugger tool that works fine
screenshot of facebook debugger tool result
This is my open graph API implementation
<!-- open graph api start -->
<meta property="og:title" content="Finding the best website design and development company in Dhaka Bangladesh" />
<meta property='og:description' content="As you are reading this post, I am assuming you are looking for a website design and development company in Bangladesh or you are enthusiastic in a web design and development career. Whatever is the case, I am going to.... Finding the best website design and development company in Dhaka Bangladesh"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="https://www.chotosite.com/finding-the-best-website-design-and-development-company-in-dhaka-bangladesh" />
<meta property="og:image:secure_url" content="https://www.chotosite.com/storage/posts/1577983797Best-website-design-and-development-company-in-Bangladesh.png" />
<meta property="og:image" content="https://www.chotosite.com/storage/posts/1577983797Best-website-design-and-development-company-in-Bangladesh.png" />
<!-- open graph api end -->
And this is my article URL: https://www.chotosite.com/web-design-company
If you need more information please View source code. I am beginner in programming. I think there might be a problem somewhere in the code. Help me please. Thank you...

How do I display website logo when I share it on social networks

I need to make social networks for example facebook.com to display website logo when someone put link on it in post, message or share it. I have googled this question and found that website should have this:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://ogp.me/ns/fb#">
and
<meta property="og:image" content="https://www.lucida.construction/wp-content/themes/lucida-theme/images/logo_for_sn.png" />
<meta property="og:title" content="Home - Lucida ConstructionLucida Construction" />
but it doesn't give any result. I tried to do this on Facebook and LinkedIn and both of them either not showing an image at all or display some random image and not the logo that I've set in the <meta property="og:image" /> tag.
Website I try to share are http://www.resolutemarine.com and https://www.lucida.construction
Any help appreciated! Thanks!
What you did is correct. I don't know about other social media channels but facebook caches the information of your page. So if have you shared your link before the results are probably cached before you made the change in your code (inserting the og:image part). I don't know when facebook exactly clears it but you can do it manually by using their tool (again).
I tried it with one site of your linked domain and it works for me.
So if you want to test it use their tool. Otherwise you just need to wait until they grab it automatically.
Here is the link to the tool - just enter the url that you want to be crawled again by the bot: Facebook sharing debugger
I tried to share my website sometime and it kept on showing me the website logo, till I had to uninstall all plugging and it still didn't work not knowing it was the All in one SEO plugging that I selected a default image when shared on social media, so if you have AIOS installed, kindly check the settings=> Social Networks and selected the social media you want to change the profile picture if you have it installed

Facebook meta tag author not working

I have this:
<meta property="article:publisher" content="LINK_TO_FACEBOOK_FANPAGE">
<meta name="author" content="My Name">
But it suddenly stopped working and names are not showing anymore. I'm not using meta tag article:author, since not all of our colleagues have facebook profile. I remember like 1 month ago it worked well, but I noticed this change today. Did facebook remove it on purpose? If so, is it possible to override it, so it will show peoples' names even without facebook profiles?
Try debugging via Facebook Debugger

Can't fix: 'og:image' property should be explicitly provided, even if a value can be inferred from other tags

I have a website that triggers a warning when clicked through a link shared on Facebook. The warning says:
Possible problem with this link
We have detected that this link: http://www.example.online/ may be malicious.
To keep your account and device secure, only follow links you trust."
I ran the Facebook debug tool and I get the following error message:
Inferred Property
The og:image property should be explicitly provided, even if a value can be inferred from other tags.
I Googled this issue and I understand it is caused by some lack of meta information in the site header, but my site's code has the following in the header:
<meta http-equiv="etag" content="2efdc27c8967f14e2c829e601f7a1228"/>
<meta property="og:title" content="South Jersey Aerial Photograpahy"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.example.online/"/>
<meta property="og:image" content="https://static.example.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>
<meta property="og:site_name" content="South Jersey Aerial Photograpahy"/>
<meta property="og:description" content="South Jersey Aerial Photography is South Jersey's premier aerial photography and aerial videography company. Fully licensed and insured. Contact us today!"/>
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE"/>
I have no idea how to fix this error message. The property metatag is clearly there.
In short, you should re-fetch your website information using this tool:
https://developers.facebook.com/tools/debug/
Paste your URL and press Debug. Then either do Fetch, or press Scrape Again.
This will refresh Facebook cache, and your html-page will be reloaded.
Some additional info: https://stackoverflow.com/a/44453472/4899346
Following the already mentioned link to the Facebook object debugger, make sure that your og tags are written RIGHT AFTER the opening <head> tag.
Not sure why this happens but I used to run into the exact same issue until I moved them right after it and then clicked once again on "Fetch new scrape information".
Hope this helps!
Check for og:url tag and see whether the url is correct or not. In my case the url was not correct and so it was causing this type of error.
Ran into the same issue today. It would appear that it's a bug on Facebook's end.
Just by refreshing the Sharing Debugger will show me different error messages after each reload, including "Image Too Big", which clearly was not the case, and "Meta Tags In Body" which also was not correct.
As long as the correct image shows up in the Link Preview, I think you're good to go.
Had same issue today
'og:image' property should be explicitly provided, even if a value can
be inferred from other tags
somehow my linter replaced "(quotation mark) to ”(right double quotation mark), therefore https://developers.facebook.com/tools/debug/sharing/ was showing issue,
cause of that, these meta properties were not visible to fb-bot. After this correction it works fine
Even if you have a proper OG tag on a page, can Facebook still ignored og:image value.
On my Magento 2 website, I use Magento 2 Facebook Open Graph by Magefan and had this issue too even all OG tags look good :-(
After I contacted them (magefan), they fixed the issue and released the module update v2.0.12
It turned out that Facebook only looks for og:image in the first 50Kbs of the page source.
So if you are using inline CSS, or some JS in the the og:image will not be seen by Facebook. That was the reason in my case.
The solution is to put OG tags as high as possible in the node.
Added the
<meta property="og:image:secure_url" content="https://abc/image.jpg" />
in order for the facebook debug to actually show my issue that the image was not 200x200. Corrected that and had to completely refresh the debug to resolve.
OG tags should be property instead of name for those of you who copy/paste from other tags like twitter, who uses name.
Eg
<meta property="og:image" content="..." />
<meta name="twitter:image" content="..." />
If you're using a plugin like W3 Total Cache, Just purge your cache and go back to Facebook object debugger page mentioned by #Alex C and then click on Fetch new scrape information.
This solved the issue for me
`<meta property="og:image" content="https://static.wixstatic.com/media/56a444_9273e80a60684dc8b38e56025059f356%7Emv2_d_3200_1800_s_2.png"/>`
<meta property="og:image:width" content="2500"/>
<meta property="og:image:height" content="1330"/>
1200 pixels x 627 pixels
The most frequently recommended resolution for an OG image is 1200 pixels x 627 pixels (1.91/1 ratio). At this size, your thumbnail will be big and stand out from the crowd. Just don't exceed the 5MB size limit.
Double check your img file size.
Remember you need to add og:image:secure for "https"
2.og:image only works with "http".
Try
<meta property="og:image" content="http://example.com/image">
<meta property="og:image:secure" content="https://example.com/image">
I had og:url content as http://... when my site always redirected to https://.... Updating this fixed the issue for me.
I have had success by using https://developers.facebook.com/tools/debug/sharing/batch/ to invalidate the FB cache, then using https://developers.facebook.com/tools/debug/ to refresh it.
This seems to help if a page/post has been previously shared, say, and then an og image or other og element was added.

preview picture on facebook works "times through time"

I try to add my link to a facebook page. Sometimes facebook loads preview picture, sometimes not (even don't try to load and just add as link, without preview picture). My code has the following lines in head section:
<meta property="og:title" content="[title]" />
<meta property="og:description" content="[text]" />
<meta property="og:image" content="[correct_link_to_image]" />
all pages have format like
[MY_ADDRESS]/jpg/[UNIQUE_CODE].html
links for images have format:
[MY_ADDRESS]/publicThumb/[UNIQUE_CODE].JPG
So, each unique page has unique image
My thoughts - it happened because Facebook caches it. But how to solve?
Thanks
I solved my problem.
First at all, facebook proposes us a special debug tool
https://developers.facebook.com/tools/debug/og/object/
If you enter the url to check and click on "Fetch new scrape information" and receive all detailed information, including page error (this was my case, I asked Request.UserLanguages on page and this is empty for Facebook's request, so, Facebook got an error).
Secondly, need to add og:url meta tag (this tag is mandatory to correct work)
Thirdly, og:image should be at least 200x200, otherwise Facebook try to catch any other picture on page
P.S. Seems, russian social network "VKontakte" uses the same tags as Facebook