Skip to content

Instantly share code, notes, and snippets.

@sverrirs

sverrirs/Google Blogger Social Meta Tags.html

Last active January 27, 2025 04:29
Show Gist options
  • Save sverrirs/fb25fc3f93414a1025a1 to your computer and use it in GitHub Desktop.
Save sverrirs/fb25fc3f93414a1025a1 to your computer and use it in GitHub Desktop.
Download ZIP
Because it is notoriously difficult, here is how you integrate social media tags for Facebook, Twitter, Google+ and Pinterest into Google Blogger template. Tested and validated by myself on blogger.com in August 2015. This is based on https://gist.github.com/MilanAryal/92997b311580c6e96dd0 but with important fixes and different integration strat…
Raw
Google Blogger Social Meta Tags.html
<!-- add the following code in the head and body tags -->
<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<body itemscope='itemscope' itemtype='http://schema.org/Blog' prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>
<!--
I've found easiest to simply include the rest of the tags in the body of the webpage.
The browser will automatically interpret the should-be header tags correctly.
The only problem, and unavoidable when using a blogger template is that the Pintrest markup
will not currently work with their Rich Pin validation tool.
-->
<!-- Locate the <b:widget type='Blog'> and place all the code below (until the STOP comment) into the first <b:includable> -->
<meta property='og:site_name' content='YOUR SITE NAME' />
<!-- Image to use for Facebook shares -->
<b:if cond='data:post.firstImageUrl'>
<link expr:href='data:blog.firstImageUrl' rel='image_src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<link expr:href='data:blog.postImageThumbnailUrl' rel='image_src'/>
<b:else/>
<link expr:href='data:blog.postImageUrl' rel='image_src'/>
</b:if>
</b:if>
<!-- Open Graph Meta Tags -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='blog' property='og:type'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<b:else/>
<meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
<b:else/>
<meta content='data:blog.postImageUrl' property='og:image'/>
</b:if>
</b:if>
<!-- End Open Graph Meta Tags -->
<!-- Facebook Meta Tags -->
<meta content='YOUR_FACEBOOK_ID' property='fb:admins'/> <!-- find your facebook if from graph.facebook.com/your_username -->
<meta expr:content='&quot;en_US&quot;' property='og:locale'/> <!-- en_US refers to US English language -->
<meta expr:content='&quot;en_GB&quot;' property='og:locale:alternate'/> <!-- en_GB refers to UK English language -->
<meta expr:content='&quot;is-is&quot;' property='og:locale:alternate'/> <!-- Icelandic language -->
<!-- Google Authorship and Publisher Markup -->
<link href='YOUR_GOOGLE+_PROFILE_URL' rel='author'/>
<link href='YOUR_GOOGLE+_PROFILE_URL' rel='publisher'/>
<!-- Schema.org Markup Tags for Google+ -->
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name'/>
<meta expr:content='data:blog.canonicalUrl' itemprop='url'/>
<b:else/>
<meta expr:content='data:blog.title' itemprop='name'/>
<meta expr:content='data:blog.homepageUrl' itemprop='url'/>
</b:if>
<!-- Description text for Google+ -->
<meta expr:content='data:blog.metaDescription' itemprop='description'/>
<!-- Image for Google+ -->
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' itemprop='image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' itemprop='image'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' itemprop='image'/>
</b:if>
</b:if>
<!-- End Schema.org Markup Tags for Google+ -->
<!-- Twitter Card Tags -->
<meta content='@YOUR_TWITTER_USERNAME' name='twitter:site'/>
<meta content='@YOUR_TWITTER_USERNAME' name='twitter:creator'/>
<b:if cond='data:post.firstImageUrl'>
<meta content='summary_large_image' name='twitter:card'/> <!-- summary_large_image or any other your card types -->
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
</b:if>
</b:if>
<b:else/>
<meta content='summary' name='twitter:card'/>
<b:if cond='data:post.firstImageUrl'>
<meta expr:content='data:blog.firstImageUrl' name='twitter:image:src'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' name='twitter:image:src'/>
<b:else/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
</b:if>
</b:if>
</b:if>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:post.snippet' name='twitter:description'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<!-- /Twitter Card Tags -->
<!--
STOP INSERTING INTO <b:widget type='body'>
//////////////////////////////////////////
-->
<!--
The following Code must go inside the <b:includable id='post' var='post'> tag.
Simply paste them inside the first <div> you find there
-->
<!-- Search keywords -->
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='keywords'/>
<meta expr:content='data:label.name' property='article:tag'/> <!-- Pintrest -->
</b:loop>
<b:else/>
<meta content='YOUR_DEFAULT_BLOG_KEYWORDS' name='keywords'/>
</b:if>
<!-- Pinterest Rich Pins Tags -->
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<meta content='YOUR_NAME' property='article:author'/>
<!-- If you don't want your site to have Rich Pins, place the following inside your <head>
<meta name="pinterest-rich-pin" content="false" />
-->
<!-- /Pinterest Rich Pins Tags -->
<!--
After adding this code to your template. Make sure you preview it before saving to
ensure that there are no errors in the integration.
Then use the following validators:
Google+: https://developers.google.com/structured-data/testing-tool/
Facebook: https://developers.facebook.com/tools/debug/
Twitter: https://cards-dev.twitter.com/validator
Pinterest: https://developers.pinterest.com/tools/rich-pins/validator/
-->
@jfoclpf
Copy link

jfoclpf commented Sep 9, 2018 •
edited
Loading

The tag og:description is not fetched.
You can test here: https://opengraphcheck.com/

on line

<meta expr:content='data:blog.metaDescription' itemprop='description'/>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment