Introduction

I today’s digital age, where over 93% of online experiences begin with a search engine, ensuring your website ranks well in search results is crucial for attracting organic traffic. This traffic is not just about quantity; it’s about quality. According to a study by BrightEdge, 53% of all website traffic comes from organic search, making SEO the most significant driver of traffic to websites.

SEO is essential for improving your website’s visibility in search results, thereby attracting qualified visitors without the recurring costs of advertising. Beyond visibility, effective SEO practices enhance user experience, with Google’s ranking algorithm now incorporating metrics like page load speed and mobile-friendliness, which directly impact how users perceive your brand.

Furthermore, data from HubSpot reveals that 75% of users never scroll past the first page of search results, highlighting the critical need to appear in the top rankings. Optimizing your website’s structure, content, and navigation not only boosts your search engine ranking but also improves conversion rates by providing users with relevant, easily accessible information.

Incorporating SEO into your digital strategy isn’t just about staying competitive; it’s about capitalizing on opportunities. A well-optimized site can lead to increased credibility and authority, with 57% of B2B marketers stating that SEO generates more leads than any other marketing initiative.

So, how can you ensure all these benefits—improved visibility, qualified traffic, and standing out from the competition—while using modern technologies like Next.js 14? Let’s explore the best SEO practices to help you maximize your website’s potential.

Setting Up Your Next.js Project

Before diving into SEO best practices, ensure you have a Next.js application. If not, you can create one by following the Next.js documentation.

Your project structure should resemble the following:

mon-site-next/
├── src/
│ ├── app/
│ │ ├── page.tsx
│ │ ├── layout.tsx
│ │ ├── global.css
│ | └── favicon.ico
│ ├── components/
├── .gitignore
├── next.config.js
├── package.json
├── README.md
└── tsconfig.json
Language:text

Discover Our Company

How We Collaborate with You

Thinking Big

We turn your ambitions into concrete goals, putting innovation at the heart of our collaboration.

Starting Small

We begin with pragmatic solutions and then evolve with agility to maximize your success at each step.

Creating Fast

Our responsive team turns ideas into tangible results, accelerating your growth and impact.

Innovating at Scale

We push boundaries to help you seize large-scale opportunities, ensuring visionary collaboration.

Schedule an Appointment

Favicon

The favicon (or favorite icon) is a small image displayed in the browser tab, next to the page title. It helps visitors quickly identify your website among multiple open tabs.

Although small, the favicon plays an important role in the user experience and the credibility of your website. A well-designed favicon reinforces your brand’s visual identity, improves site memorability, and facilitates navigation. While it is not a direct SEO ranking factor, a personalized and professional favicon can enhance the perception of your site and encourage user loyalty, which is beneficial for your overall SEO.

At Tekru, we use a great tool called Real FavIcon Generator to generate favicons. It is a free and easy-to-use tool that allows you to create a favicon package compatible with all browsers and devices. You can customize the favicon design, preview it in real-time, and generate the necessary files and code to implement it on your site.

Once generated, add the zipped favicon package to the app folder of your Next.js project. The package should contain the following files:

favicon.ico
apple-touch-icon.png
favicon-16x16.png
favicon-32x32.png
android-chrome-192x192.png
android-chrome-512x512.png
site.webmanifest
Language:text

Next, add the following code to the layout.tsx file to include the favicon in your Next.js application:

import urlJoin from "url-join";

export function generateMetadata(props?: any): Metadata {
  const siteUrl = process.env.NEXT_PUBLIC_PUBLIC_URL;

  if (!siteUrl) {
    throw new Error("NEXT_PUBLIC_PUBLIC_URL is missing from .env");
  }

  // Other metadata
  const otherMetadata = {};

  return {
    ...otherMetadata,
    generator: "Jamy by Tekru Technologies",
    icons: {
      icon: urlJoin(siteUrl, "/assets/favicons/favicon.ico"),
      shortcut: urlJoin(siteUrl, "/assets/favicons/favicon.ico"),
      apple: urlJoin(siteUrl, "/assets/favicons/apple-touch-icon.png"),
    },
    manifest: urlJoin(siteUrl, "/assets/favicons/site.webmanifest"),
  } as Metadata;
}
Language:typescript

This code snippet generates the metadata for your Next.js application, including the favicon. The generateMetadata function returns an object containing the necessary metadata for the application, such as the site URL and the favicon URLs. The urlJoin function is used to concatenate the site URL with the favicon paths to generate the complete URLs.

OpenGraph and OpenGraph Image

