SEO

Need help? Ask us on Discord! (You need to purchase the pro plan!↗)

Configure Global SEO Metadata

In src/app/layout.tsx, you can define global SEO metadata using Next.js's metadata object. This will apply across all pages of your application. While this sets a default, you should consider updating it if specific pages require unique metadata.

Default SEO Metadata Configuration

You can see how to configure global SEO metadata by looking at the default configuration in src/app/layout.tsx.

Social Sharing and Structured Data

To enhance how your website appears in search results and improve social sharing, you can add structured data using Google's supported Schema Types (opens in a new tab) (thanks to @AareGeorg (opens in a new tab) for pointing this out). This helps Google understand your content better and may result in rich snippets in search results.

Example: Organization Structured Data

By visiting Google's supported Schema Types (opens in a new tab), you will find different schema types to use based on the content of your page.

You can embed structured data directly in your layout.tsx to provide details about your page (this example is for a NewsArticle Schema (opens in a new tab)):

src/app/layout.tsx

<head>
	<script type="application/ld+json">
		{`
      {
        "@context": "https://schema.org",
        "@type": "NewsArticle",
        "headline": "Title of a News Article",
        "image": [
          "https://example.com/photos/1x1/photo.jpg",
          "https://example.com/photos/4x3/photo.jpg",
          "https://example.com/photos/16x9/photo.jpg"
        ],
        "datePublished": "2024-01-05T08:00:00+08:00",
        "dateModified": "2024-02-05T09:20:00+08:00",
        "author": [{
            "@type": "Person",
            "name": "Jane Doe",
            "url": "https://example.com/profile/janedoe123"
          },
          {
            "@type": "Person",
            "name": "John Doe",
            "url": "https://example.com/profile/johndoe123"
          }
        ]
      }
    `}
	</script>
</head>

Types of Structured Data

Different schema types can be used depending on the content of your pages:

Organization Schema: Provides details about your company.
Product Schema: Describes products with information like price, availability, and reviews.
Breadcrumb Schema: Helps search engines understand the structure and hierarchy of your site.
Local Business Schema: Offers details about your business location, contact info, and operating hours.

For more schema types, visit Google's supported schema types (opens in a new tab).

Server Component by Default

The landing page of boilerpro-frontend (src/app/page.tsx) is written in Next.js using Server Components (opens in a new tab).

Server-side rendering is beneficial for SEO because it allows the content to be fully rendered and available to search engine crawlers, leading to better indexing and search rankings.

If you need interactivity on the landing page, you have to convert it to a Client Component (opens in a new tab).

To do that, add the "use client" directive at the top of the page:

src/app/page.tsx

"use client";
 
import Link from "next/link";
import { AiFillCloseCircle } from "react-icons/ai";
import { HiBars3 } from "react-icons/hi2";
import { BiLogIn, BiUser } from "react-icons/bi";
import {
	features,
	navigation,
	faqs,
	footerNavigation,
	testimonials,
	builtWith,
} from "./contentSections";
// [...]

Structured layout for the landing page

The landing page is structured by using the tags <main>, header, and footer. The main tag is used to wrap the main content of the page, the header tag is used to wrap the header of the page and the footer tag is used to wrap the footer of the page. This is good for search engines to understand the structure of the page.

Files Stripe