On-page SEO is the first step for your web pages to be ranked and found on search engines. In this article, I'll walk you through five easy strategies following which you can greatly improve the on-page SEO of your web pages built with Next.js. Let's get started!
Optimize page URL
A page URL is the first place where on-page SEO starts. When creating a route in Next.js, make sure the route name is meaningful, readable, and includes a relevant keyword whenever possible. This helps the users and the search engine crawlers have a glimpse of what the page is about.
Add page metadata
Following the URL optimization comes the metadata. Metadata helps search engines understand what a page is about and index it accordingly. For optimal SEO performance and for web pages to be ranked and found on search engines, it is crucial that the pages have proper metadata.
For a step-by-step guide on adding metadata in a Next.js application, refer to my article: Add metadata in a Next.js application built with the pages router.
Optimize ‘h1’ heading
The title, particularly the h1 heading, holds substantial SEO value. Optimize the h1 heading by including the same keyword used in the page URL. If you have a description with the title, consider including the keyword there as well.
Optimize images
Image search is very powerful and popular these days. Properly optimized images can bring a lot of traffic to your web page. We can take this advantage by optimizing the images in two primary ways:
Optimize URL
Similar to the page URL, optimize an image URL by making it meaningful, and readable, and including a relevant keyword whenever possible.
Optimize ‘alt’ attribute
Another effective strategy to optimize images for SEO is to use proper alt attributes. Use an alt attribute that describes what's in the image and whenever possible, include a relevant keyword in it.
Use semantic ‘HTML’
Instead of using div, use semantic HTML elements to create the layout of a web page. Also, aim for a well-structured web page that looks like the following:
<html>
<head></head>
<body>
<header>
<nav></nav>
</header>
<main>
<section></section>
</main>
<footer></footer>
</body>
</html>
That's it! By implementing these five strategies, you can substantially improve a web page's SEO performance and achieve an SEO rating of 100 in PageSpeed Insights analysis. Consequently, it will help rank your page higher in the search results.
I hope you've learned a thing or two from this article. Feel free to share the content with others who might also find it useful. Cheers!