{"time":1700456225915,"blocks":[{"id":"QTJonUHqzc","type":"paragraph","data":{"text":"Welcome to your ultimate guide on maximizing Next.js for SEO—a crucial factor in making your website stand out in search results. In the online world, visibility is everything, and this guide will show you how Next.js can be your superhero for SEO success."}},{"id":"KOEFAIhYLz","type":"header","data":{"text":"Why Next.js?","level":4}},{"id":"ZNK1h5MBJY","type":"paragraph","data":{"text":"Next.js, a React framework, combines server-side rendering (SSR) and static site generation (SSG), offering a potent solution that not only enhances speed but also aligns perfectly with SEO best practices."}},{"id":"9DDIkRfwR2","type":"header","data":{"text":"Prerequisites:","level":4}},{"id":"owOHGGkZri","type":"paragraph","data":{"text":"Assuming your Next.js website is up and running, let's delve into advanced strategies to supercharge its SEO performance."}},{"id":"BPxCqaLf4I","type":"header","data":{"text":"Metadata API","level":4}},{"id":"_j1nSkZjzP","type":"paragraph","data":{"text":"Next.js provides a Metadata API designed for effortlessly defining your application's metadata, such as meta and link tags within the HTML head element. This functionality not only enhances SEO but also optimizes your website for seamless sharing across the web."}},{"id":"QozFjDe20J","type":"header","data":{"text":"Static Metadata","level":3}},{"id":"lNLNRV0k3E","type":"paragraph","data":{"text":"Let’s talk about static metadata options, In layout.js or page.js file,"}},{"id":"XG7XqtQxn2","type":"codeBox","data":{"code":"

// add a base URL so that we don't have to repeat website url, for canonical or sub pages

export const metadata = {
  metadataBase: new URL('https://website.com'),
  title: 'Your Website',
  description: 'Some description content for your website', // Not more than 150-200 characters.
};

","language":"javascript","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"vM2bRhsDFN","type":"paragraph","data":{"text":"This is the fundamental setup for metadata. Now, let's explore additional options and strategies to provide search engine crawlers with more comprehensive information about your website."}},{"id":"0GuosMYyVD","type":"codeBox","data":{"code":"

export const metadata = {
    ...
  title: {
    default: 'Your_Website',
    template: `%s | Your_Website`, // eg Shop | Your_Website
  },
  description: \"Some description content for your website\", // Not more than 150-200 characters. 
};

","language":"javascript","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"dM9jEKq0A0","type":"paragraph","data":{"text":"Sometimes, you might need to include the brand title in post page titles. With a template, You can achieve this by inserting the title using static metadata in the layout.tsx file and making the required adjustments accordingly."}},{"id":"gT1pz5izd5","type":"codeBox","data":{"code":"

export const metadata = {
    ...
    keywords: [
    'Children items',
    'household items',
    'clothing',
  ],
  creator: 'Your_Name',
  publisher: 'Your_Name',
};

","language":"javascript","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"VdkhqO33E5","type":"paragraph","data":{"text":"Based on your site content, you can provide some keywords that reflects your site contents. Consider leveraging tools like Google Trends to discover exciting keywords that align with your website's content and resonate with your target audience."}},{"id":"tQTzVGrC1Q","type":"codeBox","data":{"code":"

export const metadata = {
    ...
  alternates: {
    canonical: '/', // We have one Base URL, so adding just \"/\"
    languages: {
      'en-US': 'https://your_website.com/en-US',
      'de-DE': 'https://your_website.com/de-DE',
    }
  },
}

","language":"javascript","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"Okr0V1S1yJ","type":"paragraph","data":{"text":"Some information about your site and canonical URL"}},{"id":"ByDztPGAQe","type":"paragraph","data":{"text":"Canonical URL: A canonical URL is the version of a webpage chosen by search engines like Google as the main version when there are duplicates"}},{"id":"Oa12qZ4gT0","type":"codeBox","data":{"code":"

export const metadata = {
    ...
    openGraph: {
    title: 'Your_Website',
    description: \"Web description, use something related to your website contents\",
    url: \"https://website.com\", // here full URL needed. 
      type: 'website',
      siteName: 'Website name',
      authors: ['Your_Name'],
       images: [
           {
             url: '/opengraph-image.jpg',
             width: 1280,
             height: 720,
             alt: 'site-preview',
           },
         ],
  },
  twitter: {
    title: 'Your_Website',
    description: \"Web description, use something related to your website contents\",
    card: 'summary_large_image',
      siteId: 'your_twitter_user_id',
      creator: 'your_twitter_username',
      creatorId: 'your_twitter_user_id',
       images: [
           {
             url: '/opengraph-image.jpg',
             width: 1280,
             height: 720,
             alt: 'site-preview',
           },
         ],
  },
}

","language":"javascript","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"lVShdZ1Xou","type":"paragraph","data":{"text":"OpenGraph: OpenGraph is a protocol that allows websites to control how their content appears when shared on social media platforms. It was originally developed by Facebook and is now an open standard widely adopted by other platforms like Twitter, LinkedIn, and Pinterest."}},{"id":"iNUvOVSIdz","type":"paragraph","data":{"text":"Common OpenGraph meta tags include:"}},{"id":"vjbsjZm_H2","type":"list","data":{"style":"unordered","items":["og:title: The title of the content.","og:description: A brief description of the content.","og:image: An image associated with the content.","og:url: The canonical URL of the page."]}},{"id":"GlxrTdNkX9","type":"paragraph","data":{"text":"Twitter: Some extra configuration needed for twitter. Like twitter user name and user id. This is a paid feature of twitter or X, but you can use some website to get your twitter user id. Link"}},{"id":"A4WBXYqLsE","type":"paragraph","data":{"text":"OG or Twitter Image: Add a image in public/opengraph-image.jpg that represent your website when you share to social media. Like your website banner with logo. If I share my website banner to socials this is how it looks."}},{"id":"uoxz7cxhf4","type":"image","data":{"file":{"url":"https://api.fazleyrabbi.dev/images/2023-11-18T11-04-26.314Z-img_8238.png.png"},"caption":"OpenGraph Content Preview","withBorder":false,"stretched":false,"withBackground":false}},{"id":"CEZjs0-mxm","type":"header","data":{"text":"Google site verification","level":3}},{"id":"1qeOX5F2hZ","type":"codeBox","data":{"code":"

export const metadata = {
    ...
    verification: {
    google: \"\" // google-site-verification code
  },
};

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"8lFsxgNEcl","type":"paragraph","data":{"text":"If you haven't yet verified your site with Google, I highly recommend doing so. This process involves obtaining a Google-site-verification ID, which is essential for establishing the authenticity and ownership of your website."}},{"id":"cnyAcQnMlr","type":"paragraph","data":{"text":"You can add your website to google search console here."}},{"id":"CoAM9qMJi_","type":"image","data":{"file":{"url":"https://api.fazleyrabbi.dev/images/2023-11-18T11-06-18.832Z-screenshot_2023-11-18_120120.png"},"caption":"Google Search Console","withBorder":false,"stretched":false,"withBackground":false}},{"id":"7igp1ZiWAt","type":"image","data":{"file":{"url":"https://api.fazleyrabbi.dev/images/2023-11-18T11-07-06.082Z-screenshot_2023-11-18_120244.png"},"caption":"Google-Site-Verification ID","withBorder":false,"stretched":false,"withBackground":false}},{"id":"oBi9oYUn1Z","type":"paragraph","data":{"text":"Later on, we will utilize Google Search Console to apply indexing for the updated content on our website."}},{"id":"Sgoa6chCHT","type":"paragraph","data":{"text":"Here are additional fields that are essential if you want certain parts of your website to remain unindexed by search engines."}},{"id":"Sek-moEwm5","type":"codeBox","data":{"code":"

export const metadata = {
  robots: {
    index: false,
    follow: true,
    nocache: true,
  },
};

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"qJ__WktHPB","type":"header","data":{"text":"Dynamic Metadata","level":3}},{"id":"ulbTVitExp","type":"paragraph","data":{"text":"Now that we've optimized metadata for our homepage, let's address how to handle metadata for other pages on your website, including dynamic pages. Let's delve into this aspect."}},{"id":"PTUK9OYQ4q","type":"header","data":{"text":"Static Page","level":4}},{"id":"NNmxvFwX5C","type":"paragraph","data":{"text":"For instance, let's consider a page named \"Shop.\" To set specific titles, descriptions, or OpenGraph (OG) content for this page, you can add extra updated fields. If any field is not set for this page, it will default to the values specified in the layout metadata fields."}},{"id":"aj2tF7zLnG","type":"paragraph","data":{"text":"app/shop/page.jsx"}},{"id":"PWCth6CRL8","type":"codeBox","data":{"code":"

export const metadata = {
  title: 'Shop',
  description: \"Shop page description\",
  alternates: {
    canonical: '/shop',
  },
  openGraph: {
      title: 'Shop',
      description: \"Shop page description\",
    url: \"https://website.com/shop\",
      type: 'website',
      siteName: 'Website name',
      authors: ['Your_Name'],
       images: [
           {
             url: '/opengraph-image-shop.jpg',
             width: 1280,
             height: 720,
             alt: 'site-preview',
           },
         ],
  },
  twitter: {
      title: 'Shop',
      description: \"Shop page description\",
    url: \"https://website.com/shop\",
    card: 'summary_large_image',
      siteId: 'your_twitter_user_id',
      creator: 'your_twitter_username',
      creatorId: 'your_twitter_user_id',
       images: [
           {
             url: '/opengraph-image-shop.jpg',
             width: 1280,
             height: 720,
             alt: 'site-preview',
           },
         ],
  },
};

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"TmWG9KRMh4","type":"paragraph","data":{"text":"To simplify, instead of repeating the OpenGraph (OG) and Twitter objects for each page, consider using constants for the repetitive parts. In your example, you've used the same OG image for all static pages. If you have different images, you can pass them as function props. This not only reduces redundancy but also makes your code more organized and easier to manage."}},{"id":"A3HCQPf4v0","type":"codeBox","data":{"code":"


export const metadata = {
  title: 'Portfolio',
  description: PORTFOLIO_DESCRIPTION,
  alternates: {
    canonical: '/portfolios',
  },
  openGraph: {
    title: 'Portfolio',
    description: PORTFOLIO_DESCRIPTION,
    ...DEFAULT_OG_CONFIG,
    ...DEFAULT_IMAGE_CONFIG,
  },
  twitter: {
    title: 'Portfolio',
    description: PORTFOLIO_DESCRIPTION,
    ...DEFAULT_TWITTER_CONFIG,
    ...DEFAULT_IMAGE_CONFIG,
  },
};

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"VLFRtxcEi1","type":"header","data":{"text":"Dynamic Pages","level":4}},{"id":"Fb-s6VY3ZA","type":"paragraph","data":{"text":"Now, let's discuss dynamic pages, such as shop/[slug]/page.jsx . You can use the generateMetadata function to dynamically generate metadata tags for all your dynamic pages. Let's explore this further."}},{"id":"vkv4fkDYbz","type":"codeBox","data":{"code":"


// you can place it bottom of the file, before exporting the file. 
export async function generateMetadata({ params: { slug } }) {
  const productRes = await getProduct(slug);
  const product = productRes.data;

  return {
    title: product.title,
    description: product.short_desc,
    alternates: {
      canonical: `/shop/${product.slug}`,
    },
    openGraph: {
      title: product.title,
      description: product.short_desc,
      ...DEFAULT_OG_CONFIG,
    },
    twitter: {
      title: product.title,
      description: product.short_desc,
      ...DEFAULT_TWITTER_CONFIG,
    },
  };
}

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"8DmxHhimQO","type":"paragraph","data":{"text":"This ensures that each dynamic page has its own unique and relevant metadata."}},{"id":"81fZowlw2z","type":"header","data":{"text":"Dynamic OpenGraph Image","level":4}},{"id":"1fuarz4G2P","type":"paragraph","data":{"text":"In the app/shop/[slug]/opengraph-image.jsx file, you can add the necessary code to dynamically generate an OpenGraph (OG) image based on the content of your product page. This enhances the visual representation of your content when shared on social media platforms."}},{"id":"XrB00A4FPm","type":"codeBox","data":{"code":"

import { ImageResponse } from 'next/og';

export const size = {
  width: 1280,
  height: 720,
};

export const contentType = 'image/png';

export default async function OpengraphImage({ params: { slug } }) {
  const productRes = await getProduct(slug);
  const product = productRes.data;

  return new ImageResponse(
    (
      <div
        style={{
          width: '100%',
          height: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
        }}
      >
        <img
          style={{
            objectFit: 'cover',
            objectPosition: 'center',
          }}
          width={size.width}
          height={size.height}
          src={product.image}
          alt={product.title}
        />
      </div>
    ),
    size,
  );
}

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"NgTf5ZJSPP","type":"paragraph","data":{"text":"This approach will also work for Twitter images. If you prefer, you can create another file in the same location named twitter-image.jsx to specifically handle Twitter image generation. This allows you to tailor the image content for different social media platforms if needed."}},{"id":"v3gv_tGrdU","type":"header","data":{"text":"Sitemap","level":4}},{"id":"t9j_BO08iZ","type":"paragraph","data":{"text":"Let's discuss one of the most critical aspects of SEO - the sitemap.xml. Search engine crawlers often target the sitemap to efficiently crawl and index pages. To create a sitemap, add a file named sitemap.js in the app folder."}},{"id":"x0FaYsd3RT","type":"codeBox","data":{"code":"


export default async function sitemap() {
  const website = \"https://your_website.com\"

  const productsRes = await getProducts();
  const productUrls = productsRes.data
    ? productsRes.data.map((product) => {
      return {
        url: `${website}/shop/${product.slug}`,
        lastModified: new Date(),
        changeFrequency: 'weekly',
        priority: 0.9,
      };
    })
    : [];

  return [
    {
      url: website,
      lastModified: new Date(),
      changeFrequency: 'daily',
      priority: 1,
    },
    {
      url: `${website}/shop`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
    },
    {
      url: `${website}/contact`,
      lastModified: new Date(),
      changeFrequency: 'weekly',
      priority: 0.9,
    },
    ...productUrls,
  ];
}

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"HeYO3yyTkk","type":"paragraph","data":{"text":"Next.js will automatically generate the sitemap.xml file during the build process. Once your site is built, you can access the generated sitemap by visiting the following URL: https://your_website.com/sitemap.xml."}},{"id":"tw-E0XdXUU","type":"header","data":{"text":"Robots.txt","level":4}},{"id":"2Le0m8WXMx","type":"paragraph","data":{"text":"If there are certain pages, such as admin pages, that you don't want search engines to crawl, you can use the robots.txt file to define these exclusions. Create a robots.txt file in the app directory to specify the pages you wish to restrict from search engine crawlers."}},{"id":"ZYJAwQ00vB","type":"codeBox","data":{"code":"

User-Agent: *
Allow: /
Disallow: /admin/

Sitemap: https://your_website.com/sitemap.xml

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"NdqFqkYpQX","type":"header","data":{"text":"Manifest.js","level":4}},{"id":"KPNIBeS50k","type":"paragraph","data":{"text":"In the manifest file, you provide essential information about your web application. This information is crucial for how your application is presented and behaves when users interact with it."}},{"id":"sLMnwuvhyt","type":"codeBox","data":{"code":"

import { SITE_DESCRIPTION } from '@/constants';

export default function manifest() {
  return {
    name: 'Website Name',
    description: SITE_DESCRIPTION,
    start_url: '/',
    display: 'standalone',
    background_color: '#fff',
    theme_color: '#fff',
    icons: [
      {
        src: '/favicon.ico',
        sizes: 'any',
        type: 'image/x-icon',
      },
    ],
  };
}

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"kc8UhLigkx","type":"header","data":{"text":"Schema.org & JSON-LD","level":4}},{"id":"9l2SI3UWbR","type":"paragraph","data":{"text":"Schema.org is a collaborative effort by major search engines, including Google, Bing, Yahoo, and Yandex, to create a standardized vocabulary (schema) for structuring and marking up web content."}},{"id":"N2LW_95vN0","type":"paragraph","data":{"text":"JSON-LD is a format for structured data that can be used by search engines to understand your content. For example, you can use it to describe a person, an event, an organization, a movie, a book, a recipe, and many other types of entities."}},{"id":"zBJMmJwMc1","type":"paragraph","data":{"text":"In your shop/[slug]/page.jsx file, you can incorporate Schema.org markup and JSON-LD to provide structured data for search engines."}},{"id":"6ukLk4vP2o","type":"codeBox","data":{"code":"

export default async function Page({ params }) {
  const product = await getProduct(params.id)

  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'Product',
    name: product.name,
    image: product.image,
    description: product.description,
  }

  return (
    <section>
      {/* Add JSON-LD to your page */}
      <script
        type=\"application/ld+json\"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* ... */}
    </section>
  )
}

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"VvEU2FbpYi","type":"paragraph","data":{"text":"In your other pages, you can similarly set up Schema.org markup and provide structured data about your pages and content."}},{"id":"_ff-9QySTf","type":"paragraph","data":{"text":"For instance, in the example from my site, I've used itemScope and itemProp to define the scope and properties of certain elements in your code."}},{"id":"bB2X4vwdXj","type":"codeBox","data":{"code":"

<div itemScope itemType=\"https://schema.org/Person\">
  <h3 className={'greetings'}>Hello, I&apos;m</h3>
  <h1 className={'name'} itemProp=\"name\">
    Fazley Rabbi
  </h1>
  <p className={'subtitle'} itemProp=\"jobTitle\">
    Freelance Full Stack Software Developer, <br />I create web
    and mobile apps!
  </p>
</div>

","language":"Auto-detect","theme":"https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/atom-one-dark.min.css"}},{"id":"0NY6I5QJVo","type":"paragraph","data":{"text":"For a more comprehensive understanding, please refer to the schema.org documentation. Additionally, here's a list of item types supported by schema.org."}},{"id":"njpyPBdUni","type":"paragraph","data":{"text":"Ensure you've included the following additional files in your app directory:"}},{"id":"uRVJTtToG6","type":"list","data":{"style":"ordered","items":["favicon.ico for the favicon meta tag, with a size of 16x16 pixels.","icon.png with a size of 32x32 pixels.","apple-icon.png with a size of 180x180 pixels.","not-found.jsx for the default 404 page."]}},{"id":"XpBO0ey4QW","type":"paragraph","data":{"text":"You can use favicon.io to generate these favicon files. This ensures a polished and consistent presentation of your website across various platforms."}},{"id":"qao2O8wua4","type":"header","data":{"text":"Indexing","level":4}},{"id":"Jcswzd5-gJ","type":"paragraph","data":{"text":"Now that you've completed all the SEO steps, it's time to inform Google about the changes and request a crawl of your site. In Google Search Console, search for your website URL, then click on \"Request indexing\" to prompt Google to reindex your site. This ensures that the latest information about your website is reflected in search engine results."}},{"id":"-jQRpguQyh","type":"image","data":{"file":{"url":"https://api.fazleyrabbi.dev/images/2023-11-18T11-13-17.064Z-screenshot_2023-11-18_124741.png"},"caption":"Google Search Console Request INDEXING","withBorder":false,"stretched":false,"withBackground":false}},{"id":"QqHqB6sscc","type":"paragraph","data":{"text":"Additionally, if you haven't already added your sitemap to Google Search Console, make sure to do so. This involves submitting your sitemap URL to Google Search Console, allowing Google to efficiently crawl and index your website's pages."}},{"id":"0V4BbL2xYM","type":"image","data":{"file":{"url":"https://api.fazleyrabbi.dev/images/2023-11-18T11-13-33.623Z-screenshot_2023-11-18_124942.png"},"caption":"Google Search Console add sitemap","withBorder":false,"stretched":false,"withBackground":false}},{"id":"9kmJBDXB1V","type":"delimiter","data":{}},{"id":"TLasqhiXxA","type":"paragraph","data":{"text":"Thank you for reading this article. I've aimed to provide detailed explanations for each step. If you have any questions or need further clarification, feel free to ask here. I hope this article proves to be valuable in boosting your website to the top of search results. "}}],"version":"2.28.2"}

Next.js SEO Mastery: Boosting Search Engine Performance

Web Development