SEO NPM Package for React Guide 2026: Power SEO Tool (Free & Open Source)

An SEO npm package for React is a library that lets components control the page metadata that search engines and social platforms read. This metadata includes titles, meta descriptions, canonical URLs, Open Graph tags, robots directives, and structured data. React renders inside a single root element, so client-rendered apps cannot edit the document <head> on their own. For that reason, every client-rendered project benefits from an SEO npm package for React.

We've built enough React apps at CyberCraft Bangladesh to know the pain first-hand. You launch, the site looks great, and a month later Search Console shows almost no clicks and half the pages not indexed. This guide comes from fixing that problem repeatedly, and it explains how each option works, how to add SEO in React step by step, and how to compare the choices.

You may also see the same idea called a React SEO package, a React SEO npm package, an SEO library for React, or an npm package for React SEO. All of these names describe a tool that handles React SEO optimization from inside your components.

Key Takeaways

• What it is: an SEO npm package for React manages titles, meta descriptions, canonical URLs, Open Graph tags, robots directives, and JSON-LD from inside components.

• Why it's needed: an SEO npm package for React fills a real gap. Client-rendered apps mount in one root <div>, but SEO tags live in the <head>. Therefore, every route shows the same static metadata unless a package (or React 19's native hoisting) changes it.

• Package types: every React SEO package falls into one of four types: head managers (react-helmet, react-helmet-async), framework-specific packages (next-seo), modular toolkits (Power-SEO), and React 19's built-in metadata support.

• How to choose: when you pick an SEO npm package for React, match it to your framework in most cases. Also prefer one that covers structured data, canonical URLs, and sitemaps if you need them.

• First priority: start with unique titles, descriptions, canonical URLs, and structured data on key pages.

• Key numbers: one sitemap file holds up to 50,000 URLs and 50 MB uncompressed. Google's crawler reads the first 15 MB of an HTML file. Search Console keeps 16 months of performance data.

What Types of Tools Fall Under React SEO Tools?

React SEO tools fall into a few groups. Each group covers one part of React technical SEO:

• React meta tags package: sets titles, descriptions, and other head tags.

• React Open Graph package: controls link previews on social platforms.

• React canonical URL package: declares the preferred URL for each page.

• React robots meta package: sets index, follow, and snippet directives.

• React structured data package: outputs JSON-LD for rich results.

• React sitemap package: builds the XML file that lists your URLs.

• React SEO components: ready-made building blocks, such as <SEO> and <Canonical>, that wrap several of these jobs.

A React SEO toolkit combines several of these groups. A single React technical SEO package, in contrast, usually handles only one or two. The same ideas apply to any React website SEO tools you evaluate, and to SEO packages for JavaScript React projects in general, including Vite, Gatsby, and Remix setups.

When Did the Main React SEO Standards Appear?

Most of the tags an SEO npm package for React manages are less than two decades old. Google, Yahoo, and Microsoft announced the canonical tag in February 2009, and Facebook launched Open Graph in April 2010. React 19 became stable on December 5, 2024. The table below lists the key dates in order.

Dates come from the public announcements and documentation of Google, the W3C, Meta, Vercel, and the React team. Verify any date you plan to quote elsewhere against the original source.

How This Guide Was Put Together

Evaluation criteria: We compared each SEO npm package for React on seven points: head tag control, Open Graph and Twitter Card support, canonical handling, JSON-LD support, TypeScript support, bundle size, and SSR compatibility.

Sources and tools: The comparison table comes from each project's public documentation and package pages, reviewed on September 14, 2026. Meanwhile, the code examples use the documented Power-SEO API and are shown as written in that documentation. They were not run against a fixed matrix of React or Next.js versions for this article.

Hands-on experience: Beyond the documentation, the advice in this guide reflects how we work. We use Power-SEO in production on the CyberCraft Bangladesh website, where it handles metadata, structured data, and sitemaps for every page. We have also fixed metadata problems on real client sites. Where a point comes from that work rather than from documentation, we say "in our experience." Those points are observations, not controlled tests.

Scope and limitations:

• The table shows documented features, not benchmarks. For example, bundle size and rendering behavior were not measured for every package.

• Rankings depend on content quality, site authority, and crawl behavior. Thus, no package can guarantee results.

• Features change between releases, so check current documentation before you choose.

