Génération d'images OG dynamiques dans les articles de blog Point Rouge

Nouvelle fonctionnalité de Point Rouge v1.4.0, introduisant la génération dynamique d’images OG pour les articles de blog.

Table des matières

Introduction

Les images OG (alias Social Images) jouent un rôle important dans les engagements sur les réseaux sociaux. Au cas où vous ne sauriez pas ce que signifie l’image OG, il s’agit d’une image affichée chaque fois que nous partageons l’URL de notre site web sur les réseaux sociaux tels que Facebook, Discord, etc.

L’image sociale utilisée pour Twitter n’est techniquement pas appelée image OG. Cependant, dans cet article, j’utiliserai le terme image OG pour tous les types d’images sociales.

Image OG par défaut/statique (à l’ancienne)

Point Rouge fournissait déjà un moyen d’ajouter une image OG à un article de blog. L’auteur peut spécifier l’image OG dans la couverture ogImage. Même lorsque l’auteur ne définit pas l’image OG dans le texte initial, l’image OG par défaut sera utilisée comme solution de secours (dans ce cas public/default-og.jpg). Mais le problème est que l’image OG par défaut est statique, ce qui signifie que chaque article de blog qui n’inclut pas d’image OG dans le texte principal utilisera toujours la même image OG par défaut, même si le titre/contenu de chaque article est différent des autres.

Image OG dynamique

Générer une image OG dynamique pour chaque article permet à l’auteur d’éviter de spécifier une image OG pour chaque article de blog. En outre, cela empêchera l’image OG de secours d’être identique à tous les articles de blog.

Dans Point Rouge v1.4.0, Vercel Satori Le package est utilisé pour la génération dynamique d’images OG.

Dans Point Rouge v6+, la même idée demeure (Satori rend SVG, puis PNG est produit via Sharp), mais les polices proviennent d’Astro Polices configuration et chargé via experimental_getFontFileURL() afin que la génération OG puisse réutiliser le même pipeline de polices que le site.

Des images dynamiques OG seront générées au moment de la création pour les articles de blog qui :

• n’incluez pas l’image OG dans le frontmatter
• ne sont pas marqués comme brouillon.

Anatomie de l’image OG dynamique de Point Rouge

Les images dynamiques OG incluent le titre de l’article de blog, nom de l’auteur, et titre du site. Le nom de l’auteur et le titre du site sont extraits de site.author et site.ogTitle dans point-rouge.config.ts. Le titre est généré à partir de la première page du billet de blog title.

Problème avec les caractères non latins

import { defineConfig, fontProviders } from "astro/config";

export default defineConfig({
  fonts: [
    {
      // Example: Japanese coverage (pick what you need for your audience)
      name: "Noto Sans JP",
      cssVariable: "--font-google-sans-code",
      provider: fontProviders.google(),
      fallbacks: ["monospace"],
      weights: [400, 700],
      styles: ["normal", "italic"],
      formats: ["woff", "ttf"],
    },
  ],
});astro.config.ts

Si tu changes cssVariable, mettez également à jour la clé correspondante dans :

• src/pages/og.png.ts
• src/pages/posts/[...slug]/index.png.ts

Découvrez ce PR pour plus d’informations.