author card

A semantic recommendation for marking up an author card.

The author bio component is a dual-purpose component in that it provides a common layout for authoring information within a blog post or article and it also gives us a specialized schema markup pattern so the content is more machine-readable. 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

<!-- Scoping this inside "creative work" so we can use the author schema, which feels better -->
<section itemscope itemtype="https://schema.org/CreativeWork">
  <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
    <div class="author-card-pic">
      <img itemprop="image" alt="placeholder image">
    </div> <!-- /.author-card-pic -->
    <div class="author-card-info">
      <h2 class="author-card-author">
        <a rel="author" href="#!" itemprop="url">
          <span itemprop="name">Author Name</span>
        </a>
      </h2>
      <div class="author-card-bio" itemprop="description">
        <p>Lorem ipsum dolor sit amet.</p>
      </div> <!-- /.author-card-bio -->
    </div> <!-- /.author-card-info -->
  </div> <!-- /.author-card -->
</section><!--/itemtype=CreativeWork-->

					
<!-- Scoping this inside "creative work" so we can use the author schema, which feels better-->
<section itemscope itemtype="https://schema.org/CreativeWork">
  <div class="author-card" itemprop="author" itemscope itemtype="https://schema.org/Person">
    <?php
      $author_id = get_the_author_meta( 'ID' );
      $avatar_url_sm = get_avatar_url( $author_id, array( 'size' => 96 ) );
      $avatar_url_lrg = get_avatar_url( $author_id, array( 'size' => 192 ) );
    ?>
    <?php if ( $avatar_url_sm ) : ?>
    <div class="author-card-pic">
      <img
        itemprop="image"
        src="<?php echo esc_url( $avatar_url_sm ); ?>"
        alt="Image of <?php echo esc_attr( get_the_author_meta( 'display_name' ) ); ?>" />
    </div> <!-- /.author-card-pic -->
    <?php endif; ?>

    <div class="author-card-info">
      <h2 class="author-card-author">
        <a rel="author" href="<?php echo esc_url( get_author_posts_url( $author_id ) ); ?>" itemprop="url">
          <span itemprop="name">
            <?php echo esc_html( get_the_author_meta( 'display_name' ) ); ?>
          </span>
        </a>
      </h2>
      <?php if ( get_the_author_meta( 'description' ) ) : ?>
      <div class="author-card-bio" itemprop="description">
        <p><?php echo esc_html( get_the_author_meta( 'description' ) ); ?></p>
      </div> <!-- /.author-card-bio -->
      <?php endif; ?>
    </div> <!-- /.author-card-info -->
  </div> <!-- /.author-card -->
</section><!--/itemtype=CreativeWork-->

					
.author-card {
  display: flex;
}

.author-card-info {
  margin-left: 1em;
}

.author-card-author {
  margin: 0 0 .5em;
}

Resources