Summary

The provided content outlines a method for enhancing SEO on websites built with Next.js through the strategic use of meta tags, keywords, and a robots.txt file.

Abstract

The article discusses the importance of SEO in Next.js applications, detailing how to implement meta tags and keywords using the next/head component. It emphasizes the benefits of server-side rendering (SSR) in making website content accessible to search engine crawlers. The author suggests creating a reusable Meta component to streamline the process of adding meta information across pages. Additionally, the article covers the use of semantic HTML, alt attributes for images, and language attributes for better SEO. It also guides readers on generating a robots.txt file to control crawler access and creating a sitemap with the sitemap npm package to specify important routes for web crawlers. The article concludes with the author sharing their positive experience with these techniques, achieving a 100% SEO audit score for a client's Next.js application.

Opinions

The author advocates for the use of Next.js' SSR capabilities to improve SEO by ensuring content is displayed in the source code for crawlers.
Creating a reusable Meta component is recommended for efficiency and consistency in adding meta tags and keywords across different pages.
The importance of semantic HTML and accessibility features like alt attributes is highlighted as a best practice for SEO.
The author suggests using Google Chrome's Lighthouse tool to audit and improve website SEO scores.
The use of robots.txt and a sitemap is presented as essential for controlling which pages are crawled and indexed by search engines.
The author expresses satisfaction with the SEO results achieved using these methods, indicating their effectiveness in a real-world scenario.

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 keywords etc. That is a very nice thing as it means we can make out web app SEO friendly especially when all the content is displayed in the source code.

next/head

To use this import Head from 'next/head' to any page.

And in example index.js inside the return() we can add the <Head>

Inside it, we can add <title> <meta> etc, it would look like this:

But we do not wanna import Head on every page and do this. So let’s make a component instead. In the components folder create Meta.js and add this:

Now we can use this component in any of our files and pass the props we want to it! Nice right! We can also set defaultProps if we want, I added some.

Of course, all of our components and pages should be semantic html elements and images have the alt=”” keyword, etc. This was specifically for next.js on how we can improve SEO by adding keywords and other meta tags for our pages, but we need to think about those things when we build out our applications. The lang=”” is by default set to English so we do not have to make any changes to that if our site is in English.

Also when you working on your web app you can make an audit in Google Chrome by going to the console and clicking on Lighthouse and generate. That will tell you the scores for your website and the SEO. I did this previously with next.js for a client and the audit showed 100% for the SEO. It can also tell you if you have missed something that can make the SEO better.

Last but not least how can we choose what pages should not be crawled by the search engines? Imagine we have an account page, we would probably not want the search engines to crawl that.

First, create a file named robots.txt in your public folder.

Inside that folder add this code:

Next, you need to install npm install sitemap

Create a file named site-map.js in /api.

Add this code to that file:

Now if you go to url/api/site-map, you will see an XML file specifying to the web crawlers what it should crawl, what’s important, etc. We specified our root route to have the highest priority, and we can add all of our routes we want to be crawled, we can also specify dynamic routes as block posts, etc, but that is fairly complex so you can read more about it here: https://www.npmjs.com/package/sitemap

This was pretty much how i do my seo in next, hope it helps you out some!