Blogger Social Media Optimization (SMO) with Open Graph Protocol

Nowadays, the importance of implementing SEO (Search Engine Optimization) techniques has decreased significantly, since Google and other web giants do not prioritize search results based on that anymore but mostly according to the quality of your content.

Instead, let me put it to you that way; Social Media sites are becoming more of a SEO factor than what SEO itself used to be. That's exactly why my blog is optimized with the OGP (Open Graph Protocol) Meta Tags, which is by the way a Blogger (or Blogspot) blog.

What is OGP (Open Graph Protocol)

The Open Graph Protocol enables any web site or blog to identify and establish itself magnificently as an object within the boundaries of a particular social graph through Meta Tags embraced within <head> and </head> in a web page HTML header.

Well, so my blog has certain and unique OGP meta tags included in each page or blogs post, the information given by those particular tags differ according to the page content or type.

Now for instance, if you request source code for the blog home page through your browser, you should see in the page header there's some thing like this:

<html lang='en-US' prefix='og: https://ogp.me/ns#'>
<head>
<!-- [ SMO ] -->
<meta content='iSmooth Blog' property='og:title'/>
<meta content='website' property='og:type'/>
<meta content='http://www.ismoothblog.com/' property='og:url'/>
<meta content='http://www.ismoothblog.com/favicon.ico' property='og:image'/>
<meta content='Delivers latest information and support for technology, mobile devices and social networking to help users, all in a bundle of uniqueness.' property='og:description'/>
<meta content='iSmooth Blog' property='og:site_name'/>
<meta content='https://www.facebook.com/iSmoothBlog' property='article:publisher'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta content='iSmooth Blog' name='twitter:title'/>
<meta content='@iSmoothBlog' name='twitter:site'/>
<meta content='@SaleemAlmajed' name='twitter:creator'/>
</head>

As you can see, there's information about the blog name, page type, language and author profile including other relevant social media queries and accounts used by the creator. In the other hand, if you check a blog post page header, say for example my previous article:

<!-- [ SMO ] -->
<meta content='iSmooth Blog: Host Blogger CSS, JavaScript and HTML Files on GitHub Pages' property='og:title'/>
<meta content='article' property='og:type'/>
<meta content='http://www.ismoothblog.com/2016/11/host-blogger-css-javascript-files-using-github-pages.html' property='og:url'/>
<meta content='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgD-KmmoCVxP6lN2zhP6OM8G4KFibc_q-Xm2msoKvdRndPEKxRjeWN3Gn6puZUfM2jWNknzA7Q5odRF8hAW6j7BdROSmWU3AoRsP_JTv76Z78AR0DL-NuCWgq-1CxFfCmTdFq1OIvP6CsU/s400/GitHub-Pages-Free-Hosting-Service-Blogger.png' property='og:image'/>
<meta content='How to host CSS, JavaScript, HTML Files and even photos for Blogspot blogs with unlimited bandwidth and storage space for free using GitHub Page service.' property='og:description'/>
<meta content='iSmooth Blog' property='og:site_name'/>
<meta content='https://www.facebook.com/iSmoothBlog' property='article:publisher'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta content='iSmooth Blog: Host Blogger CSS, JavaScript and HTML Files on GitHub Pages' name='twitter:title'/>
<meta content='@iSmoothBlog' name='twitter:site'/>
<meta content='@SaleemAlmajed' name='twitter:creator'/>

Note that there's multiple entries changing in respect to page type, most notable ones are og:title followed by og:type and most importantly og:image while this behavior is done automatically by a single code I use inside my Blogger custom template.

The image property tag for example provide a suitable photo taken from your embed material, this will tell social media sites which photo to use and display when your post gets shared within their social service or application, like as a thumbnail and many other uses according to their technology.

SMO (Social Media Optimization) for Blogger

We should know exactly by now why we would want to implement SMO right, so in order to make use of my OGP implementation for your own Blogger blog, navigate to your template editor from your blogger control panel Template → Edit HTML and search for </head> then add this code ABOVE or (before it):

<!-- [ SMO ] -->
<b:if cond='data:blog.url == data:blog.homepageUrl'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>  
<b:if cond='data:blog.url'>
<meta expr:content='data:blog.url' property='og:url'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageName'>
<meta expr:content='data:blog.pageName' property='og:title'/>
</b:if></b:if></b:if></b:if>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<b:else/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta expr:content='data:blog.postImageUrl' property='og:image'/>
<b:else/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postThumbnailUrl' property='og:image'/>
<b:else/>
<meta expr:content='data:blog.blogspotFaviconUrl' property='og:image'/>
</b:if></b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
</b:if>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta content='https://www.facebook.com/YOUR-BLOG-PAGE' property='article:publisher'/>
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='id_ID' property='og:locale:alternate'/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.pageTitle' name='twitter:title'/>
<meta content='@YOUR-BLOG' name='twitter:site'/>
<meta content='@YOUR-PERSONAL-ACCOUNT' name='twitter:creator'/>

Note: Twitter accounts and Facebook page entries highlighted at the bottom of the code above is personal and should be changed manually to your own settings, any other field is dynamic which means it will be defined automatically according to your blogger settings.

One last simple step remains and it's very important, which is to propagate that your blog is covered under the OGP (Open Graph Protocol), to do that search exactly for <html which should be found at the third line of your template then replace it with the following code:

<html prefix='og: http://ogp.me/ns#'

Basically, you have to add prefix='og: https://ogp.me/ns#' inside your HTML opening tag. That's all.

OGP Structured Properties

The implementation explained above for Bogger is not limited, you can expand its functionality and add more OGP Structured Properties to identify your site with further information to the social graph, you can find and learn about that by following instructions available on the Open Graph Protocol official website.

iSmooth Blog