Author Information

Author bylines, bios, and profiles allow you to highlight the talented people creating your content and the experience that makes them fit for sharing the information at hand. Including author information is an industry-standard practice for a reason—people want to know who wrote what they’re reading so they know whether it’s credible or not! And authors want credit for their hard work.

Examples

There are a few different places where you can introduce your author and explain their expertise.

Author byline without a photo

How to make author byline in Setka Editor

Author byline with photo

HTML

<div data-ce-tag="container" data-container-name="Author byline with photo" class="stk-snippets-author-byline-with-photo stk-reset stk-container">
  <figure class="stk-snippets-author-byline-with-photo__photo stk-reset stk-image-figure 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-author-byline-with-photo__content stk-reset stk-container">
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_0"><strong class="stk-reset">Anna Steinmayer</strong></p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_0">Author</p>
  </div>
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

CSS

.stk-snippets-author-byline-with-photo {
  display: flex;
  flex-direction: row;
  margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-author-byline-with-photo__photo {
	margin-right: 20px;
}

.stk-snippets-author-byline-with-photo__photo,
.stk-snippets-author-byline-with-photo__photo .stk-mask,
.stk-snippets-author-byline-with-photo__photo img {
	width: 60px;
	height: 60px;
}

.stk-snippets-author-byline-with-photo .stk-image-figure .stk-mask img {
	object-fit: cover;
	border-radius: 50%;
}

.stk-snippets-author-byline-with-photo__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.stk-snippets-author-byline-with-photo__content > :last-child {
  margin-bottom: 0;
}

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 userpic size in the component CSS.

Author profile

HTML

<div data-ce-tag="container" data-container-name="Author profile" class="stk-snippets-author-profile stk-reset stk-container">
  <figure class="stk-reset stk-image-figure stk-theme_00000__mb_05" data-ce-tag="image-figure" data-stk-css="stksFx5r">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_0"><strong class="stk-reset">Anna Steinmayer</strong></p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05">Author</p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05 stk-theme_00000__color_4507_custom_color_0"><span class="stk-reset">Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful.</span></p>
  <hr class="stk-reset stk-theme_00000__separator_divider_1">
</div>
<p class="stk-reset ce-element--empty stk-element_no-text"></p>

CSS

.stk-snippets-author-profile {
	max-width: 360px;
	margin-bottom: var(--theme-bottom-indent);
}

.stk-snippets-author-profile .stk-image-figure .stk-mask {
	border: 5px solid #d8d8d8;
}

.stk-snippets-author-profile > :last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.stk-snippets-author-profile {
		padding-right: 40vw;
	}
}

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 border width and color in the component CSS

Author bio

12 columns grid HTML

<div class="stk-snippets-author-bio-grids stk-grid stk-grid__layout_reverse" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="9" class="stk-grid-col stk-theme_00000__pad_round_1">
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><strong class="stk-reset">Author</strong></p>
    <h3 class="stk-reset stk-theme_00000__style_medium_header"><strong class="stk-reset">Anna Steinmayer</strong></h3>
    <p class="stk-reset">Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-desktop-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
  <div class="stk-snippets-author-bio-grids__col_photo stk-grid-col stk-grid-col_last stk-theme_00000__pad_hor_1" data-ce-tag="grid-col" data-col-width="3">
    <figure class="stk-snippets-author-bio-grids__photo stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <p class="stk-reset stk-theme_00000__style_small_text stk-mobile-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
</div>

10 columns grid HTML

<div class="stk-snippets-author-bio-grids stk-grid stk-grid__layout_reverse" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="7" class="stk-grid-col stk-theme_00000__pad_round_1">
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><strong class="stk-reset">Author</strong></p>
    <h3 class="stk-reset stk-theme_00000__style_medium_header"><strong class="stk-reset">Anna Steinmayer</strong></h3>
    <p class="stk-reset">Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful.</p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-desktop-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
  <div class="stk-snippets-author-bio-grids__col_photo stk-grid-col stk-grid-col_last stk-theme_00000__pad_hor_1" data-ce-tag="grid-col" data-col-width="3">
    <figure class="stk-snippets-author-bio-grids__photo stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <p class="stk-reset stk-theme_00000__style_small_text stk-mobile-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
</div>

6 columns grid HTML

