Add a social preview image (og:image) to the Pages site

Ouverte Adaptée aux débutants
  • Quelque chose ne va pas ?
#35 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Les mainteneurs répondent en général sous 1 jour

Personne n'a encore pris cette issue.

Évaluation

Difficulté
2/5
Temps estimé
1-3 heures
Accessibilité débutants
75/100
Type d'issue
Documentation
Clarté
Clairement spécifiée
Activité
Active
Stack technique
html, python
Domaine
documentation

Piste de recherche

Commence dans overrides/main.html et lis le bloc extrahead, qui émet déjà og:title, og:description, og:url et twitter:card ; confirme qu’il est pris en compte via theme.custom_dir dans mkdocs.yml. Ajoute le PNG 1200x630 sous docs/assets/, puis ajoute les balises meta og:image, width/height et twitter:image et remplace twitter:card par summary_large_image. Vérifie avec python scripts/prepare-mkdocs.py et mkdocs build --strict, puis vérifie og:image dans site/index.html et que l’image référencée se charge réellement.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

enhancement good first issue severity: low

Summary

Shared links to the site now carry a title and description (Open Graph and Twitter tags), but no image. Most chat apps and social feeds show a bare text card without one, which is easy to scroll past.

Where

  • overrides/main.html (extrahead block)
  • mkdocs.yml (theme.custom_dir)

Details

overrides/main.html emits og:title, og:description, og:url, and twitter:card set to summary. There is no og:image or twitter:image, because the repo has no image made for previews.

Suggested fix

Add a 1200x630 PNG (for example docs/assets/social-card.png) with the project name and tagline, then in overrides/main.html add:

<meta property="og:image" content="{{ config.site_url }}assets/social-card.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta name="twitter:image" content="{{ config.site_url }}assets/social-card.png">

and switch twitter:card to summary_large_image. Material's built-in social plugin is an alternative, but it needs Cairo and Pillow system libraries in CI.

Acceptance criteria

  • Every built page has og:image pointing to an image that loads.
  • mkdocs build --strict still passes.

Getting started

  • Relevant files: overrides/main.html, mkdocs.yml
  • How to check: python scripts/prepare-mkdocs.py then mkdocs build --strict, and look for og:image in site/index.html.

Filed by repo-audit/pages-site at c8f223f. Severity: low. Effort: S. audit-key: enhancement|overrides/main.html|og:image

Langage dominant
Python
Étoiles
2
Forks
5
Merge moyen
2 j 17 h
PR mergées (30 j)
6

Préparer son environnement

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TMHSDigital/Awesome-Ads

Toutes les issues de TMHSDigital/Awesome-Ads

Issues similaires

Plus d'issues Python

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.