Topics

Create Blogger AMP HTML template install & download Accelerated Mobile Pages themes for Blogspot platform.


Fix Twitter Cards Issues & Add Meta Data Dynamically AMP HTML Blogger Theme

Fix Twitter Cards Issues & Add Meta Data Dynamically AMP HTML Blogger Theme
AMP HTML provides the necessary functions/tools to easily share your Blogger posts with amp-social-share component -- a collection of social sharing utilities to easily share contents on most used social media platform with a click of a button!.

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

Blogger AMP HTML Twitter Cards Tutorial & Meta Tags

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 ? &quot;summary_large_image&quot; : &quot;summary&quot;' 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 : &quot;&quot;' 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.

Blogr-AMP Blogger AMP HTML Template Rated 5/5 based on 98 reviews Fix image & content sharing at Twitter for AMP HTML powered Blogger Themes using Twitter Cards adds dynamically meta data contents & post images. Blogr-AMP: Fix Twitter Cards Issues & Add Meta Data Dynamically AMP HTML Blogger Theme
5/ 5
Best AMP Blogger template, Blogr-AMP exceeded my expectations. Search engine friendly, easy to use, backed by great support AMP HTML provides the necessary functions/tools to easily share your Blogger posts with amp-social-share component -- a collection of social....

Topics You Might Be Interested...


Disqus Comments

Facebook Comments

Google+ Comments

Code Parser

Have a code snippet to share? Format RAW codes here...

Users who needs to share code snippets in comments, use helper below to paste your codes & copy to comments body.

Contact Us