Run any Skill in Manus with one click

generating-seo-metadata

Stars5

Forks2

UpdatedJanuary 18, 2026 at 17:25

Generates SEO meta tags, Open Graph cards, and JSON-LD structured data. Use when the user asks about meta tags, og:image, schema.org markup, hreflang, or wants to improve search visibility.

Installation

Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.

Run Skill in Manus

Source

WesleySmits

WesleySmits/agent-skills

View GitHub Repository View Creator Repositories

Download

Run Skill in Manus

Related occupationsSOC

Based on SOC occupation classification

Web DevelopersComputer and Mathematical Occupations·SOC 15-1254

SKILL.md

readonly

SEO Metadata Generator

When to use this skill

User asks to add meta tags to a page
User mentions Open Graph or social sharing
User wants JSON-LD or structured data
User asks about hreflang or internationalization
User wants to improve SEO or search visibility

Workflow

Instructions

Step 1: Identify Page Type

Determine content type to select appropriate schema:

Page Type	JSON-LD Schema	Priority Meta
Homepage	Organization, WebSite	Brand, description
Article/Blog	Article, BlogPosting	Author, date, image
Product	Product, Offer	Price, availability
Service	Service, LocalBusiness	Provider, area
FAQ	FAQPage	Questions
Event	Event	Date, location, price
Person/About	Person, ProfilePage	Name, role
Contact	ContactPage, LocalBusiness	Address, phone

Step 2: Generate Base Meta Tags

Essential meta tags:

<head>
  <!-- Primary Meta -->
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>{Page Title} | {Site Name}</title>
  <meta name="description" content="{150-160 char description}" />

  <!-- Indexing Control -->
  <meta name="robots" content="index, follow" />
  <link rel="canonical" href="https://example.com/page-url" />

  <!-- Optional -->
  <meta name="author" content="{Author Name}" />
  <meta name="keywords" content="{keyword1, keyword2, keyword3}" />
</head>

Title guidelines:

50-60 characters max
Primary keyword near the start
Include brand name with separator
Unique per page

Description guidelines:

150-160 characters
Include primary keyword naturally
Call to action when appropriate
Unique per page

Step 3: Open Graph Tags

Core Open Graph:

<!-- Open Graph -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:title" content="{Title for social sharing}" />
<meta property="og:description" content="{Description for social sharing}" />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="{Image description}" />
<meta property="og:site_name" content="{Site Name}" />
<meta property="og:locale" content="en_US" />

Article-specific:

<meta property="og:type" content="article" />
<meta property="article:published_time" content="2026-01-18T10:00:00Z" />
<meta property="article:modified_time" content="2026-01-18T12:00:00Z" />
<meta property="article:author" content="https://example.com/author" />
<meta property="article:section" content="Technology" />
<meta property="article:tag" content="JavaScript" />

Product-specific:

<meta property="og:type" content="product" />
<meta property="product:price:amount" content="29.99" />
<meta property="product:price:currency" content="USD" />
<meta property="product:availability" content="in stock" />

Step 4: Twitter Card Meta

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@sitehandle" />
<meta name="twitter:creator" content="@authorhandle" />
<meta name="twitter:title" content="{Title}" />
<meta name="twitter:description" content="{Description}" />
<meta name="twitter:image" content="https://example.com/twitter-image.jpg" />
<meta name="twitter:image:alt" content="{Image description}" />

Card types:

summary: Small square image
summary_large_image: Large rectangular image
player: Video/audio embed
app: App install card

Step 5: JSON-LD Structured Data

Article schema:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "Article Title Here",
    "description": "Article description",
    "image": "https://example.com/image.jpg",
    "author": {
      "@type": "Person",
      "name": "Author Name",
      "url": "https://example.com/author"
    },
    "publisher": {
      "@type": "Organization",
      "name": "Site Name",
      "logo": {
        "@type": "ImageObject",
        "url": "https://example.com/logo.png"
      }
    },
    "datePublished": "2026-01-18",
    "dateModified": "2026-01-18"
  }
</script>

Product schema:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Product",
    "name": "Product Name",
    "description": "Product description",
    "image": "https://example.com/product.jpg",
    "brand": {
      "@type": "Brand",
      "name": "Brand Name"
    },
    "offers": {
      "@type": "Offer",
      "url": "https://example.com/product",
      "priceCurrency": "USD",
      "price": "29.99",
      "availability": "https://schema.org/InStock",
      "seller": {
        "@type": "Organization",
        "name": "Store Name"
      }
    },
    "aggregateRating": {
      "@type": "AggregateRating",
      "ratingValue": "4.5",
      "reviewCount": "42"
    }
  }
</script>

FAQ schema:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      {
        "@type": "Question",
        "name": "What is the question?",
        "acceptedAnswer": {
          "@type": "Answer",
          "text": "This is the answer."
        }
      }
    ]
  }
</script>

LocalBusiness schema:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "LocalBusiness",
    "name": "Business Name",
    "image": "https://example.com/photo.jpg",
    "address": {
      "@type": "PostalAddress",
      "streetAddress": "123 Main St",
      "addressLocality": "City",
      "addressRegion": "State",
      "postalCode": "12345",
      "addressCountry": "US"
    },
    "telephone": "+1-555-555-5555",
    "openingHoursSpecification": {
      "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"],
      "opens": "09:00",
      "closes": "17:00"
    }
  }
