05/04/2017

Making Articles on TypePad Social Media Ready with Open Graph

An alert reader of the NewPath Consulting newsletter recently shared one of our articles on LinkedIn and noticed something interesting. When you share on social media platforms like Facebook, Twitter or LinkedIn, extra information about your post should be displayed as you begin to share an article. Unfortunately because we are using Advanced Templates on TypePad, we did not have any of the <META> tags coded to support Open Graph, the standard coding mechanism used to render the rich media previews and search engine optimization.

The TypePad Knowledgebase has a short article on implementing Open Graph, but we went one step further and created a code snippet that can be used to create the necessary markup for both pages and posts.

image from www.brightedge.com

Below is the code you can insert into your custom Header template or include to support a variety of meta data. These tags will cover most social media platforms. Note that we are using a tag called MTIfNonEmpty to evaluate whether an article has an excerpt loaded. Since TypePad can autogenerate excerpts, using this tag effectively lets us evaluate whether we are adding these tags to a page or post. This conditional trickery lets us use the same piece of code on ALL of our pages and posts of the website.


<!-- Schema.org markup for Google+ -->


<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- if there is an exceprt, this is a blog post or category archive -->


<meta itemprop="name" content="<$MTArchiveTitle remove_html="1"$>">
<meta itemprop="description" content="<$MTEntryExcerpt$>">

 

<!-- evaluate if there is an image in the post, the first image is used if there is -- the spec enables automatic resizing of pictures -->
<! -- see http://help.typepad.com/image-tech-specs.html for more details on image specs and resizing -->


<MTEntryPhoto>
<meta itemprop="image" content="<$MTEntryPhotoURL spec="640pi"$>">
</MTEntryPhoto>


<MTElse> <!-- no excerpt, so this is a page -->


<meta itemprop="name" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">
<meta itemprop="image" content="<$MTBlogURL$>images/logo.png">

</MTElse>

</MTIfNonEmpty>

<!-- Twitter Card meta data -->
<!-- these tags are shared by both posts and pages -->

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@twitter_handle_goes_here">
<meta name="twitter:site" content="@twitter_handle_goes_here">
<meta name="twitter:url" content="<$MTEntryPermalink>">

<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- check if there is an exceprt, a blog post -->

<!-- NOTE: Twitter description must be less than 200 characters -->


<meta name="twitter:description" content="<$MTEntryExcerpt$>">
<meta name="twitter:title" content="<$MTPostPageTitle remove_html="1"$>">

<!-- Twitter summary card with large image must be at least 280x150px -->
<MTEntryPhoto>
<meta name="twitter:image" content="<$MTEntryPhotoURL spec="640pi"$>">
</MTEntryPhoto>

<MTElse> <!-- no excerpt, so this is a page -->

<meta name="twitter:description" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">
<meta name="twitter:title" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>">

<!-- we are using a standard image here as s placeholder as MTEntryPhoto only works for posts -->


<meta name="twitter:image" content="<$MTBlogURL$>images/logo.png">

</MTElse>

</MTIfNonEmpty>


<!-- Open Graph data -->

<MTIfNonEmpty tag="MTEntryExcerpt"> <!-- this is a blog post -->

<meta property="og:title" content="<$MTPostPageTitle remove_html="1"$>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<$MTEntryPermalink>" />


<MTEntryPhoto>
<meta property="og:image" content="<$MTEntryPhotoURL spec="640pi"$>" />
</MTEntryPhoto>

<meta property="og:description" content="<$MTEntryExcerpt$>" />

<meta property="og:site_name" content="<$MTBlogName$>" />

<!-- the format string converts internal date/time into the right format for OpenGraph DateTime type -->

<meta property="article:published_time" content="<$MTEntryDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:modified_time" content="<$MTEntryDateModified format="%Y-%m-%dT%H:%M:%S-05:00"$>" />

<!-- this code iterates over all the categories attached to a post and creates a nice category list -->

<meta property="article:section" content="<MTEntryIfCategories><MTEntryCategories glue=", "><MTBlogIfArchives archive_type="Category"><$MTCategoryLabel$><MTElse><$MTCategoryLabel$</MTElse></MTBlogIfArchives></MTEntryCategories></MTEntryIfCategories>" />


<meta property="article:tag" content="blog" />

<MTElse> <!-- this is a page or category archive -->


<meta property="og:site_name" content="<$MTPostPageTitle remove_html="1"$> - <$MTBlogName$>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<$MTBlogURL$>" />
<meta property="og:image" content="<$MTBlogURL$>images/logo.png" />
<meta property="article:published_time" content="<$MTUserStartDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:modified_time" content="<$MTUserStartDate format="%Y-%m-%dT%H:%M:%S-05:00"$>" />
<meta property="article:tag" content="website" />
</MTElse>

</MTIfNonEmpty>

Comments

Verify your Comment

Previewing your Comment

This is only a preview. Your comment has not yet been posted.

Working...
Your comment could not be posted. Error type:
Your comment has been posted. Post another comment

The letters and numbers you entered did not match the image. Please try again.

As a final step before posting your comment, enter the letters and numbers you see in the image below. This prevents automated programs from posting comments.

Having trouble reading this image? View an alternate.

Working...

Post a comment