Related Links

Related links are a great way to keep readers engaged with your publication by directing them to other articles on your site that are similar to the topic at hand or would provide deeper information if they want to dig in.

Examples

Related link on the side

How to make related link on the side

Full-width block with vertical borders

4 columns grid HTML

<!--Related Links (grids, 4 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Read also</h3>
<div class="stk-grid" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
</div>

6 columns grid HTML

<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Read also</h3>
<div class="stk-grid" data-ce-tag="grid">
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="2" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
</div>

10 columns grid HTML

<!--Related Links (grids, 10 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Read also</h3>
<div class="stk-grid" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="3" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
</div>

12 columns grid HTML

<!--Related Links (grids, 12 cols)-->
<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Read also</h3>
<div class="stk-grid" data-ce-tag="grid">
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
  <div data-col-width="4" class="stk-grid-col stk-grid-col_last" data-ce-tag="grid-col">
    <div class="stk-snippets-related-links__card stk-container" data-ce-tag="container" data-container-name="Card">
      <figure class="stk-reset stk-image-figure stk-snippets-related-links__photo stk-theme_00000__mb_0" data-ce-tag="image-figure">
        <div data-ce-tag="mask" class="stk-mask"></div>
      </figure>
      <div data-ce-tag="container" data-container-name="Content" class="stk-snippets-related-links__content stk-container">
        <h4 class="stk-reset stk-theme_00000__style_small_header"><a class="stk-reset" href="https://example.com/">Integrating Animation for the Ultimate Content Engagement</a></h4>
      </div>
    </div>
  </div>
</div>

CSS

.stk-snippets-related-links__card > :last-child,
.stk-snippets-related-links__content > :last-child {
  margin-bottom: 0;
}

.stk-snippets-related-links__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: linear-gradient(to right, black 1px, transparent 1px);
}

.stk-snippets-related-links__photo,
.stk-snippets-related-links__photo .stk-mask,
.stk-snippets-related-links__photo img {
  width: 100%;
  height: 150px; /* image height */
}

.stk-snippets-related-links__photo img {
  object-fit: cover;
}

.stk-snippets-related-links__content {
  padding: 30px;
}

Select the code component with the same number of columns as in the grid system of your post.

Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.

You can also adjust vertical border style in the component CSS.

Content Experience Impact

When using content marketing as a sales strategy for your company, it’s rarely possible to turn a new reader directly into a customer. Instead, you have to build a relationship over time that regularly demonstrates your expertise and trustworthiness. Including related links in the sidebar or towards the bottom of your article page can be a great way to up engagement, encourage further exploration on your site, and continue building a trusting relationship with a reader. As a bonus, these links often reduce bounce rate and improve site SEO.

Dos

• Make sure your linked text contains relevant keywords related to what the link is about, which helps the user understand what they’re clicking on and helps with your SEO.

• Get creative with the design to make sure your related links won’t be missed! Use a background to help it stand out, include images or buttons to make it more eye-catching, or even include a sample of the content to pique the reader’s interest.

• Include related links right at the bottom of the article (without anything except maybe a CTA between), but also experiment with including them throughout the article. Is there a piece you’ve written that digs deeper on a topic mentioned in a particular paragraph? Put a related link right underneath that, or in the sidebar next to it.

Don'ts

• Don’t design your related links so they look like ads or place them right next to banner ads in your designs—if you do, users are likely to just scan over them.

• Don’t just link to random articles on your site—think of what content is most relevant or interesting to someone after reading the particular article you’re adding links to.

Learn More

Related Content Boosts Pageviews, When Done Right Nielsen Norman Group

The Seven Commandments of Internal Linking that Will Improve Content Marketing SEO Neil Patel

Extra Inspiration