Blog Post

A semantic recommendation for marking up an blog post.

The blog post component is meant to serve as an HTML guidance map for you when you’re creating blog posts in a CMS. All the elements you need that have related schema markup are listed in the example. While you probably won’t need them all, everything you do need should be in there. When modifying this component you should feel free to use any HTML that fits the structure and hierarchy of your project, while maintaining any of the schema-related HTML attributes (itemscope, itemtype, itemprop, etc.).

Examples

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

  <!-- flag this as the main area of the page -->
  <div itemprop="mainEntityOfPage">

    <!-- articles get headers (and footers) -->
    <header>

      <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img src="https://placekitten.com/g/400/150" alt="placeholder image" />
        <meta itemprop="url" content="https://placekitten.com/g/400/150" />
        <meta itemprop="width" content="400" />
        <meta itemprop="height" content="150" />
      </div><!--/itemprop=image-->

      <!-- Name of the article -->
      <h1 itemprop="headline">Title of this Article!</h1>

      <!--Author-->
      <p><strong>Author</strong>:
        <span itemprop="author">Jane Doe</span>
      </p>

      <!-- publication date -->
      <p><strong>Publish Date</strong>:
      <span itemprop="datePublished">
        <time datetime="2016-05-01">May 1, 2016</time>
      </span>
      </p>

      <!-- Modified date (this is recommended to have, even if it's the same as publication date)-->
      <p><strong>Last Modified Date</strong>:
      <span itemprop="dateModified">
        <time datetime="2016-05-01">May 1, 2016</time>
      </span>
      </p>

    </header>

    <!-- Publisher are required, weird, but true (this code block doesn't output anything) -->
    <div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
      <div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
        <meta itemprop="url" content="https://placekitten.com/g/100/100" />
        <meta itemprop="width" content="100" />
        <meta itemprop="height" content="100" />
      </div>
      <meta itemprop="name" content="Jane Corp" />
    </div><!--/.itemprop=publisher-->

    <!-- category -->
    <p><strong>Category</strong>:
      <span itemprop="articleSection">[the category]</span>
    </p>

    <!-- tags -->
    <p><strong>Tags</strong>:
      <span itemprop="keywords">This, Is, A, List, of, Tags, or, Keywords</span>
    </p>

    <!-- Main body of the article -->
    <div itemprop="articleBody">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer non justo vestibulum, posuere libero quis, ornare est. Vestibulum vehicula sed justo id condimentum. Fusce lacinia eleifend felis ac tempus. Vestibulum pellentesque et lorem ut tincidunt. Nullam at semper erat, nec molestie augue. Nunc metus augue, luctus condimentum orci eget, consequat rutrum massa.</p>
      <p>In rhoncus facilisis feugiat. Maecenas facilisis diam nec ex ullamcorper, eu placerat nisi mattis. Nulla aliquet dapibus ante, id consequat nisi placerat et. Aliquam tincidunt scelerisque orci, id consectetur quam. Donec vehicula faucibus tempor. Aliquam tempus tincidunt egestas.</p>

    </div><!--/itemprop=articleBody-->

    <footer>
      <!-- a link to where the comment are with a comment count-->
      <p>
        <strong>Link to Comments</strong>:
        <a href="#comments" itemprop="discussionUrl">Comments (<span itemprop="commentCount">5</span>)</a>
      </p>
    </footer>

  </div><!--/itemprop=mainEntityOfPage-->
</article><!--/itemtype=BlogPosting-->

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?> itemscope itemtype="https://schema.org/BlogPosting">

  <!-- flag this as the main area of the page -->
  <div itemprop="mainEntityOfPage">

    <!-- articles get headers (and footers) -->
    <header>

    <?php if ( has_post_thumbnail() ) : ?>

      <?php
        $meta  = wp_get_attachment_metadata( get_post_thumbnail_id( get_the_ID() ) );
        $width  = $meta['width'];
        $height  = $meta['height'];
      ?>
      <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <?php the_post_thumbnail(); ?>
        <meta itemprop="url" content="<?php echo esc_url( the_post_thumbnail_url() ); ?>" />
        <meta itemprop="width" content="<?php echo esc_attr( $width ); ?>" />
        <meta itemprop="height" content="<?php echo esc_attr( $height ); ?>" />
      </div><!--/itemprop=image-->

    <?php endif; ?>

      <!-- Name of the article -->
      <h1 itemprop="headline"><?php the_title(); ?></h1>

      <!--Author-->
      <p>
        <strong><?php esc_html_e( 'Author', 'tenup' ); ?></strong>:
        <span itemprop="author"><?php the_author_link(); ?></span>
      </p>

      <!-- publication date -->
      <p>
        <strong><?php esc_html_e( 'Publish Date', 'tenup' ); ?></strong>:
        <span itemprop="datePublished">
          <time datetime="<?php echo esc_attr( get_the_time( 'Y-m-d' ) ); ?>" pubdate>
            <?php the_date(); ?>
          </time>
        </span>
      </p>

      <!-- Modified date (this is recommended to have, even if it's the same as publication date)-->
      <p>
        <strong><?php esc_html_e( 'Last Modified Date', 'tenup' ); ?></strong>:
        <span itemprop="dateModified">
          <time datetime="<?php echo esc_attr( get_the_modified_time( 'Y-m-d' ) ); ?>" pubdate>
            <?php the_modified_date(); ?>
          </time>
        </span>
      </p>

    </header>

    <!-- Publisher are required, weird, but true (this code block doesn't output anything) -->
    <div itemprop="publisher" itemscope="itemscope" itemtype="https://schema.org/Organization">
      <div itemprop="logo" itemscope="itemscope" itemtype="https://schema.org/ImageObject">
        <meta itemprop="url" content="https://placekitten.com/g/100/100" />
        <meta itemprop="width" content="100" />
        <meta itemprop="height" content="100" />
      </div>
      <meta itemprop="name" content="<?php esc_attr_e( 'Client Company', 'tenup' ); ?>" />
    </div><!--/.itemprop=publisher-->

    <!-- category -->
    <p>
      <strong><?php esc_html_e( 'Category', 'tenup' ); ?></strong>:
      <span itemprop="articleSection"><?php the_category( ', ' ); ?></span>
    </p>

    <!-- tags -->
    <p>
      <strong><?php esc_html_e( 'Tags', 'tenup' ); ?></strong>:
      <span itemprop="keywords"><?php the_tags(); ?></span>
    </p>

    <!-- Main body of the article -->
    <div itemprop="articleBody">
      <?php the_content(); ?>
    </div><!--/itemprop=articleBody-->

    <footer>
      <!-- a link to where the comment are with a comment count-->
      <p>
        <strong><?php esc_html_e( 'Link to Comments', 'tenup' ); ?></strong>:
        <a href="#comments" itemprop="discussionUrl">
          <?php esc_html_e( 'Comments', 'tenup' ); ?> (<span itemprop="commentCount"><?php comments_number(); ?></span>)
        </a>
      </p>
    </footer>

  </div><!--/itemprop=mainEntityOfPage-->
</article><!--/itemtype=BlogPosting-->

Blog Post

Examples

Usage

Resources