Saturday, January 2, 2016

HOW TO OPTIMIZE BLOGGER SITE FOR GOOGLE+, FACEBOOK, TWITTER, PINTEREST AND SEARCH

If you are here, it must be because you have heard of how using the right meta tags on your pages can help your post look better in Google+, Facebook, Twitter and Pinterest.

But you also must have realized that they all run different systems. Google+ needs the 'itemprop' markup, while Facebook and Pinterest uses 'og:' and Twitter uses 'name='twitter:''.

To complicate matters, if you want to be listed effectively on Bing, you need to use the 'name='description'' mark up, which will complicate matters when it comes to using Twitter's 'name='twitter:description''.

So is there an 'all in one' solution? Yes, there is, and here it is. You will want to insert this within your <head></head> section.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='summary' name='twitter:card'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta content='summary' name='twitter:card'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='summary_large_image' name='twitter:card'/>
</b:if>
</b:if>
</b:if>
<meta content='@[your twitter id]' name='twitter:site'/>
<meta content='@[your twitter id]' name='twitter:creator'/>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
</b:if>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
<b:else/>
<meta content='[your favicon url]' height='200' name='twitter:image' property='og:image' width='200'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>
Now, let me break it down for you.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<meta content='summary' name='twitter:card'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta content='summary' name='twitter:card'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='summary_large_image' name='twitter:card'/>
</b:if>
</b:if>
</b:if>
If you are like me, you will only use large pretty images for your blog posts. Your static pages and homepage have next to no unique images and so, you probably want to use your favicon image or your brand logo.

What this bit of the code does is it changes the nature of the Twitter card from the large summary to the ordinary summary and allows you to use your brand logo to front the static pages and homepage; while your nice fancy post images still come out as is in the large summary.
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta expr:content='data:blog.pageName' itemprop='name' name='twitter:title' property='og:title'/>
<meta content='article' property='og:type'/>
<b:else/>
<meta expr:content='data:blog.title' name='twitter:title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
</b:if>
Now, this bit of code ensures that the right title and page type is identified for the homepage, the static pages and each blog post. If you want your posts and site classified by any other type, just change the items highlighted in green.
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageUrl' name='twitter:image' property='og:image'/>
<b:else/>
<meta content='[your favicon url]' height='200' name='twitter:image' property='og:image' width='200'/>
</b:if>
Now, this bit of code ensures that your images come out the way you want them to. You see, Facebook won't show images smaller than 200x200 px. And even if the image is larger, they sometimes need a little bit of help in identifying the image size. So by defining the size for them, you will ensure that it will come out right every time.

Also, for Twitter, you must use 'data:blog.postImageUrl'. Some other solutions will tell you to use 'data:blog.postImageThumbnailUrl'. Now, Thumbnail Url is too small to be used for Twitter's large summary and it is best to retrieve your original image for best results. So the ones in red, do not change.
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='description'/>
<meta expr:content='data:blog.metaDescription' itemprop='description' name='twitter:description' property='og:description'/>
</b:if>
Now, for the main event. The cornerstone of any social media post is your meta description tag. If you are here, that means you understand this and there is no need for me to explain it further. But each of the different social media networks use a different markup language. And Bing needs you to use 'name='description''. Now, XML will not allow you to have two 'name' elements in one meta tag, so you will need to have two meta description tags, one for Bing, which says 'name='description'' and one for Twitter, which says 'name='twitter:description''.

Yes, I know what you are thinking. It's not good to have two description tags for the same page. Well, yes. But in this case, because they are both known by different names, pardon the pun, it will not throw up any errors on SEO validators. I checked with Bing's.
<meta content='@[your twitter id]' name='twitter:site'/>
<meta content='@[your twitter id]' name='twitter:creator'/>
<meta expr:content='&quot;en_US&quot;' property='og:locale'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
Finally, customize the items marked in yellow to suite your own Twitter id and favicon url, and you are on your way to beautiful posts each and every time your URL is listed on on a social media network.

Like our messages?

Sign up to get our messages delivered daily.

Social Media Policy Privacy Policy Disclaimer Terms of Use