Automattic/WordPress supports hosting of WordPress sites on their WordPress.com domain, with over 72M sites and counting.
By default, WordPress-hosted blogs are enabled with social meta tags. WordPress automatically scans the contents of your post and determines the best meta data. Additionally, WordPress allows for easy-posting of your blog entries directly to social media via the “New Post” interface.
Tumblr has quickly become one of the most popular blogging platforms for content and photos, with nearly 145M sites and counting.
By default, Tumblr has social meta tags enabled, and “smart suggests” the meta data based on your post type. However, if you want to further customize the social meta tags, you can follow following process.
First add following code in the <head>
tag:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# blog: http://ogp.me/ns/blog#">
And place the following code before </head>
section:
<!-- BEGIN TUMBLR FACEBOOK OPENGRAPH TAGS -->
<meta property="og:site_name" content="{Title}"/>
{block:PermalinkPage}
<meta property="og:url" content="{Permalink}"/>
<meta property="og:type" content="article"/>
{block:Posts}
{block:Text}
{block:Title}<meta property="og:title" content="{PlaintextTitle}"/>{/block:Title}
<meta property="og:description" content="{PlaintextBody}"/>
{/block:Text}
{block:Photo}
<meta property="og:image" content="{PhotoURL-500}"/>
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}
{block:Photoset}
{block:Photos}
<meta property="og:image" content="{PhotoURL-500}"/>
{/block:Photos}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photoset}
{block:Quote}
<meta property="og:title" content="{PlaintextQuote}"/>
<meta property="og:description" content="{PlaintextSource}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Quote}
{block:Link}
<meta property="og:title" content="{PlaintextName}"/>
<meta property="og:description" content="{PlaintextDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Link}
{block:Chat}
<meta property="og:title" content="{PlaintextTitle}"/>
<meta property="og:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Chat}
{block:Audio}
<meta property="og:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
<meta property="og:description" content="{PlaintextCaption}"/>
{block:AlbumArt}<meta property="og:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
{/block:Audio}
{block:Video}
{block:Caption}<meta property="og:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Video}
{block:Answer}
<meta property="og:title" content="{PlaintextQuestion}"/>
<meta property="og:description" content="{PlaintextAnswer}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:Answer}
{/block:Posts}
{/block:PermalinkPage}
{block:IndexPage}
<meta property="og:title" content="{Title}"/>
<meta property="og:type" content="blog"/>
<meta property="og:description" content="{MetaDescription}"/>
<meta property="og:image" content="{PortraitURL-64}"/>
{/block:IndexPage}
<!-- END TUMBLR FACEBOOK OPENGRAPH TAGS -->
For Twitter card property also place the following code before </head>
section:
<!-- BEGIN TWITTER TAGS -->
{block:PermalinkPage}
<meta name="twitter:url" content="{Permalink}"/>
<meta name="twitter:site" content="@YOUR_BLOG_TWITTER_USERNAME_HERE">
<meta name="twitter:creator" content="@YOUR_TWITTER_USERNAME_HERE">
{block:Posts}
{block:Text}
<meta name="twitter:card" content="summary">
{block:Title}<meta name="twitter:title" content="{PlaintextTitle}"/>{/block:Title}
<meta name="twitter:description" content="{PlaintextBody}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Text}
{block:Photo}
<meta name="twitter:card" content="photo">
<meta name="twitter:image" content="{PhotoURL-500}"/>
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photo}
{block:Photoset}
<meta name="twitter:card" content="photo">
{block:Photos}<meta name="twitter:image" content="{PhotoURL-500}"/>{/block:Photos}
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Photoset}
{block:Quote}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextQuote}"/>
<meta name="twitter:description" content="{PlaintextSource}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Quote}
{block:Link}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextName}"/>
<meta name="twitter:description" content="{PlaintextDescription}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Link}
{block:Chat}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextTitle}"/>
<meta name="twitter:description" content="{block:Lines}{block:Label}{Label}: {/block:Label}{Line} • {/block:Lines}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Chat}
{block:Audio}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{block:Artist}{Artist} - {/block:Artist}{block:TrackName}{TrackName}{/block:TrackName}"/>
<meta name="twitter:description" content="{PlaintextCaption}"/>
{block:AlbumArt}<meta name="twitter:image" content="{AlbumArtURL}"/>{/block:AlbumArt}
{/block:Audio}
{block:Video}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextTitle}"/>
{block:Caption}<meta name="twitter:description" content="{PlaintextCaption}"/>{/block:Caption}
{/block:Video}
{block:Answer}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{PlaintextQuestion}"/>
<meta name="twitter:description" content="{PlaintextAnswer}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:Answer}
{/block:Posts}
{/block:PermalinkPage}
{block:IndexPage}
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="{Title}"/>
<meta name="twitter:description" content="{MetaDescription}"/>
<meta name="twitter:image" content="{PortraitURL-64}"/>
{/block:IndexPage}
<!-- END TWITTER TAGS -->
Google’s Blogger is a great platform for publishing rich content. To add some social meta tags follow the following process.
First add xmlns:og='http://ogp.me/ns#'
in the <HTML>
tag. Note that there may already exist some code.
<HTML xmlns:og='http://ogp.me/ns#'>
And place the following code before </head>
section:
<!-- Open Graph metatags -->
<b:if cond='data:blog.pageType == "item"'>
<meta content='article' property='og:type'/>
<meta content='https://www.facebook.com/YOUR_FACEBOOK_PROFILE_USERNAME_HERE' property='article:author'/>
<meta content='YOUR_NAME_HERE' name='author'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<meta expr:content='data:blog.pageName' name='title'/>
<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/>
<meta content='YOUR_LOGO_URL_HERE' property='og:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta expr:content='data:blog.metaDescription' name='description'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' property='og:description'/>
<meta expr:content='data:blog.pageTitle' name='description'/>
</b:if>
<b:else/>
<meta content='blog' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.canonicalHomepageUrl' property='og:url'/>
<meta content='YOUR_LOGO_URL_HERE' property='og:image'/>
<b:if cond='data:blog.metaDescription'>
<meta content='data:blog.metaDescription' property='og:description'/>
<meta content='data:blog.metaDescription' name='description'/>
<meta content='YOUR_BLOG_KERYWORDS_HERE' name='keywords'/>
</b:if>
</b:if>
<!-- You can replace following locale "British English" (en_GB) or Nepali (ne_NP) alternative with your own -->
<meta content='en_US' property='og:locale'/>
<meta content='en_GB' property='og:locale:alternate'/>
<meta content='ne_NP' property='og:locale:alternate'/>
<!-- /Open Graph metatags -->
For Twitter card property also place the following before </head>
section:
<!-- Twitter card metatags -->
<meta content='@YOUR_BLOG_TWITTER_USERNAME_HERE' name='twitter:site'/>
<b:if cond='data:blog.pageType == "item"'>
<meta content='@YOUR_TWITTER_USERNAME_HERE' name='twitter:creator'/>
<meta expr:content='data:blog.pageName' name='twitter:title'/>
<meta expr:content='data:blog.canonicalUrl' name='twitter:url'/>
<b:if cond='data:blog.postImageUrl'>
<meta content='summary_large_image' name='twitter:card'/>
<meta expr:content='data:blog.postImageUrl' name='twitter:image:src'/>
<meta content='560' name='twitter:image:width'/>
<meta content='750' name='twitter:image:height'/>
<b:else/>
<meta content='summary' name='twitter:card'/>
<meta content='YOUR_LOGO_URL_HERE' name='twitter:image'/>
</b:if>
<b:if cond='data:blog.metaDescription'>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
<b:else/>
<meta expr:content='data:blog.pageTitle' name='twitter:description'/>
</b:if>
<b:else/>
<meta content='summary' name='twitter:card'/>
<meta expr:content='data:blog.title' name='twitter:title'/>
<meta expr:content='data:blog.canonicalHomepageUrl' name='twitter:url'/>
<meta content='YOUR_LOGO_URL_HERE' name='twitter:image'/>
<meta expr:content='data:blog.metaDescription' name='twitter:description'/>
</b:if>
<!-- /Twitter card metatags -->
For Google+ and Facebook authorship include the following code before </head>
section:
<!-- Facebook admins and app ID -->
<meta content='YOUR_FB_ID_HERE' property='fb:admins'/>
<meta content='YOUR_FB_APP_ID_HERE' property='fb:app_id'/>
<!-- Google authorship and publisher markup -->
<link href='https://plus.google.com/YOUR_GOOGLE+_PROFILE_ID_HERE' rel='author'/>
<link href='https://plus.google.com/YOUR_GOOGLE+_PAGE_ID_HERE' rel='publisher'/>
Be sure to check one of your example posts via the different social media metadata validator.