<div class="stk-snippets-author-bio-grids stk-grid stk-grid__layout_reverse" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="4" class="stk-grid-col stk-theme_00000__pad_round_1">
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><strong class="stk-reset">Author</strong></p>
    <h3 class="stk-reset stk-theme_00000__style_medium_header"><strong class="stk-reset">Anna Steinmayer</strong></h3>
    <p class="stk-reset">Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful.</p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-desktop-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
  <div class="stk-snippets-author-bio-grids__col_photo stk-grid-col stk-grid-col_last stk-theme_00000__pad_hor_1" data-ce-tag="grid-col" data-col-width="2">
    <figure class="stk-snippets-author-bio-grids__photo stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <p class="stk-reset stk-theme_00000__style_small_text stk-mobile-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
</div>

4 columns grid HTML

<div class="stk-snippets-author-bio-grids stk-grid stk-grid__layout_reverse" data-ce-tag="grid">
  <div data-ce-tag="grid-col" data-col-width="3" class="stk-grid-col stk-theme_00000__pad_round_1">
    <p class="stk-reset stk-theme_00000__style_small_text stk-theme_00000__mb_05"><strong class="stk-reset">Author</strong></p>
    <h3 class="stk-reset stk-theme_00000__style_medium_header"><strong class="stk-reset">Anna Steinmayer</strong></h3>
    <p class="stk-reset">Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful. Anna is part of the Customer Experience team at Setka. She has years of experience helping teams be more productive and successful.</p>
    <p class="stk-reset stk-theme_00000__style_small_text stk-desktop-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
  <div class="stk-snippets-author-bio-grids__col_photo stk-grid-col stk-grid-col_last stk-theme_00000__pad_hor_1" data-ce-tag="grid-col" data-col-width="1">
    <figure class="stk-snippets-author-bio-grids__photo stk-reset stk-image-figure" data-ce-tag="image-figure">
      <div data-ce-tag="mask" class="stk-mask"></div>
    </figure>
    <p class="stk-reset stk-theme_00000__style_small_text stk-mobile-hidden"><strong class="stk-reset">Follow Anna on</strong> <a href="https://example.com" target="_blank" class="stk-reset">Facebook</a>, <a href="https://example.com" target="_blank" class="stk-reset">Instagram</a> and <a href="https://example.com" target="_blank" class="stk-reset">LinkedIn</a></p>
  </div>
</div>

CSS

.stk-snippets-author-bio-grids {
	margin-top: 60px;
	background: #f1f1f1;
}

.stk-snippets-author-bio-grids__photo {
	margin-top: -60px;
}

@media (min-width: 769px) {
	.stk-grid-col.stk-snippets-author-bio-grids__col_photo {
		padding-left: 0;
	}
}

@media (max-width: 768px) {
	.stk-snippets-author-bio-grids {
		margin-top: 100px;
	}

	.stk-snippets-author-bio-grids__photo {
		margin-top: -100px;
	}
}

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 background color and photo margins in the component CSS.

Content Experience Impact

Not only does showing off your authors well demonstrate your appreciation for them—or show off the expertise of your team if the authors are internal—it could also help the reader trust the content more, and possibly even improve your search rankings over time.

According to Chris Gunnars of Search Facts, “When people land on a page through a search engine, they make a split-second decision about whether that page looks trustworthy. If the page has a great byline then people are more likely to stick around and consume the content.” This is especially important if you’re working with an author who is well known among your audience, explains NN/g.

Dos

• Share any credentials or experience that establish credibility in the byline.

• Link to a landing page with more about the author and all of their writing for your site in case people want to learn more about them.

• Consider if your author information needs to be styled differently or moved around on mobile to avoid it getting in the way of the content.

Dont's

• Don’t have a complicated author bio at the top of your article, that prevents people from getting to your content ASAP. Keep the byline simple, and then add a block with more information in the sidebar or at the bottom, if you’d like.

• Don’t highlight the author too much if they have no relevant expertise. In those cases, it would perhaps be better to have them be a ghostwriter and put the article under a byline such as “[Your Company’s Name] Team,” since they are likely pulling from your internal expertise anyways.

Learn More

About the Author: How to Write a Quality Author Bio Hubspot

Read This, Then Follow Me: How To Make Your Byline A Marketing Goldmine Fast Company

How To Write An Author Bio: 7 High-Converting Byline Examples Turning Readers Into Leads Conversion Sciences

What Makes Web Sites Credible? A Report on a Large Quantitative Study Persuasive Technology Lab, Stanford University

Extra Inspiration