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

Abierto Apto para principiantes
  • ¿Algo no está bien?
#35 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
2/5
Tiempo estimado
1-3 horas
Aptitud para principiantes
75/100
Tipo de issue
Documentación
Claridad
Bien especificado
Estado de actividad
Activo
Stack tecnológico
html, python
Área
documentation

Línea de trabajo

Comienza en overrides/main.html y lee el bloque extrahead, que ya emite og:title, og:description, og:url y twitter:card; confirma que se recoge mediante theme.custom_dir en mkdocs.yml. Añade el PNG de 1200x630 en docs/assets/, luego añade las metaetiquetas og:image, width/height y twitter:image y cambia twitter:card a summary_large_image. Verifica con python scripts/prepare-mkdocs.py y mkdocs build --strict, luego comprueba og:image en site/index.html y que la imagen referenciada realmente carga.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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

Lenguaje dominante
Python
Estrellas
2
Forks
5
Merge medio
2 d 17 h
PR fusionados (30 d)
6

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TMHSDigital/Awesome-Ads

Todos los issues de TMHSDigital/Awesome-Ads

Issues similares

Más issues de Python

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.