--- name: seo-optimization description: >- Complete SEO optimization skill for the SEO Specialist agent. Covers meta tags (useHead/useSeoMeta for Nuxt 4, generateMetadata for Next.js 15), Open Graph & Twitter Cards, JSON-LD structured data (Article, Product, FAQ, BreadcrumbList, Organization), sitemap.xml & robots.txt, Core Web Vitals optimization (LCP, FID, CLS), SSR/SSG for SEO, canonical URLs, hreflang tags, Google Search Console verification, and a full SEO audit checklist. Designed for the seo-specialist agent working with Nuxt 4 and Next.js 15 frontends. license: MIT metadata: author: opencode-agent-kit version: "1.0.0" target_agent: seo-specialist stack: - Nuxt 4 - Next.js 15 (App Router) - JSON-LD (Schema.org) - SSR/SSG - Core Web Vitals - Google Search Console - Sitemap XML - robots.txt --- # SEO Optimization **Target Agent:** @seo (SEO Specialist) **Stack:** Nuxt 4 · Next.js 15 App Router · JSON-LD Structured Data · SSR/SSG · Core Web Vitals · Google Search Console Comprehensive reference for search engine optimization across Nuxt 4 and Next.js 15 projects. Covers every aspect of on-page SEO, structured data, technical optimization, and verification. --- ## Table of Contents 1. [Meta Tags — useHead / useSeoMeta (Nuxt 4)](#1-meta-tags--usehead--useseometa-nuxt-4) 2. [Meta Tags — generateMetadata (Next.js 15)](#2-meta-tags--generatemetadata-nextjs-15) 3. [Open Graph & Twitter Cards](#3-open-graph--twitter-cards) 4. [JSON-LD Structured Data](#4-json-ld-structured-data) 5. [Canonical URLs](#5-canonical-urls) 6. [Hreflang Tags](#6-hreflang-tags) 7. [Sitemap.xml](#7-sitemapxml) 8. [Robots.txt](#8-robotstxt) 9. [Core Web Vitals Optimization](#9-core-web-vitals-optimization) 10. [SSR/SSG for SEO](#10-ssrssg-for-seo) 11. [Google Search Console Verification](#11-google-search-console-verification) 12. [SEO Audit Checklist](#12-seo-audit-checklist) --- ## 1. Meta Tags — useHead / useSeoMeta (Nuxt 4) ### useSeoMeta (Recommended — reactive) Simplified composable that sets common SEO meta tags with full reactivity: ```typescript // Standard page setup useSeoMeta({ title: 'Page Title - Site Name', titleTemplate: '%s | Site Name', description: 'Compelling page description targeting primary keywords, 150–160 characters.', ogTitle: 'Page Title', ogDescription: 'Compelling description for social sharing (max ~300 chars).', ogImage: 'https://example.com/og-image.jpg', ogImageWidth: 1200, ogImageHeight: 630, ogUrl: 'https://example.com/page', ogType: 'website', ogSiteName: 'Site Name', ogLocale: 'id_ID', twitterCard: 'summary_large_image', twitterTitle: 'Page Title', twitterDescription: 'Compelling description for Twitter.', twitterImage: 'https://example.com/twitter-image.jpg', twitterSite: '@sitehandle', robots: 'index, follow', }) ``` ### useHead (Advanced — full control) For setting link tags, script tags, and arbitrary `` elements: ```typescript useHead({ title: 'Page Title - Site Name', titleTemplate: '%s | Site Name', link: [ { rel: 'canonical', href: 'https://example.com/page' }, { rel: 'alternate', hreflang: 'en', href: 'https://example.com/en/page' }, { rel: 'alternate', hreflang: 'id', href: 'https://example.com/id/page' }, { rel: 'alternate', hreflang: 'x-default', href: 'https://example.com/page' }, ], meta: [ { name: 'robots', content: 'index, follow' }, { name: 'google-site-verification', content: 'VERIFICATION_CODE' }, { name: 'msvalidate.01', content: 'BING_VERIFICATION_CODE' }, { name: 'format-detection', content: 'telephone=no' }, { name: 'theme-color', content: '#ffffff' }, ], script: [ { type: 'application/ld+json', children: JSON.stringify({ /* structured data */ }), }, ], }) ``` ### Nuxt Config Defaults ```typescript // nuxt.config.ts export default defineNuxtConfig({ app: { head: { charset: 'utf-8', viewport: 'width=device-width, initial-scale=1', titleTemplate: '%s | Site Name', }, }, }) ``` ### Composable for Reusable SEO ```typescript // composables/useSeo.ts export function usePageSeo(options: { title: string description: string ogImage?: string canonical?: string type?: string robots?: string jsonld?: Record }) { const config = useRuntimeConfig() const route = useRoute() const baseUrl = config.public.siteUrl || 'https://example.com' const defaultOgImage = `${baseUrl}/images/og-default.jpg` useSeoMeta({ title: options.title, description: options.description, ogTitle: options.title, ogDescription: options.description, ogImage: options.ogImage || defaultOgImage, ogUrl: options.canonical || `${baseUrl}${route.path}`, ogType: options.type || 'website', twitterCard: 'summary_large_image', }) useHead({ link: [ { rel: 'canonical', href: options.canonical || `${baseUrl}${route.path}` }, ], meta: [ { name: 'robots', content: options.robots || 'index, follow' }, ], }) if (options.jsonld) { useHead({ script: [ { type: 'application/ld+json', children: JSON.stringify(options.jsonld), }, ], }) } } ``` ### Per-Page Usage ```typescript // pages/blog/[slug].vue const { data: article } = await useAsyncData('article', () => fetchArticle(route.params.slug) ) usePageSeo({ title: `${article.value.title} - Blog`, description: article.value.excerpt, ogImage: article.value.ogImage, canonical: `${baseUrl}/blog/${article.value.slug}`, type: 'article', jsonld: { '@context': 'https://schema.org', '@type': 'Article', headline: article.value.title, description: article.value.excerpt, image: article.value.ogImage, author: { '@type': 'Person', name: article.value.author }, datePublished: article.value.publishedAt, dateModified: article.value.updatedAt, }, }) ``` --- ## 2. Meta Tags — generateMetadata (Next.js 15) ### Static Metadata (Pages without dynamic data) ```typescript // app/about/page.tsx import type { Metadata } from 'next' export const metadata: Metadata = { title: 'About Us - Site Name', description: 'Learn more about our company, mission, and team.', openGraph: { title: 'About Us - Site Name', description: 'Learn more about our company, mission, and team.', url: 'https://example.com/about', siteName: 'Site Name', images: [{ url: 'https://example.com/og-about.jpg', width: 1200, height: 630 }], locale: 'id_ID', type: 'website', }, twitter: { card: 'summary_large_image', title: 'About Us - Site Name', description: 'Learn more about our company, mission, and team.', images: ['https://example.com/twitter-about.jpg'], }, robots: { index: true, follow: true }, alternates: { canonical: 'https://example.com/about', languages: { 'en': 'https://example.com/en/about', 'id': 'https://example.com/id/about', }, }, } ``` ### Dynamic Metadata (Data-driven pages) ```typescript // app/blog/[slug]/page.tsx import type { Metadata } from 'next' interface Props { params: Promise<{ slug: string }> } export async function generateMetadata({ params }: Props): Promise { const { slug } = await params const article = await fetchArticle(slug) return { title: `${article.title} - Blog`, description: article.excerpt, openGraph: { title: article.title, description: article.excerpt, url: `https://example.com/blog/${slug}`, images: [{ url: article.ogImage, width: 1200, height: 630 }], type: 'article', publishedTime: article.publishedAt, authors: [article.author], }, twitter: { card: 'summary_large_image', title: article.title, description: article.excerpt, images: [article.ogImage], }, alternates: { canonical: `https://example.com/blog/${slug}`, }, robots: { index: true, follow: true }, } } export default async function BlogPost({ params }: Props) { const { slug } = await params const article = await fetchArticle(slug) return } ``` ### Metadata Root Layout ```typescript // app/layout.tsx import type { Metadata } from 'next' export const metadata: Metadata = { title: { template: '%s | Site Name', default: 'Site Name — Tagline', }, description: 'Default site description for search engines.', metadataBase: new URL('https://example.com'), openGraph: { siteName: 'Site Name', type: 'website', locale: 'id_ID', }, twitter: { card: 'summary_large_image', creator: '@sitehandle', }, robots: { index: true, follow: true, googleBot: { index: true, follow: true, 'max-video-preview': -1, 'max-image-preview': 'large', 'max-snippet': -1 }, }, verification: { google: 'GOOGLE_VERIFICATION_CODE', yandex: 'YANDEX_VERIFICATION_CODE', yahoo: 'YAHOO_VERIFICATION_CODE', }, } ``` ### JSON-LD via Script Tag in Next.js ```typescript // app/blog/[slug]/page.tsx — continued export default async function BlogPost({ params }: Props) { const { slug } = await params const article = await fetchArticle(slug) const jsonLd = { '@context': 'https://schema.org', '@type': 'Article', headline: article.title, description: article.excerpt, image: article.ogImage, author: { '@type': 'Person', name: article.author }, datePublished: article.publishedAt, dateModified: article.updatedAt, publisher: { '@type': 'Organization', name: 'Company Name', logo: { '@type': 'ImageObject', url: 'https://example.com/logo.png' }, }, } return ( <>