SEO
Need help? Ask us on Discord! (You need to purchase the pro plan!↗)
Ask us on DiscordConfigure 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 schema.org (opens in a new tab). This helps search engines understand your content better and may result in rich snippets in search results.
Example: Organization Structured Data
You can embed structured data directly in your layout.tsx
to provide details about your organization:
<head>
<script type="application/ld+json">
{`
{
"@context": "https://schema.org",
"@type": "Organization",
"name": "BoilerPro",
"url": "https://boilerpro.co",
"logo": "https://boilerpro.co/logo.png",
"sameAs": [
"https://www.facebook.com/boilerpro",
"https://twitter.com/boilerpro",
"https://www.linkedin.com/company/boilerpro"
]
}
`}
</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 Schema.org (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:
"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.