name: SEO Metadata Generator
description: Generates optimized title tags, meta descriptions, Open Graph tags, and structured data for any web page.
category: writing
tags:
- seo
- metadata
- open-graph
- structured-data
- html
author: simplyutils

SEO Metadata Generator

What this skill does

This skill generates a complete set of SEO metadata for any web page — title tag, meta description, Open Graph tags, Twitter Card tags, and JSON-LD structured data — all in a single ready-to-paste HTML snippet. It analyzes the page's content and purpose, chooses the right structured data schema (Article, Product, WebPage, FAQPage, etc.), and optimizes every field for both search engines and social sharing.

Use this when building a new page, auditing existing metadata, or ensuring consistent SEO across a site.

How to use

Claude Code / Cline

Copy this file to .agents/skills/seo-metadata-generator/SKILL.md in your project root.

Then describe the page or share its content and ask:
- "Use the SEO Metadata Generator skill to generate metadata for our pricing page."
- "Generate SEO tags for this blog post using the SEO Metadata Generator skill."

Provide: the page's main content or purpose, the primary keyword, the page URL, the site name, and an available OG image URL (or a placeholder if none exists yet).

Cursor

Add the "Prompt / Instructions" section to your .cursorrules file. Open the page template or content file and ask Cursor to generate the metadata.

Codex

Describe the page content, primary keyword, URL, site name, and page type. Include the instructions below.

The Prompt / Instructions for the Agent

When asked to generate SEO metadata, follow these steps:

1. Understand the page. Extract or ask for:
2. Page type: article/blog post, product page, landing page, homepage, tool/app page, FAQ page, category page
3. Primary keyword: the main search term this page should rank for
4. Page URL (full, canonical)
5. Site name and brand
6. Page content summary (or the content itself)
7. OG image URL (use https://example.com/og-image.png as a placeholder if not provided)
8. Author name (for articles)

9. Publication date (for articles)

10. Generate the title tag:

11. Length: 50–60 characters (never exceed 60)
12. Format: Primary Keyword — Brand Name or Primary Keyword: Descriptive Subtitle
13. Put the primary keyword first (or as close to the beginning as possible)
14. Do not keyword-stuff — the title must read naturally

15. For homepages: Brand Name — Short Value Proposition

16. Generate the meta description:

17. Length: 150–160 characters (never exceed 160)
18. Include the primary keyword once, naturally
19. Be action-oriented: tell the user what they'll get or what they can do
20. End with an implicit or explicit CTA ("Get started", "Try it free", "Learn how")

21. Never just repeat the title

22. Generate Open Graph tags:

23. og:title — can match the title tag or be slightly more descriptive (up to 95 chars for social)
24. og:description — can match the meta description or be more conversational for social sharing (up to 200 chars)
25. og:image — use the provided URL; add og:image:width (1200) and og:image:height (630) for proper display
26. og:image:alt — descriptive alt text for the image (not "image of..." — just describe what's in it)
27. og:url — the canonical page URL
28. og:type — article for blog posts, website for all other pages, product for e-commerce

29. og:site_name — the site name

30. Generate Twitter Card tags:

31. twitter:card — use summary_large_image for pages with a meaningful OG image; summary otherwise
32. twitter:title — same as og:title
33. twitter:description — same as og:description
34. twitter:image — same as og:image
35. twitter:image:alt — same as og:image:alt

36. twitter:site — @twitterhandle (use placeholder @yourbrand if not provided)

37. Generate JSON-LD structured data. Choose the schema type based on page type:

38. Blog post / article → Article schema (with author, datePublished, dateModified, headline, image)
39. Product page → Product schema (with name, description, offers, brand)
40. FAQ page → FAQPage schema (with mainEntity array of Question/Answer pairs)
41. How-to page → HowTo schema (with step array)
42. Tool/software page → SoftwareApplication schema
43. General page → WebPage schema (with name, description, url)
44. Homepage → WebSite schema + Organization schema

Always include @context: "https://schema.org" and @type. Use realistic values, not "string" placeholders.

1. Add a canonical link tag.

2. Output as a single, complete HTML snippet ready to paste into the <head> section. Add comments to separate sections. Do not include <html>, <head>, or <body> tags — just the meta tags and script.

3. Flag any issues or assumptions (e.g., "I used a placeholder OG image URL — replace before deploying", "Publication date assumed to be today").

Example

Input to Agent:

"Use the SEO Metadata Generator skill. Page: a blog post titled 'How to Optimize React Performance'. Primary keyword: 'react performance optimization'. URL: https://devblog.example.com/blog/react-performance-optimization. Site: DevBlog. Author: Sarah Chen. Published: 2026-03-15. OG image: https://devblog.example.com/images/react-perf-og.png"

Output from Agent:

```html

```

Notes:
- Title is 57 characters — within the 50–60 target.
- Meta description is 154 characters — within the 150–160 target.
- Replace @devblog with your actual Twitter handle.
- Update dateModified whenever the post is significantly updated.