The hero section is the first thing that users see when they land on your blog post, and is an important part of the page because it determines whether users will continue to read or just bounce.
It provides a brief overview of the content and the key points of the blog post. And it sets the tone and the style of the blog post, and it can help to make the blog post more engaging, interesting, and appealing.
We've sprinkled in the necessary microdata to provide additional information about the content of your blog post to search engines, and this can help to improve the SEO and the search engine visibility of your blog post.
You don't have to do any additional work, we just take the props you pass like title and make sure to render the microdata properly.
You don't have to pass in anything other than a title. The UI will gracefully degrade without a cover image or author, etc. See the prop table below for more.
| Name | Type | Default | Description |
title | String | Component | — | The title of your blog post. |
publishDate | String | — | Publish or last updated date. We don't make any assumptions about how it will come through so you may need to format it using something like DayJS. |
heroImage | String | — | The cover photo / art for your post. |
heroImageAlt | String | Article hero image | Alt text for your cover image. Not required but encouraged for SEO purposes and accessibility. It is another good place to add relevant keywords. |
authorName | String | — | Inclusion is recommended since authorship helps with EAT (Expertise, Authoritativeness, and Trustworthiness) in Google's eyes |
authorAvatarUrl | String | — | Image for your author |
authorHref | String | — | Use this prop to link to your author bio page if one exists. |