Our websites article backend does not allow access to anything above </head> which prevents our writers from specifying shareable content with use of the facebook meta tags. Anyone know an alternative route of specifying the article image, title, and description of a shared article without accessing the <head>? My search yielded no results, my apologies if this has been answered.
Can you give your writers a way to create meta tags in other separate pages, outside of your article backend?
The Facebook Open Graph meta tag content does not need to reside within the same page that the like button is rendered on. The shareable content (images/titles/descriptions) will be pulled from the meta content of the page referenced in the URL parameter of the Facebook button. So you could create separate pages corresponding to each of your articles that serve simply to supply the meta content for the Facebook news story post. The Facebook news story posts would still link back to your articles as long as the meta "og:url" in the placeholder file is set to your article url.
Related
I have a single page for articles on my website example.com/articles.
Each article has an anchor tag, therefore a particular URL scrolls to the specific articles:
example.com/articles#article1, example.com/articles#article2 and so on.
I want to be able to share each article on Facebook, with its own meta properties (og:url, og:title, og:type, og:description, og:image).
From what I found, Facebook only crawls the page for one set of tags (for the canonical URL), but is it possible to implement a script for crawling specific metadata for each #article URL?
When I set up meta tags for content I share through Facebook, I add two different urls in the tag og:image and og:image:url . When I share the content on Facebook, always the image in og:image is embedded in the share link.
What I need to know is, How does facebook choose which image to embed in the sharing post, and which meta tags take priority.
Drupal CMS also use several fields for the Metatags Open Graph image sharing management.
It appears that there are no priority. Not mentionned on the documentation https://ogp.me/
Some social networks and tools use in priority og:image (Facebook), other og:image:url and og:image:secure_url (LinkedIn).
With Drupal I only keep one field to be used, I think that you'll be able to override or configure it.
I have a blogger post with multiple images. All the images are uploaded from local drive. My blog post
http://canyoureadit.blogspot.in/2017/02/race-to-oscars-2017-part-2.html
I have followed the article on https://www.addthis.com/academy/how-to-add-open-graph-tags-using-blogger/ to open graph related tags.
It just adds the schema definition at the beginning and then some og tags at the head section of the template. Have not added og:image tag to each image of the post.
Now when i share the post on facebook, i only get the first image as preview. Not able to get the other images. I might be missing something here.
I have even followed this https://gist.github.com/pathawks/1343315 but getting the same results
Best Regards,
Saurav
This is happening because your blog is using a Blogger Dynamic Views template. Dynamic Views template load all the data via JavaScript (including the post HTML)
Currently, Facebook scraper doesn't run JavaScript code (Refer to Facebook scraper doesn't load dynamic meta-tags ) and only infers properties from the meta tags and HTML. In your blog's case, as the post HTML is loaded via JavaScript as well, therefore, Facebook scraper only depends on the meta tags for getting information about the page. You can see a live example of what the Facebook scraper see's when parsing one of your blog post - https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fcodifyit.blogspot.com%2F2015%2F08%2Fcreate-your-first-php-application-with.html
To resolve this problem, switching away from Dynamic Views template to normal Blogger template would be the best solution. If you are particuarly fond of the Dynamic Views design, you can still access it while using a normal Blogger template by accessing the URL - yourblog.blogspot.com/view - For a live example, check https://blogger.googleblog.com/view
I have a website where news articles get posted through CMS and there is no option to add Facebook META OG tags to <head>. I could only add them manually to <body> but that won't work I assume?
Is there another solution where you can tell Facebook which image should be picked when using like/share buttons?
This depends how you make the share. You can use the FB.Ui to request a "Post to a wall" where you can specify the specifics of what appears on the share.
https://developers.facebook.com/docs/reference/dialogs/feed/
If you are sharing the URL only it will read your meta tags as you state. I have not tried making that image the first within the HTML as this may also make that the default.
you can use this link to debug your meta tags and test your sharing if you are sharing a URL.
https://developers.facebook.com/tools/debug/
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).