SEO and Metadata
Relevant source files
The following files were used as context for generating this wiki page:This document outlines the Search Engine Optimization (SEO) and metadata management strategies employed within the TAF-SAF project. The project is built with Next.js, which provides a robust framework for handling metadata through its App Router. The primary mechanism for managing SEO-related information is the static metadata object exported from layout and page components.
The scope of this document covers the global metadata configuration, image optimization for SEO, font loading strategies, and best practices for links. All information is derived directly from the project's source code, which leverages Next.js conventions for a foundational SEO setup.
Global Metadata
The primary site-wide metadata is defined in the root layout file. This sets the default title and description for all pages in the application, which can be overridden by individual pages if needed.
Sources: src/app/layout.tsx
Metadata Object
A metadata object is exported from src/app/layout.tsx to define the application's default HTML metadata. This is a core feature of the Next.js App Router for SEO.
// src/app/layout.tsx:16-19
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
Sources: src/app/layout.tsx:16-19
The following table details the properties configured in the global metadata object.
| Property | Value | Description |
|---|---|---|
title | "Create Next App" | The default title that appears in the browser tab and search engine results. |
description | "Generated by create next app" | The default description for the site, used by search engines for snippets. |
Sources: src/app/layout.tsx:17-18
HTML Language Attribute
The root layout also sets the lang attribute on the <html> tag to "en", signaling to browsers and search engines that the primary language of the site is English.
// src/app/layout.tsx:27-33
export default function RootLayout(...) {
return (
<html lang="en">
...
</html>
);
}
Sources: src/app/layout.tsx:27-33
The diagram below illustrates how the metadata object and lang attribute from the root layout are processed by Next.js to generate the final HTML <head>.
This diagram shows the flow from the RootLayout component to the final rendered HTML output.
Sources: src/app/layout.tsx:16-33
On-Page SEO Elements
The main page of the application (src/app/page.tsx) contains several elements crucial for on-page SEO, particularly concerning images and links.
Sources: src/app/page.tsx
Image Optimization
The project uses the next/image component for handling images, which provides automatic optimization, resizing, and modern format delivery. This is critical for performance and Core Web Vitals, which are important SEO ranking factors.
Key SEO-related attributes used with the Image component are:
| Attribute | Example Value | Purpose |
|---|---|---|
src | "/next.svg" | The path to the image file. |
alt | "Next.js logo" | Provides alternative text for screen readers and search engines, describing the image's content. |
width | 180 | Specifies the intrinsic width of the image, preventing layout shift. |
height | 38 | Specifies the intrinsic height of the image, preventing layout shift. |
priority | true | When true, the image is considered high-priority and preloaded, improving Largest Contentful Paint (LCP). |
Sources: src/app/page.tsx:9-15, src/app/page.tsx:40-46
An example from the home page shows the use of the priority prop for the main logo, indicating its importance for the initial page load.
// src/app/page.tsx:9-15
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
Sources: src/app/page.tsx:9-15
Some images used for decorative purposes have aria-hidden set to true to hide them from assistive technologies, which is a correct accessibility practice.
Sources: src/app/page.tsx:71-77, src/app/page.tsx:82-88, src/app/page.tsx:93-99
Link Attributes
External links on the page correctly use rel="noopener noreferrer" along with target="_blank". This is a security best practice that also has minor SEO implications, preventing the new page from accessing the window.opener object and preventing the referral information from being passed.
// src/app/page.tsx:36-48
<a
...
href="https://vercel.com/new?..."
target="_blank"
rel="noopener noreferrer"
>
...
</a>
Sources: src/app/page.tsx:36-48, src/app/page.tsx:49-58, src/app/page.tsx:68-79, src/app/page.tsx:80-91, src/app/page.tsx:92-103
Performance and Font Optimization
Performance is a key component of technical SEO. The project utilizes next/font to optimize font loading, which helps improve Core Web Vitals like Cumulative Layout Shift (CLS) and First Contentful Paint (FCP).
Sources: README.md:13-14, src/app/layout.tsx:2, src/app/layout.tsx:6-14
Font Loading with next/font
The Geist and Geist_Mono fonts are loaded locally using next/font/google. This automatically self-hosts the fonts, eliminating an extra network request to Google's servers. The fonts are loaded as CSS variables (--font-geist-sans, --font-geist-mono) and applied to the <body> tag.
// src/app/layout.tsx:6-14
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
Sources: src/app/layout.tsx:6-14
The CSS variables are then used in the application's global stylesheet and directly on elements.
/* src/app/globals.css:8-9 */
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
Sources: src/app/globals.css:8-9
This process is visualized below.
This diagram shows how next/font optimizes font delivery for better performance.
Sources: src/app/layout.tsx:2-14, 29, src/app/globals.css:8-9
Summary
The TAF-SAF project establishes a solid SEO foundation by leveraging built-in Next.js features. It defines global metadata in the root layout, uses the next/image component for optimized and accessible images, and implements performance-enhancing font strategies with next/font. While the current implementation covers basic SEO principles effectively, it relies on default values from create-next-app which should be updated with project-specific content. The structure is in place to easily extend this with more advanced SEO features like dynamic sitemaps, structured data (JSON-LD), and page-specific metadata overrides.
Sources: src/app/layout.tsx, src/app/page.tsx, README.md