How to optimize SEO with Next.js and get Ranked by Google
Hello Guys, hallo Girls! In this article, I will show you how to improve your SEO, and page ranking with an app or website built with Next.js. I will share some Next.js SEO best practices. Have fun while reading, this is my first blog here so enjoy it.
What is Next.js ?
According to the official documentation, Next.js is a React Framework that gives you the best developer experience with all the features you need for production: hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. No config needed. (See Next.js documentation)
In terms of web development and React ecosystems, a developer responsible for building applications and website is always in search of the best framework, and library to improve their products and most certainly for SEO. Next.js is one of the best frameworks to make this task easier.
What is SEO and why does it matter?
SEO or Search Engine Optimization, to make it simple, SEO is a combination of a technical and non-technical processes to improve your website or application visibility by search engines like google.com. To get more traffic, you need to optimize SEO, optimize your content, etc.
Improve Coding practice
As a developer, you need to know that SEO begins in your first HTML code.
Check the following points in your HTML.
Language
By language, I mean the lang attribute in your HTML code :
<html lang="en">.......</html>In Next.js, you can add lang in your next.config.js like so :
module.exports = {
i18n: {
locales: ["en"],
defaultLocale: "en",
},
// .....
};Meta tag & Metadata
There is plenty of meta tags but I will mention only a few :
- title
- charset
- viewport
- description
- keywords
- manifest
- icon
- twitter image, card, description, etc
- Open Graph
Note that Twitter has its implementation so you need to provide it if you need to share your site across social media.
A simple example here :
<title>Your title</title>
<meta
name="title"
content="Your title"
/>
<meta name="description" content="Description" />
<meta property="og:title" content="title" />
<meta property="og:type" content="article" />
<meta
property="og:url"
content="or: url"
/>
<meta property="og:image" content="image ..." />
<meta
name="twitter:title"
content="title"
/>
<meta name="twitter:description" content="description" />
<meta name="twitter:image" content="image" />
<meta name="twitter:card" content="summary_large_image" />Please find more on google for this topic!
Open Graph make a detailed for it : see https://ogp.me/
Next Head Optimization
Yes, this is called next/head !!
To optimize your SEO you need to make sure that all of your pages have their head.
Whether you are Server Side Rendering (SSR) or Client Side Rendering you can make this perfect :
Here is my own law for this :
- Never add your <Head/> tag in conditional rendering
- Add, for each page, a title, description, keywords, and Open Graph / Twitter meta
- Never store a meta in state.
Call next/head in top of your components, use fragement if needed.
Do not use this :
export default function Page (props) {
const [meta, setMeta] = useState<MetaProps>({
title: "title",
description: "Description"
})
const loadMeta = useCallback(
() => {
// for show only do not do this
setMeta(prev => ({...prev, ...props.meta}))
},
[props.meta],
)
useEffect(() => {
loadMeta()
}, [loadMeta])
return (
<>
<Head>
<title>{meta.title} </title>
// all meta
</Head>
<CustomComponent/>
</>
);
}
export async function getServerSideProps(props: any) {
...
}
Instead use this :
export default function Page (props) {
// always check your props to avoid client side error
const {title, description} = props.meta
return (
<>
<Head>
<title>{title} </title>
// all meta
</Head>
<CustomComponent/>
</>
);
}
export async function getServerSideProps(props: any) {
...
}
conclusion
Search Engine Optimization is important for your web site so always check it.
SEO will improve your traffic, google search
I will share you next this topics :
How to add website to Google Search Console ?
How to Add website to Google Analytics ?
Comment below and share your idea !!
See you next.js time !
By Mahady Manana, Fullstack Javascript Developer
01 September 2022 at 12 h 25
"Skills are honed through the interplay of learning and teaching - one must learn in order to teach, and teach in order to truly learn”. As a passionate Javascript developer, I enjoy sharing my knowledge and skills with others, and regularly publish tutorials on my website and other platforms about the latest Javascript, Typescript, Node.js, React.js, Next.js and more to help others learn and stay up to date with the latest developments trends.