Blog Roll
Markup
HTML
<div itemscope itemtype="https://schema.org/Blog">
<article id="post-<?php the_ID(); ?>" class="Post" itemscope itemtype="http://schema.org/BlogPosting">
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<img src="https://www.fillmurray.com/100/100" srcset="https://www.fillmurray.com/100/100 1x, https://www.fillmurray.com/200/200 2x" alt="header image" />
<meta itemprop="url" content="https://www.fillmurray.com/100/100" />
<meta itemprop="width" content="100" />
<meta itemprop="height" content="100" />
</div>
<header class="PostHeader">
<h2 class="PostTitle" itemprop="headline"><a href="http://objectiv.co" itemprop="url" rel="bookmark">Blog Post Title</a></h2>
<p>
<strong>Publish Date</strong>:
<span itemprop="datePublished">
<time datetime="2017-06-06" pubdate>June 6, 2017</time>
</span>
</p>
<p>
<strong>Author</strong>:
<span itemprop="author">Wes Cole</span>
</p>
</header>
<div itemprop="description">
<p>This would be the "description" or the excerpt of the blog post content.</p>
<a href="http://objectiv.co/" itemprop="url">Read More... <span class="screen-reader-text">Post Title</span></a>
</div>
</article>
</div>
PHP
<?php if( have_posts() ): ?>
<div itemscope itemtype="https://schema.org/Blog">
<?php while( have_posts() ): the_post(); ?>
<article id="post-<?php the_ID(); ?>" class="Post" itemscope itemtype="http://schema.org/BlogPosting">
<?php
if ( has_post_thumbnail() ) {
the_post_thumbnail();
}
?>
<header class="PostHeader">
<?php
the_title( '<h2 class="PostTitle" itemprop="headline"><a href="' . esc_url( get_permalink() ) . '" itemprop="url" rel="bookmark">', '</a></h2>' ); ?>
<p>
<strong><?php esc_html_e( 'Publish Date', 'objectiv' ); ?></strong>:
<span itemprop="datePublished">
<time datetime="<?php echo esc_attr( get_the_time( 'Y-m-d' ) ); ?>" pubdate><?php the_date(); ?></time>
</span>
</p>
<p>
<strong><?php esc_html_e( 'Author', 'objectiv' ); ?></strong>:
<span itemprop="author"><?php the_author_link(); ?></span>
</p>
</header>
<div itemprop="description">
<?php the_excerpt(); ?>
</div>
</article>
<?php endwhile; ?>
</div>
<?php endif; ?>
Twig
<div itemscope itemtype="https://schema.org/Blog">
{% for post in posts %}
{% import '_macros/_img.twig' as m_img %}
<article id="post-{{post.id}}" class="Post" itemscope itemtype="http://schema.org/BlogPosting">
{% if post.thumbnail %}
{% set image = post.thumbnail.id %}
<div itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
{{m_img.responsive(image, {alt: 'post thumbnail', class: 'responsive'})}}
<meta itemprop="url" content="{{post.thumbnail.src}}" />
<meta itemprop="width" content="{{post.thumbnail.width}}" />
<meta itemprop="height" content="{{post.thumbnail.height}}" />
</div>
{% endif %}
<header class="PostHeader">
<h2 class="PostTitle" itemprop="headline"><a href="{{post.link}}" itemprop="url" rel="bookmark">{{post.title}}</a></h2>
<p>
<strong>Publish Date</strong>:
<span itemprop="datePublished">
<time datetime="{{post.date('Y-m-d')}}" pubdate>{{post.date}}</time>
</span>
</p>
<p>
<strong>Author</strong>:
<span itemprop="author">{{post.author}}</span>
</p>
</header>
<div itemprop="description">
{{post.get_preview(200)}}
</div>
</article>
{% endfor %}
</div>