Meta Descriptions on Custom / Headless - Technical SEO Playbook

Beginner Recommended

Static HTML

Standard.

1

Tag

1

<meta name="description" content="My page description">

Intermediate Recommended

React (Vite)

Helmet.

1

Implementation

1

<Helmet>
  <meta name="description" content="My description" />
</Helmet>

Easy Recommended

Next.js

Metadata API.

1

Implementation

1

export const metadata = {
  description: 'My description'
}

Easy Recommended

Vue / Nuxt

useSeoMeta.

1

Implementation

1

useSeoMeta({
  description: 'My description'
})

Easy Recommended

SvelteKit

Head.

1

Implementation

1

<svelte:head>
  <meta name="description" content="My description" />
</svelte:head>

Easy Recommended

Astro

Props.

1

Implementation

1

<meta name="description" content={description} />

Easy Recommended

Backend MVC

Rails/Django/Laravel.

1

Implementation

1

Use the same Block/Yield pattern as Title Tags.

2

Blade: <meta name="description" content="@yield('desc')">

Static HTML

Tag

React (Vite)

Implementation

Next.js

Implementation

Vue / Nuxt

Implementation

SvelteKit

Implementation

Astro

Implementation

Backend MVC

Implementation

Verification Checklist