seo

Generate SSR SEO artifacts for Vue 3 with route metadata and i18n keys.

3|Updated Jan 14, 2023
One-click install
npx skills add https://github.com/e-xode/vue-ssr --skill seo-e-xode
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: seo
Source: https://github.com/e-xode/vue-ssr/tree/main/.claude/skills/seo
Command: npx skills add https://github.com/e-xode/vue-ssr --skill seo-e-xode

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill solves the problem of inconsistent, weak, or missing SEO metadata in an SSR Vue app by ensuring every indexable page gets correct meta tags, canonicals, hreflang, and structured data, while non-indexable routes are safely excluded.

Core Features & Use Cases

  • Route-driven meta injection: Generates per-route <title>, description, keywords, robots directives, canonical URLs, and head extras from route meta keys resolved through i18n with t().
  • Bilingual structured SEO outputs: Emits JSON-LD (Organization, and WebSite/SearchAction on home; BreadcrumbList on deep pages) only when the route is indexable.
  • Robots + sitemap generation: Produces dynamic robots.txt and sitemap.xml in the server layer with caching, and keeps public/indexable paths aligned with route metadata.
  • Hreflang correctness for en/fr: Adds en, fr, and x-default alternates and suppresses them for 404 and non-indexable routes.
  • Open Graph + Twitter readiness: Automatically builds OG/Twitter card tags and theme-related head elements for social sharing previews.

Quick Start

Ask the AI to review your new route by telling it the route path and whether it should be indexable, and then request which meta keys and sitemap/robots adjustments are required to match the kit’s SEO wiring.

Frequently Asked Questions about seo

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I generate meta tags and JSON-LD structured data for a Vue 3 SSR app?▼

Generate meta tags and JSON-LD structured data for a Vue 3 SSR app by deriving canonical URLs, Open Graph tags, and breadcrumbs from route metadata and i18n keys. JSON-LD is emitted only for indexable routes to ensure valid structured data coverage.

How do I add hreflang tags for en and fr locales in Vue 3 server-side rendering?▼

Add hreflang tags for en and fr locales in Vue 3 SSR by injecting en, fr, and x-default alternates from route metadata. Hreflang tags are automatically suppressed for 404 error pages and non-indexable routes to prevent incorrect localization signals.

What is the best way to create a dynamic robots.txt and sitemap.xml in an SSR application?▼

Create a dynamic robots.txt and sitemap.xml in an SSR application by generating them via server logic with caching. This approach aligns public indexable paths directly with route metadata to keep sitemap entries accurate and performant.

How do I handle SEO for non-indexable or authenticated routes in Vue SSR?▼

Handle SEO for non-indexable or authenticated routes in Vue SSR by excluding them from sitemap generation and suppressing canonical and hreflang tags. Robots directives are applied via route metadata to safely prevent indexing of protected pages.

When should I suppress canonical URLs and hreflang alternates for 404 pages?▼

Suppress canonical URLs and hreflang alternates for 404 pages when the route is non-indexable to avoid sending conflicting signals to search engines. This ensures error pages do not dilute the structured data and localization coverage of valid indexable pages.