ccsunny
1 What Is SEO – Search Engine Optimization?
SEO stands for “search engine optimization.” In simple terms, SEO means the process of improving your website to increase its visibility in Google, Microsoft Bing, and other search engines whenever people search for:
Products you sell.
Services you provide.
Information on topics in which you have deep expertise and/or experience.
Next SEO and Next.js
Next.js has static site generation (SSG) support, which delivers better SEO capability than client-side rendering. It also has an in-built head component to manage SEO meta information like title, description, canonical, and Open Graph tags.
We can use a package called next-seo. Next SEO makes managing SEO easier in your Next.js projects.
pnpm add next-seo
Adding Next SEO to a page
//home.js
import { NextSeo } from 'next-seo';
const Home = () => (
<>
<NextSeo
title="Home Page Title"
description="Home page description of the page"
/>
<p>Simple Usage</p>
</>
);
export default Home;
Default SEO
To add default properties to all of our pages, we can use the DefaultSeo component, instead of manually adding the properties individually to each page. We can also override any property on a page, if needed.
Add the DefaultSeo component to _app.js and add the following code:
//_app.js
import '../styles/globals.css'
import {DefaultSeo} from 'next-seo';
function MyApp({Component, pageProps}) {
return (
<>
<DefaultSeo
title="Next SEO Example"
description="Next SEO is a plug in that makes managing your SEO easier in Next.js projects."
openGraph={{
type: 'website',
locale: 'en_IE',
url: 'https://www.url.ie/',
siteName: 'SiteName',
}}
twitter={{
handle: '@handle',
site: '@site',
cardType: 'summary_large_image',
}}
/>
<Component {...pageProps} />
</>
)
}
export default MyApp
Now we add SEO properties to all page cause we add it on _app.js
How to override default SEO properties?
As we add SEO to _app.js works on all page, but we may need some custom logic for different pages like title and meta, We can accomplish this goal by using NextSeo in pages
//blog.js
import {NextSeo} from 'next-seo';
const Blog = () => (
<>
<NextSeo
title="Manage SEO in NextJS with Next SEO"
description="Next SEO packages simplifies the SEO management in Next Apps with less configurations"
canonical="www.example.com/next-seo-blog"
openGraph={{
type: 'article',
article: {
publishedTime: '2022-06-21T23:04:13Z',
modifiedTime: '2022-01-21T18:04:43Z',
authors: [
'https://www.example.com/authors/@firstnameA-lastnameA',
'https://www.example.com/authors/@firstnameB-lastnameB',
],
tags: ['Tag A', 'Tag B', 'Tag C'],
},
url: 'www.example.com/next-seo-blog',
images: {
url: 'https://www.test.ie/images/cover.jpg',
width: 850,
height: 650,
alt: 'Photo of text',
},
site_name: 'Next Blog'
}}
/>
<p>Manage SEO in NextJS with Next SEO - Blog</p>
</>
);
export default Blog;
Here, we have overridden the title, description, and other properties. You can also see a few new properties specifically related to our blog posts:
publishedTime: Blog published date
modifiedTime: Blog updated date
tags: Tags associated with the blog post
authors : Author of the blog