Assumptions: This guide assumes a React app that renders on the client or uses a server-rendering framework. Readers on other stacks may need to adapt the steps.

Disclosure: Power-SEO is developed by CyberCraft Bangladesh, the company that published this guide. It is one open source React SEO package among several, and it also runs on the CyberCraft Bangladesh website. Weigh the Power-SEO comparisons with that in mind, and check every claim against the packages' own documentation.

1. Why Do React Apps Struggle With SEO?

Client-rendered React apps struggle with SEO because they mount inside a single empty root <div>. Titles, meta descriptions, and Open Graph tags, however, live in the document <head>, outside React's component tree. Without a tool that writes to the head, every route shows the same static metadata from index.html. A well-chosen SEO npm package for React closes that gap.

A typical client-rendered React app mounts everything inside one empty <div id="root">. So setting a page title from inside a component does nothing by default. The browser tab keeps showing the static title from index.html. We still see this on new projects, and it is usually the first thing we notice when we open a site's source.

Google can run JavaScript, and it has used an evergreen, Chromium-based renderer since May 2019. According to Google's JavaScript SEO documentation, however, pages go through crawling, rendering, and indexing as separate stages, and a page can wait in a render queue. Metadata that exists only after client-side rendering may therefore be seen later than metadata in the initial HTML. Other crawlers, including many social preview bots, may not run JavaScript at all.

This causes several common problems:

• Duplicate or missing titles make it harder for crawlers to tell pages apart. In addition, search results commonly cut titles at roughly 50 to 60 characters, so each title should be unique and short.

• Missing Open Graph tags produce blank or generic link previews on social platforms. Facebook introduced the Open Graph protocol in April 2010, and most major social and messaging platforms now read it.

• No canonical URL lets the same content be indexed under several URLs.

• No structured data (JSON-LD) makes a page less likely to qualify for rich results in Google. It also gives answer engines less machine-readable context. According to Google Search Central, JSON-LD is the recommended format for structured data. Together, these points form the basis of AEO (Answer Engine Optimization) and GEO (Generative Engine Optimization).

An SEO npm package for React gives components a safe, declarative way to manage these tags. As a result, React SEO optimization becomes a matter of configuration instead of hand-written strings.

Real-World Example: A React Launch That Did Not Get Indexed

Problem: We have run into this pattern repeatedly. A site launches and looks correct in the browser. A month later, though, Google Search Console shows almost no impressions, and many pages are reported as not indexed. The first time we saw it, the site looked perfect in the browser, so we assumed the problem was elsewhere. Only after we viewed the page source and compared several routes did we see that every route shared the same static title and description from index.html. There was also no canonical URL or structured data.

Approach: Here is the process we follow now. We pair an SEO npm package for React with four steps, and it is the same approach we use on our own site, where Power-SEO handles metadata, structured data, and sitemaps for every page:

1. Set a site-wide default title template and description.

2. Next, add a unique title, description, and canonical URL to every route.

3. Then add Open Graph images and JSON-LD to key pages.

4. Finally, generate and submit a sitemap.

Results: Outcomes differ from site to site, so we do not quote a single figure here. To measure your own, record indexed pages and impressions in Search Console before the change. Search Console keeps 16 months of performance data, so you can compare a full year-over-year window. Then compare the same metrics several weeks later, using the same date range. In our experience, the "not indexed" list shrinks first, and impressions follow more slowly.

Lessons learned: In most cases, missing per-route metadata and missing canonical tags are the first things to check. Typos in raw-string settings are also easy to miss. For this reason, typed APIs help. We have seen an invalid robots directive sit unnoticed on a live client site until rankings changed. In our experience, a typed React SEO package catches that kind of mistake at build time instead.

What We Check Before and After Every Launch

This is the routine we walk through on each React project. It takes little time, and it catches most metadata problems before Google does.

1. View the page source: We open "view source" on three or four different routes, not just the home page, and compare their <title> and description tags.

2. Inspect the rendered HTML: We use the URL Inspection tool in Search Console to see what Google renders for a key page.

3. Test the shared preview. We paste a page URL into a link preview or social debugger tool to confirm the Open Graph image and title appear.

4. Validate structured data: We run key pages through Google's Rich Results Test to confirm the JSON-LD parses without errors.

5. Fetch the sitemap: We open the sitemap URL directly and confirm it lists current pages, then submit it in Search Console.

