Take the 2-minute tour ×
Webmasters Stack Exchange is a question and answer site for pro webmasters. It's 100% free, no registration required.

I have been remaking my website for some time now and I want to launch it as quickly as possible but I want to make it leading edge if possible. I am currently I'm using a modified template (I know! web designer using template tut tut... but long story short I had 1 week to get a live website as well as doing a business plan for a business grant and since operating I've been working flat out until the past 2months and its chillzor! which is nice!). Moving on!

While the design is important I also want to take a keen interest in using markup, the problem I'm encountering is that schema is SOOOO VAGUE! and it's absolutely smashing my brain.

The question is rather simple but rather complex at the same time, which one do you consider best:

  1. itemtype="http://schema.org/Article"
  2. itemtype="http://schema.org/BlogPosting"

It's worth mentioning that I've done some research in this already and supposedly is the difference between a blog post and an article by definition outside of Schema is that Blog posting generally tends to be anywhere from 50 words to 400 words while generally articles are more detailed and contain 500 words upwards. But looking on schema they associate an article with Magazines and Newspapers, Surely this this is not right?

Also is it a good or bad idea to use categories as 'keywords' schema?

This is my current markup and I welcome any additional criticism or advice on improving the current markup, perhaps even pointing out bad habits of <p>, additionally you can view the it online here and how Google views this here.

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="Why all of your website designs should be responsive" href="#just-a-test3">Why all of your website designs should be responsive</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-25</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup3.png" alt="markup3"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test3">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="101 Ways of Grabbing Your Audience Less than 0.1secs" href="#just-a-test2">101 Ways of Grabbing Your Audience Less than 0.1secs</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-12</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup2.png" alt="markup2"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test2">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

<article itemscope itemtype="http://schema.org/Article">
  <header>
    <hgroup>
        <h1 itemprop="name"><a rel="bookmark" title="10 Top Design Tips" href="#just-a-test1">10 Top Design Tips</a></h1>
        <h6>Publish Date: <span itemprop="datePublished">2013-01-11</span> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a></h6>
    </hgroup>
  </header>
  <p><img itemprop="image" src="http://www.bybe.net/downloads/markup1.png" alt="markup1"></p>
  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>
  <footer>
    <p class="right"><a itemprop="url" class="more-link" href="#just-a-test1">Read the full article...</a></p>
    <p class="left">Filed Under: <span itemprop="keywords"><a href="#">Responsive Design</a>, <a href="#">Website Design</a></span></p>
  </footer>
</article>

EDIT:

I am now using:

<article itemscope itemtype="http://schema.org/BlogPosting">

    <header>
        <h1 itemprop="name"><a rel="bookmark" title="Title Description" href="#">Article Header</a></h1>
        <dl>
            <dt>Publish Date:</dt>
            <dd><time itemprop="datePublished">2013-01-25</time></dd>
            <dt>Authors:</dt>
            <dd><a rel="author" href="#">Author Name</a></dd>
        </dl>
    </header>  

    <div class="blog-container">
        <a title="Title Description" class="th" href="#">
            <img width="870" height="400" itemprop="image" alt="Alt Text here" class="post" src="#">
        </a>
        <p itemprop="description">A long but not to long decription</p>
        <a itemprop="url" title="Title Description" href="#" class="creading">Continue Reading</a>
    </div>

    <footer>
        <dl>
            <dt>Filed Under:</dt> 
            <dd itemprop="keywords"><a rel="category" title="Title Description" href="#">Responsive Design</a></dd>
            <dd itemprop="keywords"> <a rel="category" title="View all posts in Website Design" href="#">Website Design</a></dd>
        </dl>
    </footer>

</article>
share|improve this question

2 Answers 2

up vote 5 down vote accepted

schema.org: Article, BlogPosting

If something is a schema:BlogPosting, it is an schema:Article, too, isn't it? As schema:BlogPosting is a more specific schema:Article:

More specific types

  • BlogPosting
  • NewsArticle
  • ScholarlyArticle

So you have an schema:Article, and now you may decide if one of these more specific types applies to your content. If not, stay with schema:Article.

HTML5

  • No need for the title attribute on the bookmark link (as it contains the same content).

  • You could use the time element for the publication dates.

  • I wouldn't use a sub-heading for publication date and author, as I don't think it's an alternative title or a tagline (might be appropriate for your actual content, though). Instead, I would include these in a footer element:

    A footer typically contains information about its section such as who wrote it …

  • I wouldn't include the image in a p element. You could omit any "container" element, or use a div if you need one.

  • The link "Read the full article..." shouldn't be in the footer. I'd use the nav element, as it is the main navigation for that sectioning element (→ article).

  • I'd use a dl element (or a ul) for the keywords.

So an article could look like:

<article itemscope itemtype="http://schema.org/Article">

  <h1 itemprop="name"><a rel="bookmark" href="#just-a-test3">Why all of your website designs should be responsive</a></h1> 
  <!-- no need for 'header', but can be added if needed -->

  <footer>
    Publish Date: <time itemprop="datePublished">2013-01-25</time> by: <a rel="author" href="http://plus.google.com/104670346136364130203/">Simon Hayter</a>
    <!-- 'dl' could be used if you use "Author:" instead of "by:" -->
  </footer>

  <img itemprop="image" src="http://www.bybe.net/downloads/markup3.png" alt="markup3">

  <p itemprop="description">This is a very long sentence to demonstrate a snippet of a blog article, blah blah blah blah blah blah blah blah blah blah blah blah blah da da da da di di di dim dim dim di</p>

  <nav>
    <a itemprop="url" class="more-link" href="#just-a-test3">Read the full article...</a>
  </nav>

  <footer>
    <dl>
      <dt>Filed Under</dt>
      <dd itemprop="keywords"><a href="#">Responsive Design</a></dd>
      <dd itemprop="keywords"><a href="#">Website Design</a></dd>
    </dl>
  </footer>

</article>
share|improve this answer
    
+1 this is the kind of information and suggestions I'm looking for! I don't mind using additional microdata if people have any ideas! –  bybe Mar 29 '13 at 15:49
    
I think you could be wrong with the rel bookmark, as far I'm lend to believe title works as a hover over allow for additional information to be provided while bookmark defines the permalink. Removing the title tag disables the hover over - at least in Firefox is concerned. –  bybe Mar 29 '13 at 17:01
1  
Seems multiple keywords is allowed at first glance: stackoverflow.com/a/8050088/1892635 –  bybe Mar 29 '13 at 18:19
    
I've just updated with some new code, what you think? –  bybe Mar 29 '13 at 18:32
    
@bybe: Regarding the title attribute: Yes, the tooltip is missing then. But the point is: the tooltip is not needed here, as the same content is already present in the link anchor. The content of the title attribute doesn't give any new information here. For example, for some screenreader users the same content would be read twice. –  unor Mar 30 '13 at 12:45

In my view and experience, blog post schema should be used for posts on a blog. It contains all the properties you may require on a blog posts (albeit, so does article schema).

The more a search engine utilises information provided via Schema, the more relevant your content becomes if it can be correctly identified (is marked up). I'd associate Articles schema with content published by a news or educational organisation and the likes of more official documentation or papers.

This question could also be considered a duplicate with this one.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.