Skills/technical-seo-social/SKILL.md

name	description
technical-seo-social	Implement technical SEO, semantic structured data (W3C JSON-LD / Schema.org), Open Graph Protocol (OGP), Twitter Cards, dynamic edge social image generation (Satori / @vercel/og), canonical tags, sitemaps, and robots.txt.

Technical SEO, Structured Data & Social Graph

Ce skill fournit les normes et les implémentations pour assurer une indexation parfaite par les moteurs de recherche et les crawlers IA, tout en garantissant des prévisualisations riches sur tous les réseaux sociaux et messageries (Slack, iMessage, Discord, LinkedIn, X).

---

🎯 Déclencheurs d'Activation

Activez ce skill dès que :

1. Vous créez ou restructurez des pages publiques d'un site web ou d'une application SaaS.
2. Vous configurez les métadonnées globales ou par page (title, description, balises canoniques).
3. Vous implémentez des données structurées pour les Rich Results Google (FAQ, Logiciel, Article, Produit).
4. Vous mettez en place des cartes de partage social (Open Graph et Twitter/X cards) ou la génération dynamique d'images OG.
5. Vous générez le sitemap.xml et le fichier robots.txt.

---

📐 1. Données Structurées JSON-LD (Schema.org)

Google et les agents d'indexation modernes privilégient le format JSON-LD injecté dans le <head> ou en fin de balise <main>.

Schéma Recommandé pour SaaS / Application (SoftwareApplication)

import Script from 'next/script';

export const SoftwareSchema = () => {
  const schema = {
    '@context': 'https://schema.org',
    '@type': 'SoftwareApplication',
    name: 'Acme Studio',
    operatingSystem: 'All',
    applicationCategory: 'DesignApplication',
    offers: {
      '@type': 'Offer',
      price: '0',
      priceCurrency: 'EUR',
    },
    aggregateRating: {
      '@type': 'AggregateRating',
      ratingValue: '4.9',
      reviewCount: '1240',
    },
  };

  return (
    <Script
      id="schema-software"
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
    />
  );
};

---

🖼️ 2. Open Graph & Twitter Cards

Chaque page doit déclarer explicitement les balises canoniques et sociales :

<!-- Métadonnées Primaires -->
<title>Plateforme de Design Engineering | Acme</title>
<meta name="description" content="Concevez des interfaces web haute précision certifiées WCAG 2.2 et sécurisées.">
<link rel="canonical" href="https://acme.example.com/fr">

<!-- Open Graph (Facebook, LinkedIn, Discord, Slack, iMessage) -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://acme.example.com/fr">
<meta property="og:title" content="Plateforme de Design Engineering | Acme">
<meta property="og:description" content="Concevez des interfaces web haute précision certifiées WCAG 2.2 et sécurisées.">
<meta property="og:image" content="https://acme.example.com/api/og?title=Design+Engineering">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:locale" content="fr_FR">

<!-- Twitter / X Cards -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@AcmeApp">
<meta name="twitter:title" content="Plateforme de Design Engineering | Acme">
<meta name="twitter:description" content="Concevez des interfaces web haute précision certifiées WCAG 2.2.">
<meta name="twitter:image" content="https://acme.example.com/api/og?title=Design+Engineering">

---

⚡ 3. Génération Dynamique d'Images OG à l'Edge (@vercel/og / Satori)

Ne créez pas 100 images PNG statiques à la main. Générez-les à la volée au ratio standard 1200x630 :

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function GET(req: NextRequest) {
  const { searchParams } = new URL(req.url);
  const title = searchParams.get('title') || 'Acme Engineering';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'space-between',
          backgroundColor: '#090a0f',
          padding: '80px',
          fontFamily: 'sans-serif',
        }}
      >
        <div style={{ color: '#6366f1', fontSize: 28, fontWeight: 700, letterSpacing: '0.1em' }}>
          ACME ENGINEERING
        </div>
        <div style={{ color: '#ffffff', fontSize: 64, fontWeight: 800, lineHeight: 1.15 }}>
          {title}
        </div>
        <div style={{ color: '#94a3b8', fontSize: 24 }}>
          Standard de qualité certifié • WCAG 2.2 • Performance Edge
        </div>
      </div>
    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

---

🤖 4. Robots.txt & Sitemap.xml Automatisés

robots.txt

User-agent: *
Allow: /
Disallow: /api/
Disallow: /admin/
Disallow: /dashboard/settings/private

Sitemap: https://acme.example.com/sitemap.xml

sitemap.xml (Règles strictes)

• Les URLs doivent être absolues et canoniques (pas de paramètres d'URL non canoniques).
• lastmod doit refléter la véritable date de dernière modification (format ISO 8601 YYYY-MM-DD).

---

📋 Checklist de Conformité SEO & Social

• Balise <title> unique par page (idéalement 50–60 caractères).
• Balise <meta name="description"> informative et engageante (120–155 caractères).
• Balise <link rel="canonical"> présente sur chaque URL.
• Balisage JSON-LD Schema.org valide (vérifié via le Rich Results Test de Google).
• Cartes Open Graph (1200x630px) testées sur Twitter Card Validator et OpenGraph.xyz.
• Fichiers /robots.txt et /sitemap.xml accessibles sans redirection et sans erreur 404.
• Favicon complet : favicon.ico, icon.svg (vectoriel moderne) et apple-touch-icon.png (180x180).