Working with SEO in NextJS

SEO

SEO stands for Search Engine Optimization. The goal of SEO is to create a strategy that will increase your rankings position in search engine results. The higher the ranking, the more organic traffic to your site, which ultimately leads to more business for you!

There are specific SEO metrics that might not in our Control while developing our website.

Some Metrtics are,

Domain authority
Page Impressions
CTR ( Click Through Rate )

But we should do our best to improve during the development process like

Routing Structure
Adding SEO meta tags / datas within head tag in html
Proper sitemap.xml file for bots to Crawl
Image Optimization
Using HTML Semantic Tags

Proper Routing Structure

It is essential for search engine bots to index a website correctly. URLs should always be human readable. We should use a URL structure to help the user identify the page content by just looking at the page URL.

Lets take a look on this page’s URL https://codejagd.com/working-with-seo-in-nextjs.

Adding Meta Tags

This is essential meta datas that we should always add inside our head tags.You can visit here for more details

Sitemap

A Sitemap is always essential one for any website. An XML sitemap is a file that lists a website’s important pages, making sure Google can find and crawl them all.

Image Optimization

The built-in image component has been developed to give better support for images.

	import Image from 'next/image'

const myLoader = ({ src, width, quality }) => {
  return `https://example.com/${src}?w=${width}&q=${quality || 75}`
}

const MyImage = (props) => {
  return (
    <Image
      loader={myLoader}
      src="me.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

Nextjs Image Component

Using Semantic Tags

Semantic HTML refers to syntax that makes the HTML more comprehensible by better defining the different sections and layout of web pages.

Article about HTML Semantics

Dealing with performance

Google Core Web Vitals are measurable SEO performance metrics that give you a sense of how people experience your website. They provide you with specific, measurable data points to improve the overall user experience on your website. When users have a better experience, they’re more likely to return.

LCP: Largest Contentful Paint
FID: First Input Delay
CLS: Cumulative Layout Shift

Web.dev vReference Link