In this article, we will learn SEO in Next.js. Also, I will walk you through about the best SEO practices in Next.js. Let’s dive into the tutorial.
Here are the ways to optimise your Next JS app SEO,
1. Adding Descriptive text on the Link Tag
You must add warning text to the Link tag because it is just descriptive text on the link tag. It gives a better PageInsight score. And that’s how you can add warning text inside the link tag.
<Link> href={`/devpost/${blogitem.slug}`} aria-label={`Read blog post: ${blogitem.title}`}></Link>You can also add static text, but now let’s add a dynamic descriptive text, which will be the title of an article.
2. Add a descriptive Tag to the Button
The clickable button warning text is similar to the previous one. You need to add an aria-label for descriptive text; it will increase the PageInsight SEO score.
<button className={styles.btn} aria-label="Read Full Article">Read More</button> That’s how you could add descriptive text for the clickable button. If you’re not using the button, you can add it to the link tag.
These two things don’t directly affect the SEO ranking algorithm, but it does affect the PageInsight SEO score on the search console.
3. Add a meta tag to the Head
Search engines read your meta title and meta description, so you must add these tags in the head tag. Also, Google stated that meta tag keywords are no longer a ranking factor for a blog post because of keyword stuffing. The meta titles and descriptions became important for search engines.
<title>{`${blog && blog.title} - MyFinanceTech`}</title>
<meta name="description" content={blog && blog.metadesc} />
<meta name="keywords" content="HTML, CSS, Web devlopment" />I have mentioned how you can add important meta tags. Here are the meta tags for mobile responsiveness,
<meta name="viewport" content="width=device-width, initial-scale=1" />For English Language, this is the meta tag we use.
<html lang="en">4. Add Priority mode While Using the Next Image,
Image optimisation is better for search engines, but if you’re using the next image, you must add priority in the image tag because it increases the PageInsight speed. This is how you can add priority to faster image loading.
<Image
src="me.png"
alt="Picture of the author"
width={500}
height={500}
priority
/>5. Use Server Side Rendering for Dynamic Data Fetching
It was a day when a search engine was only used to rank server-side rendering pages. Now, you could use the static site generation, which is good for SEO, but server-side rendering is slightly better for search engines.
export async function getServerSideProps() {
const res = await fetch('https://api.github.com/repos/vercel/next.js')
const repo = await res.json()
return { props: { repo } }
}
export default function Page({ repo }) {
return (
<main>
<p>{repo.stargazers_count}</p>
</main>
)
}Server-side rendering is a bit slow compared to static site generation. In static site generation, the page reload time matters for ranking factors, so SSG is good for page speed with pre-rendered HTML.
Also, the prerendered HTML is good for search engines, but it is generated at build time, whereas SSR generates it for each request. So the server-side rendering is better for search engines, but it's an optimisation.
