Blog details

How to Optimize SEO for Your Next.js Application: A Step-by-Step Approach?

By Kaimul

January 8, 2023 6 min read

Learn how SEO (Search Engine Optimization), is a set of practices and techniques, used to optimize websites and web applications to rank better in search engine results.

SEO (Search Engine Optimization) is a set of practices and techniques used to optimize websites and web applications to rank better in search engine results and increase the website visibility online.

we are familiar with different kind of SEO. Such as On-page Seo , Off-page Seo and Technical Seo. In this discussion, we’ll focus on On-Page SEO, which we as developers can control from the outset when building a website. Key areas to optimize for On-Page SEO include:

Select keywords
Place the keywords in Metadata and content
Metadata
Image optimised
Internal and External link
Robots text
Sitemap

1. Start with keyword research

When we make a website, the first thing we need to decide is which keywords we're going to use throughout our website, because these are the keywords customers will use to look for our website on the internet.

Let's say you are making a website that will provide training for security guard courses and first aid training. Therefore, you can easily identify the keywords that should be Security Courses | Security Certificate | First Aid Training | First Aid, which you are going to use throughout your website.

2. Place the keywords in Metadata and content

Now, we will place all selected keywords in the metadata title, metadata description, heading (h1), h2, paragraphs, URLs, image alt text, and image file names. We need to make sure that we place the keywords naturally, avoiding keyword stuffing. for example-

Metadata Title and Description:
- Title: Make your title catchy and include your main keyword, but keep it short - no more than 60 characters. This helps both readers and search engines understand what your page is about.
- Description: Write a concise summary that includes the primary keyword and a secondary keyword if possible. Aim for 150-160 characters.
```
tsx
export const metadata = {
  title:
    "NSW Security Training Course in Sydney | Western Sydney Vocational Training Academy",
  description:
    "Explore our comprehensive security training courses in Sydney. Contact us for enrollment, schedules, or related inquiries.",
};
```
Headings (H1, H2):
- H1: Use the primary keyword in the H1 tag. Make sure it accurately reflects the content of the page.
- H2: Use secondary keywords in H2 tags to break up the content and improve readability.
```
tsx
 <h1>Best Security Training Course in Sydney</h1>
 <h2>Why Choose Our Security Training?</h2>
```

Paragraphs:

Integrate keywords naturally within the text. Focus on readability and context. Avoid overusing keywords (keyword stuffing).

tsx
<p>
  At Western Sydney Vocational Training Academy, we offer the best NSW
  Security Training Course in Sydney. Our comprehensive program is designed
  to equip you with the essential skills and knowledge needed for a
  successful career in security. Whether you’re looking to start a new career
  or enhance your existing skills, our expert instructors and hands-on
  training approach ensure you receive top-notch education. Contact us today
  to learn more about enrollment, course schedules, and how we can help you
  achieve your career goals.
</p>

URL:
- Include the primary keyword in the URL. Keep it short and descriptive.
https://www.wsvta.nsw.edu.au/courses/nsw-security-licence-training-course
Image Alt Text and File Name:
- Alt Text: Describe the image using the primary keyword. Ensure it is relevant to the image.
- File Name: Name the image file with the primary keyword before uploading it.
```
tsx
<Image
  src="/security-licence-training-course.webp"
  alt="Security Training Course in Sydney"
/>
```

3. Metadata

Next.js provides powerful metadata API for SEO optimization. We can implement metadata in two ways:

Static metadata
Dynamic metadata

app/courses/nsw-security-licence-training-course/page.tsx
// Static Metadata
const title = "NSW Security Training Course in Sydney | Western Sydney Vocational Training Academy",
const description ="Explore our comprehensive security training courses in Sydney. Contact us for enrollment, schedules, or related inquiries.",
const URL = "https://www.example.com.au/courses/nsw-security-licence-training-course";

