I'd like to add open graph meta data to my site such that links of my site look like the Anthropologie post below, but instead I'm getting a smaller image with text on the right like the Etsy post above it.
These are the open graph tags I'm providing:
<meta property="og:type" content="article" />
<meta property="og:title" content="{{the title of my page}}" />
<meta property="og:description" content="{{the description}}" />
<meta property="og:image" content="{{ the image url}}" />
Should I be using a different type? Or is there another opengraph tag I need to provide to get the bigger image to display?
The Etsy's post you have shown is a feed,
and the Anthropologie's post you've shown is a photo
Understand the difference between the two.
Related
When I share a link on tumblr, it sometimes will grab the page's blog post image. For example, if I share something like:
http://www.smartpassiveincome.com/income-reports/my-may-2016-monthly-income-report/
It'll grab this image for it's thumbnail:
http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg
How do you make tumblr grab the image? Is there some meta tag you need to include?
Searching the source code this image appears three times:
<meta property="og:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<meta name="twitter:image" content="http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg"/>
<header style="background-image: url('http://cdn.smartpassiveincome.com/wp-content/uploads/2016/03/Income-Reports-legacy-posts.jpg')">
Does anyone know which one it uses and could explain what the process for choosing how to grab the image is?
The original page is: http://www.patchesoft.com/learning-linux-how-to-find-what-version-of-linux-youre-running-command-uname-and-lsb_release/
But when I post it into Tumblr, it doesn't grab the featured image.
These meta properties should get your image to show on tumblr
<meta property="og:image" content="http://example.com/ogp.jpg" /> <!-- Required -->
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
To learn more head over to http://ogp.me/
Your site seems to have these properties set and I get this when I put url of your site on tumblr...
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.
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'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).
I have a website. When anyone shares a link of my website(manually and not by Graph API), an incorrect image is being displayed rather than the logo of my website. Please tell me how to display the logo correctly. Is there a meta tag or something like that to do that thing...Please help me...
There is a special meta property for displaying the correct image. Some of them are as follows :-
<meta property="og:title" content="Your title" />
<meta property="og:url" content="http://example.com/url?dynamic=0 />
<meta property="og:image" content="http://example.com/your-logo.png" />
You can find every detail at the Open Graph Website