Member-only story
Boost the SEO of Your Websites With Next.js
How to add keywords, meta tags, and more
Stay on the cutting edge of React and TypeScript by following me on Twitter at https://twitter.com/antondevv.
Enjoying Medium? Get full access to Medium by clicking here
Soon your site can be crawled and your SEO made component-ised along with how to choose what pages should not be crawled by using robots.txt
The way next.js works which is also how SSR works is this: all the content on the page, all sections, headlines paragraphs and more is displayed in the source code of the web page, making it accessible for the search engine crawlers.
A short explanation of how that works is when you build your web app for production all the Html pages get generated and later on when you make a request to an Html page it is already pre-rendered as it coming from the server.
But if we make a client-side SPA, the content of the page will not be displayed in the source code. You will see the main element where your content is generated instead.
So how do we do SEO in next.js then?
Next.js have something called next/head which allows us to append elements to the head of the page, so for example title, meta tags as…
