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