Skip to content
RedwoodSDK
4th April 2025: This is a preview, whilst production-ready, it means some APIs might change

Meta Data

React 19 introduced a more streamlined approach to managing document metadata. In RedwoodSDK, you can leverage these conventions to easily add and manage meta tags for SEO, social sharing, and other purposes directly within your components.

Title and Meta Tags

Meta tags are directly built-in to React 19, with <title and <meta> component:

import React from "react";


export default function ProductPage() {
  return (
    <>
      <title>Product Name</title>
      <meta name="description" content="This is a description of our product" />
      <meta name="keywords" content="product, redwood, react" />


      <h1>Product Name</h1>
      {/* Rest of your component */}
    </>
  );
}

When this component renders, React will automatically handle updating the document’s <head> section.

Complete SEO Setup

Here’s a more comprehensive example including Open Graph and Twitter card meta tags:

import React from "react";


export default function BlogPostPage({ post }) {
  const { title, description, image, publishDate, author } = post;


  return (
    <>
      {/* Basic Meta Tags */}
      <title>{title} | My Blog</title>
      <meta name="description" content={description} />


      {/* Open Graph / Facebook */}
      <meta property="og:type" content="article" />
      <meta property="og:title" content={title} />
      <meta property="og:description" content={description} />
      <meta property="og:image" content={image.url} />
      <meta property="article:published_time" content={publishDate} />
      <meta property="article:author" content={author.name} />


      {/* Twitter */}
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={title} />
      <meta name="twitter:description" content={description} />
      <meta name="twitter:image" content={image.url} />


      {/* Canonical URL */}
      <link rel="canonical" href={`https://mysite.com/blog/${post.slug}`} />


      {/* Page Content */}
      <article>
        <h1>{title}</h1>
        {/* Rest of your blog post content */}
      </article>
    </>
  );
}

Further Reading