6. Recheck after several weeks: We come back to Search Console after a few weeks, because indexing changes are slow.

We run steps 1 to 5 before sharing a launch link. Step 6 is where patience matters most. Teams often change things again after a week and lose the ability to tell what worked.

2. What Features Does an SEO npm Package for React Need?

A useful SEO npm package for React needs seven capabilities: head tag control, Open Graph and Twitter Card support, canonical URL handling, JSON-LD structured data, TypeScript support, a small bundle size, and SSR compatibility. The more of these one package covers, the fewer extra libraries a project needs.

1. Head tag control: set the title, meta description, and other tags from any component. This is the core job of a React meta tags package.

2. Open Graph and Twitter Card support: get correct previews when links are shared. A 1200 x 630 pixel image (a 1.91:1 ratio) is the commonly recommended size for large link previews, and about 600 x 315 pixels is the commonly cited minimum.

3. Canonical URL handling: declare the preferred URL in a simple way.

4. Structured data (JSON-LD): add rich snippets and machine-readable page context.

5. TypeScript support: catch typos in SEO settings at build time.

6. Small bundle size: avoid unnecessary dependencies. Bundle size matters for SEO in a second way, because Google's documentation says Googlebot crawls only the first 15 MB of an HTML file.

7. SSR compatibility: remember that Next.js, Remix, and Gatsby render differently.

3. What Types of React SEO Packages Exist?

Four types of SEO npm package for React exist: head managers such as react-helmet and react-helmet-async, framework-specific packages such as next-seo, modular toolkits such as Power-SEO, and React 19's native metadata hoisting. Each one covers a different scope. Some only swap basic tags, while others add structured data, sitemaps, and tracking.

Head managers such as react-helmet and react-helmet-async let components write into the document head. Little maintenance has gone into react-helmet in recent years. Meanwhile, react-helmet-async fixed server-rendering issues. Still, both are mainly head managers. They offer no React structured data package features, hreflang helpers, or typed robots directives, so you pass raw strings.

Framework-specific SEO packages such as next-seo are built around Next.js conventions. Since version 13.2 (February 2023), Next.js also offers a built-in Metadata API. The App Router that uses it became stable in Next.js 13.4 in May 2023. It covers many of the same needs in App Router projects.

Modular SEO toolkits split the work into separate packages for meta tags, schema, sitemaps, and tracking. Power-SEO is one MIT-licensed example of an open source React SEO package. According to its documentation, it is a set of 17 modular npm packages that you install individually. One of them is a schema package with 23 typed schema.org builders. The examples below use its API to show a typed, component-based React SEO toolkit in action.

React 19 native metadata is the fourth option. React 19, released as stable on December 5, 2024, can hoist <title>, <meta>, and <link> tags into the document head. This covers basic cases, so it reduces the need for an SEO npm package for React in simple projects. However, it does not provide defaults, canonical helpers, or structured data builders.

4. How Do You Use an SEO npm Package for React?

If you are wondering how to add SEO in React, the process is the same for most tools. To use an SEO npm package for React, first install it and wrap the app in a defaults component. Then add per-page meta tags and declare canonical URLs. After that, add hreflang for multilingual sites, add JSON-LD, generate a sitemap, and check results in Search Console. This React SEO integration takes eight steps, and each one below includes working code. We have followed these same steps on our own site.

Step 1: Install the SEO npm Package for React

npm install @power-seo/react @power-seo/core

Step 2: Set Site-Wide Defaults

Most libraries offer a root-level wrapper for defaults, and any SEO npm package for React worth using should too. Pages inherit these values unless they set their own. Because of this, a missing image or site name falls back instead of rendering a blank tag. In our experience, this one wrapper prevents most of the blank link previews we used to find during launch checks.

import { DefaultSEO, SEO } from '@power-seo/react';

function App() {
  return (
    <DefaultSEO
      titleTemplate="%s | My Site"
      defaultTitle="My Site"
      description="The best site on the internet."
      openGraph={{ type: 'website', siteName: 'My Site' }}
      twitter={{ site: '@mysite', cardType: 'summary_large_image' }}
    >
      <Router>
        <Routes />
      </Router>
    </DefaultSEO>
  );
}

Step 3: Add Per-Page Meta Tags

