Let’s face it, you have worked really hard to get your next js blog or website to where it is now. However, you feel that there is something missing, well, that something which may be missing is google rich results.
We have a simple guide on how to set up your next js application to be compatible with google rich results. We have separated this article into two parts, the how to and some tips on how to get you up and running. Without further ado, let’s get started!
The first step to having a next js rich results compatible website is knowing where to add the rich results.
The BEST place to add the rich results is on the actual article content. Please do not be tempted to add the next js rich results to your homepage. It is not feasible, since if you think about it, it does not make much sense.
So, without affecting your next js seo, you can simply add the google rich results that you want by taking advantage the head section of a next js page. So, you will do it like so:
<Head>
{/* Some other code may come here */}
<script type="application/ld+json" dangerouslySetInnerHTML={{__html: `
{
"@context": "https://schema.org",
"@type": "NewsArticle",
"headline": "${yourArticleTitle}",
"image": [ "image one url", "image two url", "image three url" ],
"datePublished": "${yourArticlePublishedOn}",
"dateModified": "${yourArticleUpdatedOn}"
}
`}}>
</script>
{/* Some other code may come here as well */}
</Head>This is basically all you need.
It is best to understand the above code:
type="application/ld+json"
You will need to specify that the content in the script tags is of this type. The ld+json is an elegant way to easily encode linked data by using json.
dangerouslySetInnerHTML
It sounds scary, but we need to find a way to add the text into our jsx script tags, and this is just how we will do it.
@context
This is the context to use, in this case we use https://schema.org
@type
This is the type of our rich result, and in this case we use NewsArticle. There are lot’s of @type options, so feel free to try out with the option which best suits your needs.
headline
This is the headline that will appear for this rich text, we have it as the article title.
image
This is an array of images to use. The IMPORTANT thing to remember is that the images provided should be served from the same scheme as the one your website is hosted.
An example: If your website is hosted on https so your images should also be served from https. Otherwise, you will get the infamous different schemes errors and your google rich results may not be rendered correctly.
datePublished
This is simply the date your article was published. It should be in a compatible ISO date format.
dateModified
This is when your article was last updated. It should also be compatible with ISO date format. This can have the same value as that of the datePublished, depending on how you handle your article updates.
That basically sums it all up. Next thing is to simply update your website and voila!
As a parting gift, here are some free tips:
Moreover, it is important to note that despite now having next js rich results set, that is not a one time solution to solving any next js seo issues on your site.
With next js rich results, all you are doing is enhancing how the content on your page will be perceived, this may improve your seo ranking, BUT I insist again, it will not improve any next js seo issues present on your website.
This simply guide has given you a way to add google rich results to your next js application.
Well, that is it for now.