Posted on • Updated on

Next js SEO component

author

Kai

Step 1 - Generate favicons

You can use “https://www.favicon-generator.org” to generate different sizes of favicon.

Step 2 - Create SEO component

import React from "react";
    import Head from "next/head";
    export default function Seo({
    
      title = "your site title",
      description = "your site description",
      url = "https://example.com",
      image = "/images/favicons/android-icon-192x192.png",
      keywords = "tag1, tag2, tag3",
    }) {
      return (
        <Head>
          {/* Global Title */}
          <title>
            {title ?? process.env.NEXT_PUBLIC_APP_NAME ?? "Next js App"}
          </title>
          {/* URL's */}
          <link rel="canonical" href={url} />
          {/* <!-- Primary Meta Tags --> */}
          <meta charSet="UTF-8"></meta>
          <meta name="title" content={title} />
          <meta name="description" content={description} />
          <meta name="keywords" content={keywords}></meta>
          {/* <!-- Open Graph / Facebook --> */}
          <meta property="og:type" content="website" />
          <meta property="og:url" content={url} />
          <meta property="og:title" content={title} />
          <meta property="og:description" content={description} />
          <meta property="og:image" content={image} />
          {/* <!-- Twitter --> */}
          <meta property="twitter:card" content="summary_large_image" />
          <meta property="twitter:url" content={url} />
          <meta property="twitter:title" content={title} />
          <meta property="twitter:description" content={description} />
          <meta property="twitter:image" content={image} />
          {/*  Favicons  */}
          <link
            rel="apple-touch-icon"
            sizes="57x57"
            href="/images/favicons/apple-icon-57x57.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="60x60"
            href="/images/favicons/apple-icon-60x60.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="72x72"
            href="/images/favicons/apple-icon-72x72.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="76x76"
            href="/images/favicons/apple-icon-76x76.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="114x114"
            href="/images/favicons/apple-icon-114x114.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="120x120"
            href="/images/favicons/apple-icon-120x120.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="144x144"
            href="/images/favicons/apple-icon-144x144.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="152x152"
            href="/images/favicons/apple-icon-152x152.png"
          />
          <link
            rel="apple-touch-icon"
            sizes="180x180"
            href="/images/favicons/apple-icon-180x180.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="192x192"
            href="/images/favicons/android-icon-192x192.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="32x32"
            href="/images/favicons/favicon-32x32.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="96x96"
            href="/images/favicons/favicon-96x96.png"
          />
          <link
            rel="icon"
            type="image/png"
            sizes="16x16"
            href="/images/favicons/favicon-16x16.png"
          />
          <link rel="manifest" href="/images/favicons/manifest.json" />
          <meta name="msapplication-TileColor" content="#ffffff" />
          <meta
            name="msapplication-TileImage"
            content="/images/favicons/ms-icon-144x144.png"
          />
          <meta name="theme-color" content="#ffffff"></meta>
        </Head>
      );
    }

Step 1 - Usage

pages/index.jsx

return (
	...
		{/* SEO Component*/}
		<Seo />
		{/* /SEO Component*/}
	...
)

pages/posts/index.jsx

return (
	...
		{/* SEO Component*/}
		<Seo title={"MySite | Posts"} url={'https://example.com/posts'} />
		{/* /SEO Component*/}
	...
)

pages/posts/[slug].jsx

return (
	...
		{/* SEO Component*/}
		<Seo
        	title={post.title}
        	description={post.excerpt}
        	url={'https://example.com/posts/'+post.slug}
      	/>
		{/* /SEO Component*/}
	...
)

 

end of article

Related Posts

Join Our Newsletter

Want the latest & greatest from our blog straight to your inbox with some exclusive offers from our partners and sponsors?

We won't spam. Promise.