</script>

BreadcrumbList schema:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
      {
        "@type": "ListItem",
        "position": 1,
        "name": "Home",
        "item": "https://example.com"
      },
      {
        "@type": "ListItem",
        "position": 2,
        "name": "Category",
        "item": "https://example.com/category"
      },
      {
        "@type": "ListItem",
        "position": 3,
        "name": "Current Page"
      }
    ]
  }
</script>

Step 6: Hreflang for Multilingual Sites

<!-- Language alternates -->
<link rel="alternate" hreflang="en" href="https://example.com/page" />
<link rel="alternate" hreflang="nl" href="https://example.nl/pagina" />
<link rel="alternate" hreflang="de" href="https://example.de/seite" />
<link rel="alternate" hreflang="x-default" href="https://example.com/page" />

Common hreflang codes:

Language	Code	With Region
English	`en`	`en-US`, `en-GB`
Dutch	`nl`	`nl-NL`, `nl-BE`
German	`de`	`de-DE`, `de-AT`
French	`fr`	`fr-FR`, `fr-CA`
Spanish	`es`	`es-ES`, `es-MX`

Framework Integration

Next.js (App Router):

// app/page.tsx
import { Metadata } from "next";

export const metadata: Metadata = {
  title: "Page Title | Site Name",
  description: "Page description here",
  openGraph: {
    title: "OG Title",
    description: "OG Description",
    url: "https://example.com/page",
    siteName: "Site Name",
    images: [
      {
        url: "https://example.com/og.jpg",
        width: 1200,
        height: 630,
        alt: "Image alt",
      },
    ],
    locale: "en_US",
    type: "website",
  },
  twitter: {
    card: "summary_large_image",
    title: "Twitter Title",
    description: "Twitter description",
    images: ["https://example.com/twitter.jpg"],
  },
  alternates: {
    canonical: "https://example.com/page",
    languages: {
      en: "https://example.com/page",
      nl: "https://example.nl/pagina",
    },
  },
};

Next.js JSON-LD:

// app/page.tsx
export default function Page() {
  const jsonLd = {
    "@context": "https://schema.org",
    "@type": "Article",
    headline: "Article Title",
    // ... rest of schema
  };

  return (
    <>
      <script
        type="application/ld+json"
        dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
      />
      {/* Page content */}
    </>
  );
}

Nuxt 3:

<script setup lang="ts">
  useSeoMeta({
    title: "Page Title",
    description: "Page description",
    ogTitle: "OG Title",
    ogDescription: "OG Description",
    ogImage: "https://example.com/og.jpg",
    ogUrl: "https://example.com/page",
    twitterCard: "summary_large_image",
  });

  useHead({
    link: [{ rel: "canonical", href: "https://example.com/page" }],
    script: [
      {
        type: "application/ld+json",
        children: JSON.stringify({
          "@context": "https://schema.org",
          "@type": "Article",
          // ... schema
        }),
      },
    ],
  });
</script>

Validation

Before completing:

Validation tools:

# Test JSON-LD locally
curl -s "https://validator.schema.org/" # Use web interface

# Check meta tags
curl -s https://example.com | grep -E '<meta|<title|<link rel="canonical"'

Error Handling

Missing required fields: JSON-LD requires certain fields per type; validate against schema.org.
Image dimensions wrong: OG images must be at least 200x200, recommended 1200x630.
Duplicate canonical: Only one canonical URL per page.
Hreflang loops: Each language version must link to all others including itself.
Invalid dates: Use ISO 8601 format (YYYY-MM-DD or full datetime).

generating-seo-metadata

SEO Metadata Generator

When to use this skill

Workflow

Instructions

Step 1: Identify Page Type

Step 2: Generate Base Meta Tags

Step 3: Open Graph Tags

Step 4: Twitter Card Meta

Step 5: JSON-LD Structured Data

Step 6: Hreflang for Multilingual Sites

Framework Integration

Validation

Error Handling

Resources

SEO Metadata Generator

When to use this skill

Workflow

Instructions

Step 1: Identify Page Type

Step 2: Generate Base Meta Tags

Step 3: Open Graph Tags

Step 4: Twitter Card Meta

Step 5: JSON-LD Structured Data

Step 6: Hreflang for Multilingual Sites

Framework Integration

Validation

Error Handling

Resources

name	generating-seo-metadata
description	Generates SEO meta tags, Open Graph cards, and JSON-LD structured data. Use when the user asks about meta tags, og:image, schema.org markup, hreflang, or wants to improve search visibility.

generating-seo-metadata

More from this repository

More from this repository

SEO Metadata Generator

When to use this skill

Workflow

Instructions

Step 1: Identify Page Type

Step 2: Generate Base Meta Tags

Step 3: Open Graph Tags

Step 4: Twitter Card Meta

Step 5: JSON-LD Structured Data

Step 6: Hreflang for Multilingual Sites

Framework Integration

Validation

Error Handling

Resources

SEO Metadata Generator

When to use this skill

Workflow

Instructions

Step 1: Identify Page Type

Step 2: Generate Base Meta Tags

Step 3: Open Graph Tags

Step 4: Twitter Card Meta

Step 5: JSON-LD Structured Data

Step 6: Hreflang for Multilingual Sites

Framework Integration

Validation

Error Handling

Resources