I've looked at the other questions posted on this topic as there was one specifically addressing the scraping but I was not able to see a solution there.
I would also like to know if the meta tags have to be on each web page or can they just be on one page?
My main issue is my image is not being scraped. I have used the debugger and searched and read and tried several things to fix this so the image is scraped and will show in any Facebook postings but have not had any success. There is a lot of different info re the actual image size and I've tried various sizes but still no luck. The site is Soup Surreal
Any suggestions or help is much appreciated. Thank you. Following is what was scraped.
Meta Tag <meta property="og:url" content="http://soupsurreal.com/Soup_Surreal/index.html" />
Meta Tag <meta property="og:title" content="Soup Surreal Serving, Stratford and Kitchener Region" />
Meta Tag <meta property="og:description" content="I am delighted to introduce Soup Surreal products to you. With emphasis on quality and local ingredients, Soup Surreal products are made with passion and skill. It is my commitment to you to provide a quality and comforting soup to fill your bowl." />
Meta Tag <meta property="og:site_name" content="Soup Surreal" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:image" content="http://soupsurreal.com/Soup_Surreal/images/fbimage.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpg" />
Meta Tag <meta property="og:image:width" content="1600" />
Meta Tag <meta property="og:image:height" content="1957" />
I get an error (403 Forbidden) when i try to access the image directly, that may explain why it is not displaying: http://soupsurreal.com/Soup_Surreal/images/fbimage.jpg
You should also check out this page for optimal image sizes: https://developers.facebook.com/docs/sharing/best-practices#images
...and yes, the OG tags should be on every page. At least on every page that should be shareable on Facebook (or elsewhere).
Related
I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.
Just wondering what HTML5 element is shown as the image for a Facebook post which contains a preview of the URL mentioned in the post?
I want to post a link to my website and have my logo appear in the image box of the URL preview...
Hopefully my question makes sense.
You can achieve that by adding Facebook specific OpenGraph meta tags in the header of your webpage.
Here are the meta tags you need to add
<meta property="og:url" content="WEBSITE LINK" />
<meta property="og:type" content="article" />
<meta property="og:title" content="IT WILL APPEAR IN BIG FONTS" />
<meta property="og:description" content="THIS WILL BE SUBTEXT" />
<meta property="og:image" content="LINK OF THE IMAGE" />
you can check out meta tags in details here
Also to verify how it will look and what actually Facebook sees through meta tags you can go to the Open Graph Object Debugger
Example shows what will be seen once you try to share https://images.google.com
Hope this is what you are looking for.
I'm trying to figure out how the Facebook share protocol is getting the images it is.
Example article: http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/
As of right now (8 May 2015 1:00pm CDT), plugging that URL into https://developers.facebook.com/tools/debug/og/object/ it gives the following warning: og:image was not defined, could not be downloaded or was not big enough. Please define a chosen image using the og:image metatag, and use an image that's at least 200x200px and is accessible from Facebook. Image 'http://stmedia.stimg.co/obed021814.JPG?w=600&h=600' will be used instead.
However, further down on the page in the 'Based on the raw tags, we constructed the following Open Graph properties' part of the page, it clearly shows the correct image that is in the og:image tag that is on the page.
Why would Open Graph think og:image is not defined or not be able to access the image when clearly farther down the page it can find it?
The meta tags within the header are as follows:
<link rel="canonical" href="http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/" />
<meta property="og:url" content="http://www.startribune.com/sleepy-eye-quads-celebrate-65th-birthday/302364361/" />
<meta property="og:title" content="Sleepy Eye quads celebrate 65th birthday" />
<meta property="og:site_name" content="Star Tribune" />
<meta name="news_keywords" content="" />
<meta name="description" content="The Sleepy Eye quads have returned to their childhood home in southern Minnesota to celebrate their 65th birthday." />
<meta property="og:description" content="The Sleepy Eye quads have returned to their childhood home in southern Minnesota to celebrate their 65th birthday."/>
<meta property="og:image" content="http://stmedia.startribune.com/images/1430701562_10026501+Quads+Birthday.JPG" />
</head>
It's always good to run all links related to a page in the Facebook Debugger as mentioned by #CBroe.
As for issues with images specifically, I would also recommend you add the og:image:width and og:image:height meta tags if possible to help the crawler crawl your image as per this doc.
If you have other pages facing the same issue, I would supplied the mentioned tags before trying to run the image url itself in the debugger and see if that helps.
This Facebook post https://www.facebook.com/damnlolcom/posts/812448255487528 looks like a photo post but is actually link, it clicks through to an external site.
I have tried sharing a link, removing all og metatags from my site except image path but it doesn't look like that.
The closest I can get is the default link behaviour without any title description, so just an image with the url besides/below rather than displayed over the top of the bottom of the image.
So what sort of post is this?
Thanks for any help.
Check out the url in linter .
raw tags found on page
Meta Tag <meta property="fb:app_id" content="172220699476208" />
Meta Tag <meta property="og:site_name" content="Damn! LOL" />
Meta Tag <meta property="og:title" content="Turns Out My Friend's Mom Is A Racist" />
Meta Tag <meta property="og:description" content="Click for your daily dose..." />
Meta Tag <meta property="og:url" content="http://www.damnlol.com/turns-out-my-friends-mom-is-a-racist-47206.html" />
Meta Tag <meta property="og:image" content="http://www.damnlol.com/pics/998/d6c09d2cc01d04bc5e47483e85774aee.jpg" />
Meta Tag <meta property="og:type" content="article" />
Everything looks normal here . They are not using anything special . It is just facebook presents links in slightly different designs on feed on different times .
ps : try setting property="og:type" content="article"
I have been struggling with this for many hours now and have not gotten anywhere.
I have the following metatags:
<meta property="og:type" content="website" />
<meta property="og:title" content="I'm going to see Speaker name" />
<meta property="og:description" content="This is the description of the speaker" />
<meta property="og:url" content="http://example.com/Speakers.aspx?speaker=35" />
<meta property="og:image" content="http://example.com/test.jpg" />
<meta property="og:image:width" content="600">
<meta property="og:image:height" content="315">
After running this URL through the Facebook debug tool, I was given the following error message:
Object at URL 'http://example.com/Speakers.aspx?speaker=35' of type 'website' is invalid because a required property 'og:image:url' of type 'url' was not provided.
According to Open Graph protocol (http://ogp.me/#structured), the og:image & og:image:url are identical, but I tried to add it anyways:
<meta property="og:image:url" content="http://example.com/RGDDT/images/test.jpg" />
<meta property="og:image:type" content="image/jpeg" />
However the first 7 images on the page are still being scraped instead of the one I want to use.
Any insights would be greatly appreciated!
This is probably the best article on which metatags you need. Facebook requires you to have an id, in order to use even a Like button now a days. I don't see those metatags in your snippet. Try adding:
<meta property="fb:app_id" content="1111111111111111" />
<meta property="fb:admins" content="2222222222" />
The first is your app_id number, it seems you need to turn even your blog into an app to make Facebook happy. The second is your personal id number, you can also use your Fan Page if you have one. Including these things seems to make Facebook happy and I think you get Analytics for your troubles.
So I've finally solved this problem.
Problem #1: I was using 'permanent' URLs (/getmedia/3c87abee-1cd0-4ca3-a07d-b7d8fde8ec4b/irma1.jpg.aspx?width=437&height=434&ext=.jpg) instead of 'direct' URLs (/RGDDT/media/RGDDT/Speakers/facebook-share/irma-boom.jpg?width=600&height=315&ext=.jpg). This was a setting I was able to configure in Kentico (the CMS we have used to build this site)
Problem #2: I was getting the results I wanted in the Facebook debug tool, but they were being cached when I tried to share from the live site. Thanks to this article I was able to solve that problem by adding '&v=1' (or '?v=1' if you don't already have a query string at the end of your URL), so Facebook considered this a new page request and didn't cache the description I had hardcoded in as of this morning.