On a blog detail page I have Facebook OpenGraph tags pulling in various bits of data using the clients CMS tags etc. All works fine apart from the images.
Ideally, as the blog posts contain a lot of images, when posting an article to FB it should pull some of the images from the blog post to use as the thumbnail and let the client decide which one to use. If there are no images in the blog post then it falls back to the default thumbnail I've referenced in the 'og:image' tag. Am I correct in how this should operate?
Currently what happens is it only gives the option to use the default thumbnail and if I don't include the 'og:image' tag then it loads no thumbnail at all, instead of scraping the post for a blog image.
Has anyone encountered this before?
<meta property="og:title" content="{title}"/>
{if facebook_description}
<meta property="og:description" content="{facebook_description}" />
{/if}
<meta property="og:image" content="http://www.client.com/thumbnail.jpg"/>
<meta property="og:site_name" content="{site_name}"/>
<meta property="og:url" content="{page_url}/" />
Creating a separate field for a client to upload a specific thumb for every blog post seems overkill and the blog entries are all one textarea so I can't pull in a select image from the CMS.
Related
Working on a site that contains OpenGraph tags. However, when trying to share one of those pages, the Facebook preview isn't populating properly:
For example: https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/
OG Tags:
<meta property="og:locale" content="en_US"/>
<meta property="og:site_name" content="H&K Insurance"/>
<meta property="og:title" content="Noise Reduction for Your Restaurant - H&K Insurance"/>
<meta property="og:url" content="https://www.hkinsurance.com/2018/03/noise-reduction-restaurant/"/>
<meta property="og:type" content="article"/>
<meta property="og:description" content="Reducing noise is key to maintaining ambiance in your restaurant. Learn about noise reduction techniques on our blog. Call 617-612-6515 to evaluate your insurance coverages."/>
You need to enter your page url and click Scrape Again button in the next page.
https://developers.facebook.com/tools/debug/
If this doesn't help maybe you don't have property requirements for og tags.
Check out this: https://developers.facebook.com/docs/sharing/best-practices
For og:image if you changed image for same url, sometimes facebook caching the image and Scrape button doesn't work. You have two options: wait until facebook cleans its cache or change image name and og:image propery path for the new image and Scrape Again.
After a lot of confusion, I discovered that my file was in UTF-16 format, not UTF-8. As soon as I converted it, everything worked.
Alright so I have set my meta tags exactly how it says on the facebook developer page, and the scraper even shows the data that will be showed to be correct, but when using the facebook share button on my website http://www.etdigitaldesign.com/, all that it shares is the website url, it doesn't include any of the information from the meta tags, that the scraper says it should. No site name, no description, no image. just the website URL.
This is really confusing to me because the scraper says the share button should be showing the proper info, and I'm using a copy/pasted code snippet from the fb developers page, so I can't see what my error could possibly be...
here is what the scraper shows:image at http://i.imgur.com/zNIyhfg.png since I can't post images yet.
and here's my meta code:
<meta property="og:url" content="http://www.etdigitaldesign.com" />
<meta property="og:type" content="website" />
<meta property="og:title" content="ET Digital Design" />
<meta property="og:description" content="Currently doing a grand opening special, making several free websites to get my name out there. Visit the site if you are interested!" />
<meta property="og:image" content="http://www.etdigitaldesign.com/images/etlogobig.png" />
All facebook's examples have self-closing meta tags, so try that and then re-scrape, if that still doesn't work add a fake parameter eg http://example.com/?20 and scape
At the moment the title and image are showing, just not the description. It shows HHTP status 206,which is partial content, but that's not a problem
I have WP blog with Facebook opengraph meta tags. http://comicfotos.ru/zakhvatyvayushhiy-rassvet-ozero_slovenia/ But Facebook does not take first image of the article. What did I make wrong?
This could have happened because of two reasons:
1) You didn't specify the first image in your og:image meta tag. If this is the case, Facebook makes a best effort guess and picks an arbitrary image on your website.
2) If you did specify the og:image meta-tag, and this happened to you ONLY the first time you shared your URL, it's because Facebook won't show the image until the crawler hasn't fetched it.
A way to have it show consistently every time is to specify the og:image:width and og:image:height meta tags as well.
Here's a sample, taken from http://ogp.me/
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />
And here's the official Facebook documentation mentioning this: https://developers.facebook.com/docs/sharing/best-practices
I read thru this post (How to show particular image as thumbnail while implementing share on Facebook?) but, I'm trying to figure out if it's possible to do this with a Tumblr link and no server space to use. My "og:image" (the main logo) is not 200x200 when Tumblr automatically resizes it to fit and I can't upload an image with a specific filename to Tumblr or tinypic, etc. as far as I know...
Any suggestions for some sort of "hack" for this? Thanks!
Oh and, here's my blog and the image I'd like to use...
http://wckdwrld.tumblr.com
http://24.media.tumblr.com/fe2f85fd86f428568ceb79c0f90921f6/tumblr_mw0zg2eqXq1skzrtzo1_1280.png
(the image uploaded to tumblr as a private post... I've done stuff like this successfully before for things like the background image, etc.)
Add:
<meta property="og:title" content="My Awesome Blog" />
<meta property="og:url" content="http://myawesomeblog.tumblr.com/" />
<meta property="og:image" content="http://example.com/myawesomeimage.png" />
between in <head> tags to Your HTML structure in Customize Blog
(According to Tumblr, You have to define the og:url and og:title tags in your theme's HTML to overwrite the OG meta tags)
Here's an example to share (check its source)
So I've notices from my Facebook Page Analytics that posts without link previews (thumbnail & excerpt) get over 10 times the 'reach' as posts with links previews.
I recently used an app called Buffer to post to Facebook and the first 10-15 posts included a small bit of text and a shortened link (that was clickable) - but no thumbnail or excerpt underneath. Those posts had a reach of about 250 people.
Now, posts (from the exact same app) are generating the link preview with thumbnail and I'm reaching 10-12 people per post.
Does anybody have any insight on this? Is there a way to disable Facebook's link detection for previewing URLs while keeping the link in the post itself?
Thanks :D
If you don't control the URL you are posting, I don't know anything you can do. But if you happen to be posting content from a personal blog, etc...you can add social meta tags, which are intended to be used to describe the content to, in this case, Facebook. The example will use Facebook's meta tags.
If you look at the tags below, this is an example from a WordPress blogs generated output for a site I did for a friend:
<meta property="og:title" content="Reality Winner: Accused leaker wanted to ‘burn the White House down’"/>
<meta property="og:description" content="This leftist loon had access to classified material! They don't do a very good job of vetting folks! Can this contractor be 'fired'?!"/>
<meta property="og:type" content="article"/>
<meta property="og:url" content="https://www.mcbanned.com/reality-winner-accused-leaker-wanted-to-burn-the-white-house-down/"/>
<meta property="og:site_name" content="McBanned"/>
<meta property="og:image" content="https://www.mcbanned.com/wp-content/uploads/2017/06/6CB4A836-AFD3-4CAC-B3FF-A1D22427FE89-191-000000672C0A541C.jpeg"/>
<meta property="og:image:width" content="660"/>
<meta property="og:image:height" content="780"/>
These will tell Facebook exactly what to put in the link preview. If you have control over that, you can insert empty description, and a blank white image or something and it will just not show up. As far as completely stopping it...if you link to a simple page with only 1 image that is 200x200 or greater it will pick that one with or without the tags, but if you specify something it will choose that everytime (theoretically) so you could engineer something "blank."