DYDevKitYard
ElementYard
SEO

Set Up Metadata and Open Graph

Set up metadata and Open Graph by giving each important page a unique title, useful description, canonical URL and social preview that matches the visible page content.

Start workflowView checklistOpen ElementYard
Problem statement

What this workflow solves

Target outcome

Consistent page metadata that improves search snippets, social sharing previews and technical SEO confidence.

Before you start

Prerequisites

Interactive workflow

Work through Metadata and Open Graph

Track each step, focus the current task and copy a starter outline for your project notes or implementation plan.

0% complete
Write the search snippet first

The title and description should make the page's promise clear before users click.

  • Keep the title specific to the page intent.
  • Write a description that explains what users can do or learn.
  • Avoid duplicating the same title across multiple pages.
Starter codeCopy and adapt this outline for the workflow.
<title>JSON Formatter and Validator</title>
<meta name="description" content="Format and validate JSON in your browser with clear syntax errors." />
<link rel="canonical" href="https://www.example.com/tools/json-formatter" />
<meta name="robots" content="index,follow" />
<meta property="og:title" content="JSON Formatter and Validator" />
<meta property="og:description" content="Format and validate JSON in your browser." />
<meta property="og:url" content="https://www.example.com/tools/json-formatter" />
<meta property="og:image" content="https://www.example.com/og/json-formatter.png" />
<meta name="twitter:card" content="summary_large_image" />
Best practices

Work this way

These are the patterns that keep the workflow practical, accessible and easier to maintain.

Keep the title specific to the page intent.
Use the production domain, not localhost.
Use a clear title and description for sharing.
Common mistakes

Avoid these traps

Writing metadata that does not match the visible page promise.
Adding structured data for content that is not visible on the page.
Leaving internal links vague or disconnected from user intent.
Checklist

Step-by-step workflow

Follow the steps in order, then use the resource sections when you need a tool, reference or UI pattern.

1

Write the search snippet first

The title and description should make the page's promise clear before users click.

  • Keep the title specific to the page intent.
  • Write a description that explains what users can do or learn.
  • Avoid duplicating the same title across multiple pages.
2

Set canonical and robots rules

Canonical URLs and robots settings help crawlers understand which public URL should be indexed.

  • Use the production domain, not localhost.
  • Point canonical URLs at the preferred public route.
  • Keep noindex rules for pages that should stay private or temporary.
3

Prepare Open Graph and Twitter cards

Social previews should reinforce the same promise as the page title and first visible content.

  • Use a clear title and description for sharing.
  • Choose a preview image that represents the page.
  • Check that the preview does not overpromise features.
Finish with evidence

Verify the result

Verification
  • Inspect the rendered document head, not only source configuration.
  • Confirm every canonical and social URL is absolute and production-safe.
  • Validate structured data separately from ordinary metadata.
  • Check social previews on the platforms that matter to the project.
Edge cases
  • Search engines may generate different title links or snippets.
  • Canonical is a consolidation signal, not a redirect or access control.
  • Robots directives do not make sensitive URLs private.
Authoritative references
MDN metadata elementReview standard HTML metadata behavior.Open Graph protocolReview the core Open Graph properties.Google canonical guidanceUnderstand canonical signals and duplicate URLs.
Related resources

Tools, cheatsheets and components

Use these linked DevKitYard sections when the guide moves from planning to doing.

Related Tools
Meta & Open Graph GeneratorGenerate titles, descriptions and social tags.Schema Markup GeneratorCreate structured data snippets.
Related Cheatsheets
HTML CheatsheetReview head metadata and semantic structure.HTTP Status Codes CheatsheetReview redirects and crawl responses.
Related Components
Hero Section ComponentsAlign visible page promise with metadata.Accordion ComponentsPlan visible FAQs before adding FAQ schema.
ElementYard CTA

Align page sections with metadata in ElementYard

Use ElementYard to tune the visible hero and supporting sections so they match your metadata promise.

Open ElementYard
FAQ

Metadata and Open Graph questions

Should Open Graph text match the meta description exactly?

It can, but it does not have to. It should make the same honest promise in a format that works well for social sharing.

Can structured data fix weak page content?

No. Structured data helps describe visible content, but it cannot replace a clear page, useful headings and helpful copy.

Next steps

Keep moving

Meta & Open Graph GeneratorGenerate titles, descriptions and social tags.HTML CheatsheetReview head metadata and semantic structure.Hero Section ComponentsAlign visible page promise with metadata.Align page sections with metadata in ElementYardUse ElementYard to tune the visible hero and supporting sections so they match your metadata promise.