2 snippets across 2 stacks - HTML & CSS, React
<title>Page Title - Site Name</title><head>
<title>Pricing Plans - CloudDash</title>
</head>Note The title appears in browser tabs, bookmarks, and search engine results. Keep it under 60 characters. Place the specific page name before the site name for better scannability.
// Render <title>, <meta>, <link> directly in components
function Page() {
return (
<>
<title>Page Title</title>
<meta name="description" content="..." />
{/* page content */}
</>
);
}function ProductPage({ product }) {
return (
<article>
<title>{product.name} | ShopApp</title>
<meta name="description" content={product.summary} />
<link rel="canonical" href={`/products/${product.slug}`} />
<h1>{product.name}</h1>
<p>{product.description}</p>
<strong>${product.price}</strong>
</article>
);
}
// React hoists these tags into the <head> automaticallyNote In React 19, metadata tags rendered inside components are automatically hoisted into the document <head>. This eliminates the need for third-party helmet libraries for basic metadata management. Works with SSR and client rendering.