SEO for Developers: Why use Next.js for SEO
Why use NEXT JS for SEO In SEO, web development ensures your website stands out on the search engine result page (SERP). SEO is not only about finding the right
Why use NEXT JS for SEO
In SEO, web development ensures your website stands out on the search engine result page (SERP). SEO is not only about finding the right keywords and writing top content, it is also about how you build your website.
Like how marketeers and content writers use tools like SEMrush, Ahref etc, as developers one should explore NEXT JS features for developing SEO-friendly websites.
What is NEXT JS?
Next JS is an open-source react-based framework for developing websites and applications. Next js has various features like server-side rendering, static site generator, Image optimisation, and custom Head tag which ensures websites are SEO friendly.
How can NEXT Js improve SEO?
Leverage server-side rendering
Server-side rendering (SSR) is the cornerstone of NEXT js. SSR ensures that page content is built before it is rendered on the client side. This ensures that when bots crawl the site they have content to index.
Here is a sample code for server-side rendering:
export async function getServerSideProps(context) {
const res = await fetch(`https://api.example.com/data`);
const data = await res.json();
return { props: { data } };
}
function Page({ data }) {
// Render data...
}
Image optimisation
Next, the JS custom image component handles image optimisation automatically by comparing and serving images in a format which is suitable for the site. Its lazy loading feature ensures the image is loaded only when it comes into view.
import Image from 'next/image'
export default function Page() {
return (
<Image
src="/profile.png"
width={500}
height={500}
alt="Picture of the author"
/>
)
}
Custom Head component :
Next, the js custom head component helps you to change the title, meta description, canonical URL, and schema dynamically which helps in improving the click rate.
<Head>
<title>{title}</title>
<meta name="robots" content="index, follow" />
<meta name="description" content={summary} />
<link rel="canonical" href={canonicalUrl} />
<meta property="og:title" content={title} />
<meta property="og:description" content={summary} />
<meta property="og:type" content="article" />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content={image?.fields?.file?.url} />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={summary} />
<meta name="twitter:image" content={image?.fields?.file?.url} />
{/* Insert JSON-LD schema using dangerouslySetInnerHTML */}
<script
id="json-ld-schema"
type="application/ld+json"
dangerouslySetInnerHTML={{ __html: schemaString }}
></script>
</Head>
Core web vitals
Next JS automatic code splitting, dynamic component, and purge css ensure the website loads faster.
Custom script :
NEXT js provides a custom script component which helps to load third-party scripts. Its strategy attribute provides various ways to load scripts like lazyload, before interactive etc, which improves website performance.
Conclusion:
Using Next Js will ensure your site is optimized for SEO so that it is easy to index.