OpenGraph is a protocol that allows you to control how your content appears when shared on social media platforms like Facebook, Twitter, and LinkedIn. By defining OpenGraph metadata in your HTML, you can specify the title, description, image, and other information that will be displayed when your content is shared on social media.

The OpenGraph image is a key element of the OpenGraph protocol. It is the image that will be displayed when your content is shared on social media platforms. The OpenGraph image should be visually appealing, relevant to the content, and optimized for social media sharing.

To add OpenGraph metadata and an OpenGraph image to your Next.js application, you can use the generateMetadata function in the layout.tsx file. Here is an example of how to define the OpenGraph metadata and image:

import urlJoin from "url-join";

export function generateMetadata(props?: any): Metadata {
  const siteUrl = process.env.NEXT_PUBLIC_PUBLIC_URL;

  if (!siteUrl) {
    throw new Error("NEXT_PUBLIC_PUBLIC_URL is missing from .env");
  }

  // Other metadata
  const meta = {} as Metadata;
  const defaultImage = "DEFAULT_IMAGE_URL";
  const blogPost = {} as Blog;
  let image = defaultImage;
  if (blogPost.image) {
    if (typeof options.image === "string") {
      image = options.image;
    } else if (options.image?.src) {
      // WordPress case
      image = options.image.src;
    }
  }
  // Add the site URL to the image if it's a relative path
  if (image && !image.startsWith("http")) {
    image = urlJoin(siteUrl, image);
  }

  // Function to get the locale or language
  const lng = getLocale();
  meta.openGraph = {
    siteName: "Page or article title",
    images: [{ url: image, width: 1714, height: 900 }],
    locale: lng ? `${lng.toLowerCase()}` : "fr_FR",
    type: "website", // "article" for blog posts
    title: meta.title,
    description: meta.description,
  };
  meta.twitter = {
    card: "summary_large_image",
    title: meta.title,
    description: meta.description,
    images: meta.openGraph.images,
  };

  return meta;
}
Language:typescript

HTML Metadata

Static

In Next.js 14, the metadata object is used to define essential metadata for your web pages, such as titles, descriptions, and images. This information is crucial for SEO as it helps search engines and social networks understand and correctly display the content of your pages.

By default, in the layout.tsx file, you will find an object named metadata. This object contains the necessary information for Next.js to properly handle the SEO of your pages.

Here is an example illustrating the most important properties to optimize your SEO:

import { Metadata } from "next";

// Define metadata for the page
export const metadata: Metadata = {
  // Page title configuration
  title: {
    // Default title used if no other title is specified
    default: "My Site", // This title will be displayed for pages without a specific title

    // Title template allowing customization of each page title
    template: "%s | My Site", // The %s will be replaced by the specific page title
  },

  // Page description for search engines
  description: "Description of your website",

  // List of relevant keywords for the page
  keywords: ["website", "articles", "news", "blog"],

  // Twitter preview configuration
  twitter: {
    // Twitter card type, usually 'summary_large_image' for a large image
    card: "summary_large_image",

    // Twitter username associated with the page
    site: "@yourTwitterHandle",

    // Page title for Twitter previews, if the title is not specified then the default title will be used
    title: "Page title for Twitter",

    // Page description for Twitter previews, if the description is not specified then the default description will be used
    description: "Description for Twitter",

    // Image used for Twitter previews, if this image is not specified then the default OpenGraph image will be used
    image: "/images/twitter-image.jpg",
  },

  // OpenGraph configuration for social media previews like Facebook, LinkedIn, etc.
  openGraph: {
    // Page title for OpenGraph previews
    title: "Page title for OpenGraph",

    // Page description for OpenGraph previews
    description: "Description for OpenGraph",

    // Images used for OpenGraph previews
    images: ["/images/opengraph-image.jpg"],

    // Page URL for OpenGraph previews
    url: "https://yourwebsite.com/page",

    // Content type for OpenGraph, typically 'website'
    type: "website",
  },

  // Defines how the page should be displayed on different devices
  // Essential for responsive design, ensuring good readability on mobile and tablets
  viewport: "width=device-width, initial-scale=1",

  // Canonical URL of the page to avoid duplicate content issues
  // Indicates to search engines which URL should be considered the main one for this page
  canonical: "https://www.mywebsite.com",
};
Language:typescript

Dynamic

Static metadata is convenient, but when we have dynamic pages and want the metadata to change dynamically based on the page content, a solution is needed. For example, a blog might have general pages with the same OpenGraph image, title, or description, but each blog post needs its own unique OpenGraph image, title, and description. Here’s

how to achieve dynamic metadata in Next.js.

In page.tsx, use generateMetadata to dynamically define metadata for a blog post:

import { Metadata } from "next";

