Create og:image:alt from fig-alt #10857

leofontenelle · 2024-09-22T00:31:00Z

leofontenelle
Sep 22, 2024

Description

I missed this feature when I was working on my Quarto blog. Documentation says the OpenGraph preview image can be picked from the page content by adding the preview-image to an image. It works!

It would be even better if this feature also reused the image's fig-alt as the og:image:alt, so that I don't have to copy and paste the alternative text into the YAML header for every single blog post.

I guess this is not exactly a bug report, but I'll add steps to reproduce:

quarto create project website mysite

The _quarto.yml:

project:
  type: website

website:
  title: "Test"
  open-graph: true
  navbar:
    left:
      - href: index.qmd
        text: Home
      - about.qmd

format:
  html:
    theme: cosmo
    css: styles.css
    toc: true

The about.qmd:

---
title: "About"
---

About this site

![](https://quarto.org/quarto.png){fig-alt="Quarto logo" .preview-image}

The resulting HTML file:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"><head>

<meta charset="utf-8">
<meta name="generator" content="quarto-1.6.11">

<!-- snip -->

<link rel="stylesheet" href="styles.css">
<meta property="og:title" content="About – Test">
<meta property="og:description" content="">
<meta property="og:image" content="https://quarto.org/quarto.png">
<meta property="og:site_name" content="Test">
</head>

<body class="nav-fixed">

<!-- snip -->

<p>About this site</p>
<p><img src="https://quarto.org/quarto.png" class="preview-image img-fluid" alt="Quarto logo"></p>

<!-- snip -->

</body></html>

I guess I wanted was the same but with an added

<meta property="og:image:alt" content="Quarto logo">

Thanks!

cscheid · 2024-09-23T18:03:23Z

cscheid
Sep 23, 2024
Maintainer

Agreed! This is definitely something we should do.

0 replies

cscheid · 2024-09-23T18:03:44Z

cscheid
Sep 23, 2024
Maintainer

Tracking on #10864

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Create og:image:alt from fig-alt #10857

{{title}}

Replies: 2 comments

{{title}}

{{title}}

Select a reply

Create og:image:alt from fig-alt #10857

leofontenelle Sep 22, 2024

Description

Replies: 2 comments

cscheid Sep 23, 2024 Maintainer

cscheid Sep 23, 2024 Maintainer

leofontenelle
Sep 22, 2024

cscheid
Sep 23, 2024
Maintainer

cscheid
Sep 23, 2024
Maintainer