How To: Semantic blog markup
After writing some great content you’ll want people to be able to find it on the various search engines and easily share on social networks. This is done by using the proper HTML, microdata, and meta tags to allow search engines and social networks to correctly parse the content on your page and display the correct summary content.
You’ll first want to start with the original description and canonical tags as the basic fallback for anything parsing your page. The description tag is the summary description of the content on the page. The canonical tag is to tell the search engines what the canonical url for your post is in the event they arrived there under a different url.
<meta name="description" itemprop="description" content="Description of post">
<link rel="canonical" href="http://example.com/path/to/post"/>
HTML5 brought with it a number of new tags which we can use to better organize our markup and tell search engines a little more about the organization of our pages. The two most important for blog posts are the section and article tags. The section tag represents a generic section of the document, like a list of articles. The article tag represents the actual post content including the title, publication date, content, etc.
<section>
<article>
<header>
<h1><a href="permalink">Post Title</a></h1>
<time datetime="1970-01-01T00:00:00+00:00">January 1 1970</time>
<span>Your name</span>
</header>
Post content.
</article>
</section>
This doesn’t however tell the search engines what elements contain things like the link, published date, title, content, etc. To do this we need to rely on microdata and schema.org to fill in the blanks and describe the content in the markup.
Because this is a blog post we’ll start by labeling the actual blog post. By adding itemscope to the article tag you’re specifying that the content within the article tag is about a specific item, and the itemtype is the type of item you’re wrapping. in this case, a BlogPosting which has a list of sub tags that we can now define.
<article itemscope itemtype="http://schema.org/BlogPosting"></article>
The title is defined using the name tag and the permalink is defined using the url tag.
<h1 itemprop="name"><a href="permalink" itemprop="url">Post Title</a></h1>
To indicate the date that the content was first published we use the datePublished tag supplying the datetime value.
<time pubdate itemprop="datePublished" content="1970-01-01T00:00:00+00:00" datetime="1970-01-01T00:00:00+00:00">January 1 1970</time>
the author has a number of various implementations including one in HTML5, the rel tag. In microdata it’s the author tag.
<span itemprop="author">Your name</span>
Now moving beyond the microdata and schema.org definitions, to enable the best sharing experience on the social networks you’ll want to set up Twitter cards and Facebook Open Graph data.
The Twitter card metadata fields are as follows (taken from their documentation):
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image" content="https://farm6.staticflickr.com/5510/14338202952_93595258ff_z.jpg" />
And the Facebook Open Graph data meta fields are (taken from their documentation):
<meta property="og:url" content="http://www.example.com/post/1234" />
<meta property="og:type" content="article" />
<meta property="og:title" content="When Great Minds Don’t Think Alike" />
<meta property="og:description" content="How much does culture influence creative thinking?" />
<meta property="og:image" content="http://example.com/image.jpg" />
<meta property="article:published_time" content="1970-01-01T00:00:00+00:00">
Thanks for reading, do you have any other tips for proper blog markup? Let me know below!