How to set up In-Depth Articles – Example Code
As discussed in SEO 2014, In-Depth Articles have been rolled out in the USA and are set to enter the UK SERPs any time soon.
After reading several articles, and looking at many websites such as the New York Times, myself and my SEO buddy “Marky” Mark Martin established that the following should enable your blog post or webpage to appear in the In-Depth Articles SERPs:
1. Set up and use Google Authorship
2. Write a good article, with ‘high quality content’
2. Use Schema.org article markup or opengraph code.
An example of Schema markup is shown below.
To make it specific to your own article, edit the parts in red:
SEO after HummingBird
URL of image related to article”>
An article by Drew Griffiths about SEO in 2014 “>
20140122”>
Fill this in with the first line of the article
and an example using opengraph code in the <head> of your HTML:
<meta property="og.type" content="article"/>
<meta property="og.title" content="Actionable SEO 2014"/>
<meta property="og.url" content="URL/ full web address of the article including trailing slash "/>
<meta property="og.description" content="first line of your article"/>
<meta property="og.image" content="URL of your image"/>
Traditionally rich snippets/schema.org markup has appeared in the body of a webpage; however, having looked at some examples, it appears that you can place it in the body or the head.
Use the code:
<meta itemprop= for any markup that you don’t want to appear on the webpage (usually you would put this code in the <head>
<span itemprop= for any markup that you do want to appear on the webpage. For example, the author’s name. Usually you would put the code starting with “span” in the <body>
See the example right at the bottom of the official schema markup page for articles (you may need to click it to see the code properly):
This code could be place in the body of the HTML
Notice that it is contained within it’s own <div>
The text underlined in red would appear on the page (because it’s contained within a <span>)
The text underlined in blue, would not appear on the actual webpage.
If you have Google WebMaster Tools, you can also use the Data Highlighter
– Select Article
– Put in the URL of the Article you need to mark-up with code
– Highlight different sections of your text and a pop up menu should allow you to choose different elements of the Markup
– You can click the “Add missing tags” button to add the date, URL etc, if they are not contained on the actual page:
Hope that helps. Thanks for reading. Please comment if you have any feedback.
Written by Drew Griffiths
Small Business Dad 