Next, each page sets its own title, description, canonical URL, and social tags. These React SEO components do the work of a meta tags package and an Open Graph package at once. Search results commonly cut meta descriptions at around 150 to 160 characters. Keep yours within that range.

import { SEO, Robots } from '@power-seo/react';

export function ProductPage({ product }) {
  return (
    <>
      <SEO
        title={product.name}
        description={product.summary}
        canonical={`https://mystore.com/products/${product.slug}`}
        openGraph={{
          type: 'website',
          images: [{ url: product.image, width: 1200, height: 630, alt: product.name }],
        }}
        twitter={{ cardType: 'summary_large_image' }}
      />
      <Robots index={true} follow={true} maxImagePreview="large" maxSnippet={160} />
      <main>{/* your page content */}</main>
    </>
  );
}

In a TypeScript-first API, values like maxImagePreview are typed as 'none' | 'standard' | 'large'. As a result, an invalid directive fails at build time instead of silently shipping. This is the main benefit of a typed React robots meta package, and it is the reason we favor typed APIs after seeing a robots typo go live on a client site. Google added the max-snippet, max-image-preview, and max-video-preview directives in September 2019, so they are well established.

Step 4: Declare Canonical URLs

Duplicate content is common in single-page apps. One page can often be reached through several URL patterns, such as a trailing slash or tracking parameters. A canonical tag tells search engines which URL you prefer. Google, Yahoo, and Microsoft announced support for the tag in February 2009. Google's canonicalization documentation calls canonicals a strong hint, not a directive. So search engines may occasionally pick a different URL. A React canonical URL package makes the tag a one-line change.

import { Canonical } from '@power-seo/react';

<Canonical url="https://example.com/blog/react-seo-guide" />

In most cases, this merges example.com/page, example.com/page/, and example.com/page?ref=twitter into a single indexed URL.

Step 5: Add Hreflang for Multilingual Sites

Hreflang tags tell search engines which language version of a page to show to which audience. Google announced support for them in December 2011. According to Google, you can declare alternates in three places: HTML tags, HTTP headers, or a sitemap. Google explains the rules in its guide to localized versions of a page:

import { Hreflang } from '@power-seo/react';

<Hreflang
  alternates={[
    { hrefLang: 'en', href: 'https://mystore.com/en/products/shoes' },
    { hrefLang: 'fr', href: 'https://mystore.com/fr/products/chaussures' },
  ]}
/>

Step 6: Add JSON-LD Structured Data

Structured data is a machine-readable summary of a page. It uses schema.org vocabulary, which Google, Microsoft, and Yahoo launched in June 2011. JSON-LD, the format Google recommends, became a W3C Recommendation on January 16, 2014. Structured data can make a page eligible for rich results. It also gives AI-driven search systems clearer context. Eligibility is not a guarantee, however. Google states that valid markup does not ensure a rich result will appear. In August 2023, for example, Google limited FAQ rich results to well-known government and health sites. Many head managers skip structured data, so a React structured data package such as @power-seo/schema often handles it. This package provides typed schema.org builders and React components:

import { ProductJsonLd } from "@power-seo/schema/react";

<ProductJsonLd
  name="My Product"
  description="Product description"
  url="https://example.com/product"
  brand={{ "@type": "Brand", name: "My Brand" }}
  offers={{
    "@type": "Offer",
    price: "99.99",
    priceCurrency: "USD",
    availability: "https://schema.org/InStock",
  }}
/>

Common schema types include Product, Article, FAQ, BreadcrumbList, JobPosting, and LocalBusiness.

Step 7: Generate a Sitemap

SEO also happens outside the page. A sitemap lists the URLs you want crawled, and a React sitemap package can build it for you. Google introduced sitemaps in June 2005, and Google, Yahoo, and Microsoft adopted a shared protocol in November 2006. Under the sitemaps.org protocol, one sitemap file holds up to 50,000 URLs and 50 MB uncompressed. Larger sites therefore need multiple files, which a sitemap index file can list.

import { generateSitemap } from "@power-seo/sitemap";

export async function GET() {
  const xml = generateSitemap({
    hostname: "https://example.com",
    urls: [
      { loc: "/", priority: 1.0 },
      { loc: "/about", priority: 0.8 },
      { loc: "/products", priority: 0.9 },
    ],
  });
  return new Response(xml, {
    headers: { "Content-Type": "application/xml" },
  });
}

