Blogroll

A semantic recommendation for marking up an blogroll/article listing.

The Blogroll component is using the “BlogPosting” schema. 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

Usage

<div itemscope itemtype="https://schema.org/Blog">

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

    <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
        <img src="https://placehold.it/100x100" alt="header image" />
        <meta itemprop="url" content="https://placehold.it/100x100 />
        <meta itemprop="width" content="100" />
        <meta itemprop="height" content="100" />
    </div><!--/itemprop=image-->

    <header>

      <!-- Name of the article -->
      <h2 itemprop="headline">
        <a href="http://www.example.com/" itemprop="mainEntityOfPage">Blogroll Post Title</a>
      </h2>

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

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

    </header>

    <!-- A description of the post content - the excerpt -->
    <div itemprop="description">
      <p>This would be the "description" or the excerpt of the blog post content.</p>
      <a href="http://www.example.com/" itemprop="mainEntityOfPage">Read More... <span class="screen-reader-text">Post Title</span></a>
    </div><!--/itemprop=description-->

  </article><!--/itemtype=BlogPosting-->

  <!--
    Add more blogroll items here
  -->

</div><!--/itemtype=Blog-->

          
<div itemscope itemtype="https://schema.org/Blog">

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

    <?php
    /*
     * Customize w/ get_the_post_thumbnail() to add schema
     * @link https://developer.wordpress.org/reference/functions/get_the_post_thumbnail
     */
    if ( has_post_thumbnail() ) {
      the_post_thumbnail();
    } ?>

    <header class="entry-header">

      <!-- Name of the article -->
      <?php
      the_title( '<h2 class="entry-title" itemprop="headline"><a href="' . esc_url( get_permalink() ) . '" itemprop="mainEntityOfPage" rel="bookmark">', '</a></h2>' );
      ?>

      <!-- 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>

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

    </header>

    <!-- A description of the post content - the excerpt -->
    <div itemprop="description">
      <?php
      /**
       * Customize the Read More link by using the "excerpt_more" filter
       *
       * @link https://developer.wordpress.org/reference/functions/the_excerpt/
       * @link https://codex.wordpress.org/Customizing_the_Read_More
       */

      the_excerpt();
      ?>
    </div><!--/itemprop=description-->

  </article><!--/itemtype=BlogPosting-->

  <!--
    Add more blogroll items here
  -->

</div><!--/itemtype=Blog-->

Resources