export function generateMetadata(props: any): Metadata {
  const title = `Article ${props.params.slug}`;
  const description = `Read this article about ${props.params.slug}.`;

  return {
    title: title,
    description: description,
    openGraph: {
      title: title,
      description: description,
      images: ["/images/opengraph-image.jpg"],
    },
    twitter: {
      card: "summary_large_image",
      title: title,
      description: description,
      image: "/images/twitter-image.jpg",
    },
    canonical: `https://www.mywebsite.com/article/${props.params.slug}`,
  };
}
Language:typescript

Discover Our Company

How We Collaborate with You

Thinking Big

We turn your ambitions into concrete goals, putting innovation at the heart of our collaboration.

Starting Small

We begin with pragmatic solutions and then evolve with agility to maximize your success at each step.

Creating Fast

Our responsive team turns ideas into tangible results, accelerating your growth and impact.

Innovating at Scale

We push boundaries to help you seize large-scale opportunities, ensuring visionary collaboration.

Schedule an Appointment

Additional Techniques for Improving SEO

Web Vitals

Web Vitals is an initiative by Google to measure the quality of the user experience on the web. These metrics are essential for improving the performance, accessibility, and overall user experience of your website.

The core metrics are:

1. Largest Contentful Paint (LCP): Measures loading performance. A good LCP score is 2.5 seconds or less.
2. First Input Delay (FID): Measures interactivity. A good FID score is 100 milliseconds or less.
3. Cumulative Layout Shift (CLS): Measures visual stability. A good CLS score is 0.1 or less.

Next.js includes built-in Web Vitals tracking, and Tekru has developed a custom script to collect and send this data to our own API, enabling us to monitor and improve our website’s performance.

Here’s a basic example of how you can set up Web Vitals tracking in your Next.js application:

import { reportWebVitals } from "next/app";

export function reportWebVitals(metric: any) {
  // Example of reporting a metric to an external service
  fetch("/api/analytics", {
    method: "POST",
    body: JSON.stringify(metric),
  });
}
Language:typescript

Sitemap.xml

A sitemap is an XML file that lists all the pages on your website, helping search engines like Google understand your site’s structure and index it more efficiently.

Tekru uses a custom script to automatically generate a sitemap.xml file whenever we deploy changes to our website. Here’s a simple example of how to create a sitemap in Next.js:

import fs from "fs";
import path from "path";
import { GetServerSideProps } from "next";

const Sitemap = () => {
  return null;
};

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const baseUrl = process.env.NEXT_PUBLIC_PUBLIC_URL;
  const staticPages = fs
    .readdirSync(path.join("pages"))
    .filter((staticPage) => {
      return ![
        "api",
        "_app.tsx",
        "_document.tsx",
        "_error.tsx",
        "sitemap.xml.tsx",
      ].includes(staticPage);
    })
    .map((staticPagePath) => {
      return `${baseUrl}/${staticPagePath.replace(".tsx", "")}`;
    });

  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
    ${staticPages
      .map((url) => {
        return `<url><loc>${url}</loc></url>`;
      })
      .join("")}
  </urlset>`;

  res.setHeader("Content-Type", "text/xml");
  res.write(sitemap);
  res.end();

  return {
    props: {},
  };
};

export default Sitemap;
Language:typescript

With this approach, your sitemap.xml will always be up-to-date with the latest pages on your website, making it easier for search engines to index your content.

Robots.txt

The robots.txt file is a text file that instructs search engine crawlers which pages or sections of your website should or shouldn’t be crawled.

In Next.js, you can create a custom robots.txt file by creating a new page named robots.txt.tsx in the pages directory. Here’s an example:

import { GetServerSideProps } from "next";

const Robots = () => {
  return null;
};

export const getServerSideProps: GetServerSideProps = async ({ res }) => {
  const content = `
    User-agent: *
    Disallow: /api/
    Allow: /

    Sitemap: ${process.env.NEXT_PUBLIC_PUBLIC_URL}/sitemap.xml
  `;

  res.setHeader("Content-Type", "text/plain");
  res.write(content);
  res.end();

  return {
    props: {},
  };
};

export default Robots;
Language:typescript

With this robots.txt setup, you can control the visibility of your website’s content to search engines and ensure that only the relevant pages are indexed.

Conclusion

SEO is essential for any website looking to succeed in the competitive online landscape. By following these best practices, you can ensure that your Next.js 14 application is optimized for search engines, providing a better user experience and attracting more organic traffic.

At Tekru, we are experts in Next.js development and SEO optimization. If you need assistance with your website or want to learn more about how we can help you improve your online presence, contact us today.