Sitemap generators can also cover image, video, and news extensions. This saves you from building the XML by hand. One caution applies to the priority field: according to Google's sitemap documentation, Google ignores priority and changefreq values, and it uses lastmod only when the dates are consistently accurate. Other search engines may treat these fields differently. Google's guide to building and submitting a sitemap explains how to send the file to Search Console. In our experience, a stale sitemap is one of the easiest problems to miss, so we open the live sitemap URL after every deploy.

Step 8: Measure Results With Tracking and Search Console Data

After you deploy your SEO npm package for React, you need a way to see what changed. Some toolkits include packages for measurement. For example, @power-seo/tracking offers script builders, consent management, and React components for analytics. This one surprised us, because we expected an SEO toolkit to stop at meta tags and schema:

npm install @power-seo/tracking

You can also combine Search Console data with audit results. Packages like @power-seo/search-console and @power-seo/analytics show ranking trends over time. Search Console retains 16 months of performance data, so export key reports if you need a longer history. Allow several weeks before you judge any change, because indexing and ranking updates are not immediate.

5. How Does Each SEO npm Package for React Differ?

Each SEO npm package for React differs mainly in scope. react-helmet and react-helmet-async manage head tags, and next-seo targets Next.js. Power-SEO, in contrast, adds typed schema, hreflang, and sitemap packages. The table compares maintenance, framework support, TypeScript support, structured data, and licensing across these React SEO tools. Features change between releases, so verify current versions before you decide.

6. How Do You Choose an SEO npm Package for React?

Choose an SEO npm package for React by stack and need. Use next-seo or built-in metadata for Next.js, and a framework-agnostic package for Vite, Gatsby, or Remix. If structured data matters, pick a package with schema and sitemap support. For simple sites, React 19's native metadata may be enough. Match the package type to your project:

1. Next.js projects: next-seo or the built-in metadata API is often enough.

2. Vite, Gatsby, Remix, or other setups: a framework-agnostic package avoids a Next.js dependency.

3. Projects that need structured data, hreflang, or sitemaps: look for a package that covers them. Otherwise, plan to combine several libraries.

4. Simple sites: React 19's native metadata support may be sufficient.

People often search for the best SEO npm packages for React, but no single package wins in every project. In practice, the best SEO npm packages for React share three traits. They fit your framework, they cover the tags you actually need, and they are maintained. Use those three points to compare any SEO packages for JavaScript React apps, including open source options and framework-specific ones.

If you are moving off react-helmet, the swap is usually small. In our experience, most migrations take a couple of hours, because you replace each <Helmet> block with the new components and add one defaults wrapper. Larger apps with many custom head tags take longer.

7. What React SEO Best Practices Does an SEO npm Package for React Support?

The most common mistakes are a single static title, missing canonical tags, and no structured data. Others include client-only rendering without SSR, a stale or missing sitemap, and absent Open Graph images. Each one weakens how crawlers and social platforms read a page, and a good SEO npm package for React fixes most of them. These mistakes trip up even experienced teams, ours included. Read this list as React SEO best practices in reverse:

1. Setting the title only in index.html: every route needs its own unique title.

2. Missing canonical tags on paginated or filtered pages: this creates duplicate content.

3. Skipping structured data: you lose eligibility for rich snippets, and answer engines get less context.

4. Client-side-only rendering with no SSR fallback: some crawlers handle JavaScript-heavy pages poorly, and Googlebot reads only the first 15 MB of an HTML file.

5. No sitemap, or a stale one: new pages may take longer to be found, and a single file caps at 50,000 URLs.

6. Ignoring Open Graph images: links shared without an image look blank and get fewer clicks.

Google's own documentation suggests that clear titles, canonical signals, and valid structured data are foundational. In most cases, fixing these gives a React app the largest share of its SEO gains.

Expert Perspective

What Google's documentation says. Google Search Central supports the core reasons for using an SEO npm package for React. It states that JSON-LD is its recommended structured data format. It adds that structured data helps Google understand page content but does not guarantee rich results. Google also describes canonicalization as a signal that search engines weigh, not a command.

What the Open Graph and sitemap standards say. The Open Graph protocol (ogp.me) defines the tags that social platforms read for link previews. The sitemaps.org protocol sets the 50,000 URL and 50 MB limits per file. Both are maintained as public specifications, so they are the best places to confirm details.

8. Glossary of Technical Terms