export const metadata: Metadata = {

  title: {
    absolute: title
  },
  description: description,
  alternates: {
    canonical: URL,
  },

  openGraph: {
    title: title,
    description: description,
    images: "/security-licence-training-course.webp",
    url: URL,
    siteName: "Western Sydney Vocational Training Academy",
    locale: "en_AU",
    type: "website",
  },

  robots: {
    index: true,
    follow: true,
    googleBot: {
      index: true,
      follow: true,
      "max-video-preview": -1,
      "max-image-preview": "large",
      "max-snippet": -1,
    },
  },
  twitter: {
    title: title,
    description: description,
    card: "summary_large_image",
    images: ['https://www.example.com.au/security-licence-training-course.webp']
  },

};

app/(pages)/blog/[slug]/page.tsx
//Dynamic metadata

import { Post, getBlogPosts } from "@/lib/blog";
import { Metadata, ResolvingMetadata } from "next";

type ParamsProps = {
  params: Promise<{ slug: string }>;
};

const BASE_URL = "https://kaimul.dev/";

export async function generateMetadata(
  props: ParamsProps,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const params = await props.params;
  const allPosts = await getBlogPosts();
  const slug = params.slug;


  const post = allPosts.find((post) => post.slug === slug);


  return {
    title: {
      absolute: `${post?.metadata.title}`,
    },
    description: `${post?.metadata.description}`,
    alternates: {
      canonical: `${BASE_URL}posts/${post?.slug}`,
    },
    openGraph: {
      title: post?.metadata.title,
      images: `${post?.metadata.image}`,
      url: `${BASE_URL}posts/${post?.slug}`,
       siteName: "Western Sydney Vocational Training Academy",
    locale: "en_AU",
    type: "website",
    },
    twitter: {
      title: post?.metadata.title,
      card: "summary_large_image",
    },
  };
}

4. Implement XML Sitemap

Sitemap to help search engines discover your content more efficiently. For smaller application we can create static sitemap.xml file and place it the root of app directory or in the public folder.

tsx
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>[https://example.com](https://acme.com/).au</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>yearly</changefreq>
    <priority>1</priority>
  </url>
  <url>
    <loc>[https://example.com.au/about](https://acme.com/about)</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
  <url>
    <loc>[https://example.com.au/blog](https://acme.com/blog)</loc>
    <lastmod>2023-04-06T15:02:24.021Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.5</priority>
  </url>
</urlset>

For big application we can generate sitemap using code. We will create sitemap.ts or sitemap.js file and place it in the root of app directory.

tsx
import { getAllPosts, getAllCategories } from "@/sanity/lib/dataFetched";

let baseUrl = "https://example.com.au";

export default async function sitemap() {
  const posts = await getAllPosts();
  const categories = await getAllCategories();

  let blogs = posts.map((post) => ({
    url: `${baseUrl}/${post.slug}`,
    lastModified: post.date,
  }));
  let category = categories.map((item) => ({
    url: `${baseUrl}/blogs/${item.slug}`,
    lastModified: new Date().toISOString().split("T")[0],
  }));

  let routes = [
    "",
    "/blogs",
    "/about",
    "/contact",
    "/courses",
    "/courses/securityTraining",
    "/courses/firstAid",
  ].map((route) => ({
    url: `${baseUrl}${route}`,
    lastModified: new Date().toISOString().split("T")[0],
  }));

  return [...routes, ...category, ...blogs];
}

5. Add Robots.txt

Create a robots.txt file in your public directory to guide search engine crawlers:


User-agent: *
Allow: /
Sitemap: https://example.com.au/sitemap.xml

we can generate robots.txt using code. We need create robots.ts file and place it in the root of app directory.

tsx
import { MetadataRoute } from "next";

export default function robots(): MetadataRoute.Robots {
  return {
    rules: {
      userAgent: "*",
      allow: "/",
      disallow: [
        "/upcoming/",
        "/sign-in/",
        "/user-profile/",
        "/faq/",
        "/privacy-policy/",
        "/terms-condition",
      ],
    },
    sitemap: "https://example.com.au/sitemap.xml",
  };
}

6.Optimize Images

Use Next.js Image component for automatic image optimization:

jsx
import Image from "next/image";

export default function OptimizedImage() {
  return (
    <Image
      src="/your-image.jpg"
      alt="Descriptive alt text"
      width={800}
      height={600}
      priority={true}
    />
  );
}

Home