However AMP HTML Blogger theme users are facing issues when sharing directly via blog URLs at Twitter where the correct contents, post images is not retrieved.
Blogger AMP HTML themes comes equipped with all the necessary meta data which makes your blog pages/posts sharing more "search friendly" on various social media platforms ;).
Twitter platform introduces Twitter Cards a set of meta data used by this platform crawlers to search for a web page information when shared. Unfortunately this meta data is not provided on Blogger themes by default & users requires to add them manually.
Each social network/platform has its own unique technologies to retrieve meta data from a web page which includes the pages featured image. Below are some examples...
- Facebook & LinkedIn: OpenGraph
- Google: Rich snippets
- Twitter: Twitter Cards
In this page we will expose to you on how to add Twitter meta data dynamically on Blogger themes using Blogger version 3 operators/data tags.
Before proceeding, Backup your Blogger Theme codes by using the Backup/Restore button.
- Go to
Theme>Edit HTML - Find
<head>HTML tag & paste below HTML/XML codes below this<head>tag.
<b:comment> Twitter Cards for Blogger Themes </b:comment> <meta expr:content='data:view.featuredImage ? "summary_large_image" : "summary"' name='twitter:card'/> <meta content='@username' name='twitter:site'/> <meta content='@username' name='twitter:creator'/> <meta expr:content='data:blog.homepageUrl.canonical' name='twitter:domain'/> <meta expr:content='data:view.url.canonical' name='twitter:url'/> <meta expr:content='data:view.title' name='twitter:title'/> <meta expr:content='data:blog.metaDescription ? data:view.description : ""' name='twitter:description'/> <b:if cond='data:view.featuredImage'> <meta expr:content='data:view.featuredImage' name='twitter:image:src'/> </b:if>
Replace @username with your twitter username. Then click
Save Theme.Test your blog post URL by using Twitter validator page: https://cards-dev.twitter.com/validator
Check the minimum requirement to share images for example image type, size etc as per Twitter Developer help page in below links.
Twitter Developer References:
More reference & working solutions for blogspot blogs:
You can also add default values if your search description is unavailable or if your featured image is not available for example for homepage, static page, index page or archive pages.
If you need help & assistance, use the comment section below or send in your inquiries directly to us by using our contact page.