• SEO npm package for React: a library, installed through npm, that lets React components manage titles, meta tags, canonical URLs, Open Graph tags, and structured data. It is also called a React SEO package or an SEO library for React.

• React SEO toolkit: a set of packages that covers meta tags, schema, sitemaps, and tracking together.

• Head manager: a library that lets components edit tags inside the document <head>.

• Canonical URL: the preferred address of a page when several URLs show the same content.

• Open Graph: a set of meta tags that controls how a link previews on social and messaging platforms.

• JSON-LD: a JSON-based format for embedding structured data in a page. It has been a W3C Recommendation since January 2014.

• Structured data: machine-readable markup, usually schema.org vocabulary, that describes what a page contains.

• Hreflang: an attribute that tells search engines which language or regional version of a page to serve.

• SSR (server-side rendering): the practice of building a page's HTML on the server, so crawlers receive complete markup.

• Client-side rendering (CSR): the practice of building the page in the browser with JavaScript after load.

• Tree-shaking: a build step that removes unused code from a bundle.

• AEO / GEO: Answer Engine Optimization and Generative Engine Optimization, which mean shaping content so AI-driven search systems can understand and cite it.

9. Next Steps

To keep learning about each SEO npm package for React, visit these related sites:

• https://www.npmjs.com/org/power-seo

• https://github.com/CyberCraftBD/power-seo

FAQs About SEO npm Packages for React

What is an SEO npm package for React?

An SEO npm package for React is a library that lets React components manage head tags. These include the title, meta description, canonical URL, Open Graph tags, robots directives, and JSON-LD. As a result, each page can show correct metadata to search crawlers and social platforms, instead of the single static set in index.html.

Why does a client-rendered app need an SEO npm package for React?

A client-rendered React app mounts inside one root <div>, but SEO tags live in the document <head>. An SEO npm package for React bridges that gap, so each route can set its own metadata. React 19, stable since December 5, 2024, now hoists basic tags natively. However, it does not add defaults, canonical helpers, or structured data builders.

How do you add SEO in React?

To add SEO in React, install an npm package for React SEO, wrap your app in a defaults component, and set a unique title, description, and canonical URL on each route. Then add Open Graph tags and JSON-LD to key pages, and generate a sitemap. The eight steps above walk through each stage.

How do you choose an SEO npm package for React in 2026?

There is no single answer. For Next.js App Router projects, next-seo or the built-in Metadata API works well. For Vite, Gatsby, or Remix, or when you need structured data and hreflang in one place, framework-agnostic options like @power-seo/react are worth testing against your needs.

How do you replace react-helmet with a newer SEO npm package for React?

Migration typically means replacing each <Helmet> block with the new package's components, such as <SEO> and <Robots>. You then add a defaults wrapper at the app root. The effort depends on how many pages set custom head tags. It also depends on whether the app uses server rendering.

Do you need a separate async package like react-helmet-async?

It depends on the library. react-helmet-async exists to make react-helmet safe for server rendering. Some newer packages, however, build SSR handling in, so no separate async package is needed. Check each package's documentation to see how it handles server-rendered head tags.

Does an SEO npm package for React support JSON-LD?

Some do. Head managers usually don't, so a React structured data package such as @power-seo/schema often handles JSON-LD. It provides typed builders for schema types like Product, Article, and FAQ. In addition, Google Search Central recommends JSON-LD as the preferred structured data format. Note that since August 2023, Google shows FAQ rich results only for well-known government and health sites.

Will an SEO npm package for React slow down an app?

Usually not, if the package is tree-shakeable and works with server rendering. Still, check its bundle size. Also confirm that its meta and schema output is rendered on the server. Server-rendered tags add no client-side JavaScript for the metadata itself.

How does an SEO npm package for React help with AI search and answer engines?

An SEO npm package for React outputs clean meta tags and well-formed structured data. These give search engines and AI answer systems clearer, machine-readable context about a page. Rich results and AI citations are not guaranteed. Even so, they are hard to earn without this markup, because a system must otherwise infer the page's meaning from raw text.

References

1. Google Search Central, "Introduction to structured data markup in Google Search."

2. The Open Graph protocol.

3. Schema.org, "Getting started."

4. React Blog, "React 19 is now stable" (December 5, 2024).

5. Next.js documentation, "generateMetadata" (Metadata API).