Ads by ProfitSence
Close

Working with SEO in NextJS

Last Updated on Wednesday 5th Oct 2022

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