---
name: technical-seo-social
description: >-
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 `
` ou en fin de balise ``.
### Schéma Recommandé pour SaaS / Application (`SoftwareApplication`)
```tsx
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 (
);
};
```
---
## 🖼️ 2. Open Graph & Twitter Cards
Chaque page doit déclarer explicitement les balises canoniques et sociales :
```html
Plateforme de Design Engineering | Acme
```
---
## ⚡ 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** :
```typescript
// 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(
(
ACME ENGINEERING
{title}
Standard de qualité certifié • WCAG 2.2 • Performance Edge
),
{
width: 1200,
height: 630,
}
);
}
```
---
## 🤖 4. Robots.txt & Sitemap.xml Automatisés
### `robots.txt`
```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 `` unique par page (idéalement 50–60 caractères).
- [ ] Balise `` informative et engageante (120–155 caractères).
- [ ] Balise `` 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).