ENbext.dev

Traduction automatique depuis l’anglais. Consulter l’original.

Sur cette page

Utilitaires de référencement

bext génère automatiquement des artefacts SEO à partir de votre contenu et de votre configuration. Au lieu de conserver des fichiers de plan de site, des modèles de flux et une logique de balises méta distincts dans votre application, déclarez votre intention dans bext.config.toml et laissez le serveur gérer le reste.

Configuration#

toml
[seo]
enabled = true
site_url = "https://example.com"   # Canonical base URL (required)
site_name = "My App"
default_locale = "en"

# Sitemap generation
[seo.sitemap]
enabled = true
include_static = true              # Include all static routes
exclude_patterns = ["/admin/**", "/api/**", "/_bext/**"]
default_changefreq = "weekly"      # daily, weekly, monthly, yearly, never
default_priority = 0.5             # 0.0 - 1.0

# robots.txt
[seo.robots]
enabled = true
disallow = ["/admin", "/api", "/_bext"]
allow = ["/api/public"]
sitemap_url = "https://example.com/sitemap.xml"  # auto-set if sitemap enabled

# RSS/Atom feed
[seo.feed]
enabled = true
title = "My App Blog"
description = "Latest posts from My App"
path = "/feed.xml"                 # Serve at this path
content_dir = "content/blog"       # Scan this directory for entries
format = "rss"                     # "rss" or "atom"
max_items = 50

# Open Graph image generation
[seo.og_image]
enabled = true
width = 1200
height = 630
background = "#1a1a2e"
text_color = "#ffffff"
font_size = 48

Génération automatique de plan de site#

bext explore votre arborescence de routes au démarrage et génère un sitemap.xml qui reste synchronisé avec vos pages. Les routes statiques, les routes dynamiques avec des paramètres connus et les pages mises en cache ISR sont toutes incluses automatiquement.

code
GET /sitemap.xml
xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://example.com/</loc>
    <lastmod>2026-04-01T12:00:00Z</lastmod>
    <changefreq>daily</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://example.com/products</loc>
    <lastmod>2026-03-28T08:30:00Z</lastmod>
    <changefreq>weekly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Remplacez les valeurs par défaut par page en exportant les métadonnées SEO de votre itinéraire :

ts
// src/pages/products.tsx
export const seo = {
  priority: 0.9,
  changefreq: "daily",
};

robots.txt#

bext génère robots.txt à partir de la configuration et le sert à la racine :

code
GET /robots.txt
code
User-agent: *
Disallow: /admin
Disallow: /api
Disallow: /_bext
Allow: /api/public

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

Flux RSS/Atom#

Pointez content_dir vers un répertoire de fichiers Markdown ou MDX avec frontmatter, et bext génère un flux RSS 2.0 ou Atom valide :

code
GET /feed.xml

Chaque fichier doit inclure un frontmatter avec au moins title et date :

markdown
---
title: Launching bext 2.0
date: 2026-03-15
description: Major release with HTTP/3 and WAF support.
---

Post content here...

bext définit automatiquement <link rel="alternate" type="application/rss+xml"> dans vos réponses HTML afin que les lecteurs de flux découvrent le flux.

Données structurées JSON-LD#

Injectez des données structurées JSON-LD dans les réponses SSR en exportant un objet jsonLd depuis votre page :

tsx
// src/pages/products/[slug].tsx
export function getServerSideProps({ params }) {
  const product = getProduct(params.slug);
  return {
    props: { product },
    seo: {
      jsonLd: {
        "@context": "https://schema.org",
        "@type": "Product",
        "name": product.name,
        "description": product.description,
        "image": product.imageUrl,
        "offers": {
          "@type": "Offer",
          "price": product.price,
          "priceCurrency": "USD",
          "availability": "https://schema.org/InStock"
        }
      }
    }
  };
}

bext injecte le JSON-LD en tant que bloc <script type="application/ld+json"> dans le <head> du code HTML rendu.

Pour les schémas courants, bext fournit des assistants intégrés. Définissez le type de page et bext génère le schéma approprié :

toml
# Per-page SEO in route config
[[seo.pages]]
path = "/"
type = "WebSite"
name = "My App"
search_url = "https://example.com/search?q={search_term_string}"

[[seo.pages]]
path = "/about"
type = "Organization"
name = "My Company"
logo = "https://example.com/logo.png"

Génération d'images à graphique ouvert#

bext génère des images OG à la volée pour les pages qui n'ont pas de balise méta og:image explicite. L'image générée affiche le titre de la page sur un arrière-plan de marque.

code
GET /__bext/api/og?title=My+Page+Title&subtitle=example.com

Configurez le style par défaut dans [seo.og_image]. L'image générée est mise en cache dans le même cache hiérarchisé utilisé par le pipeline d'optimisation d'image.

Utilisez-le dans les métadonnées de votre page :

tsx
export const seo = {
  title: "Product Launch",
  ogImage: "/__bext/api/og?title=Product+Launch&subtitle=Coming+Soon"
};

Gestion des balises méta#

bext gère automatiquement les balises méta <head> à partir des exportations SEO au niveau de la page :

tsx
export const seo = {
  title: "My Page",
  description: "A description for search engines",
  canonical: "https://example.com/my-page",
  openGraph: {
    title: "My Page - Example",
    description: "Optimized for social sharing",
    image: "/images/og-hero.jpg",
    type: "article"
  },
  twitter: {
    card: "summary_large_image",
    site: "@myapp"
  }
};

Cela génère :

html
<title>My Page</title>
<meta name="description" content="A description for search engines" />
<link rel="canonical" href="https://example.com/my-page" />
<meta property="og:title" content="My Page - Example" />
<meta property="og:description" content="Optimized for social sharing" />
<meta property="og:image" content="/images/og-hero.jpg" />
<meta property="og:type" content="article" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@myapp" />

URL canoniques#

bext génère automatiquement <link rel="canonical"> pour toutes les pages en fonction de site_url plus le chemin de la requête. Cela évite les problèmes de contenu en double dus aux barres obliques finales, aux paramètres de requête ou aux domaines alternatifs.

Pour les pages avec des remplacements canoniques explicites (par exemple, un contenu paginé pointant vers la page 1), utilisez le champ canonical dans votre export SEO.

Si i18n est activé, bext génère également des balises de lien alternatives hreflang pour chaque paramètre régional configuré.

Conseil

Les images OG générées par /__bext/api/og sont en PNG — les plateformes sociales rejettent le SVG Valeurs og:image. Si vous hébergez vous-même des images OG, assurez-vous qu'elles sont raster (PNG ou JPEG) avant de définir la balise méta og:image.

En rapport#

  • Optimisation des images — redimensionnement et conversion de format à la volée utilisés par le pipeline d'images OG
  • Mise en cache — le plan du site et les réponses au flux sont mis en cache ISR ; voir configuration TTL
  • capacité i18n — génération de balises alternatives hreflang pour les sites multilocales
  • Cadres — Routage — comment bext découvre les itinéraires pour la génération de plans de site
  • Actions du serveur — combinez les exportations JSON-LD avec la récupération de données côté serveur
Modifier cette page ↗Besoin d’aide ? ↗
Rechercher dans la documentation

Saisissez un sujet, une commande ou une question.