quarto-dev / quarto-dev/quarto-cli

`image-width` and `image-height` not working with `open-graph` in some cases

Open
#12,016 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug html websites
Dominant language
JavaScript
Stars
6k
Forks
458
Avg merge
1d 9h
Merged PRs (30d)
41

Description

Bug description

Despite specifying image-width and image-height under open-graph, the respective properties do not appear in the resulting HTML in some cases.

Steps to reproduce

Start a new Quarto book project in RStudio and set _quarto.yml to the following:

project:
  type: book

book:
  title: "temp"
  author: "author"
  date: "2025. 02. 03."
  open-graph:
    image: surus.jpg
    image-width: 1200
    image-height: 892
  site-url: https://quarto.org/
  chapters:
    - index.qmd
    - intro.qmd
    - summary.qmd
    - references.qmd

bibliography: references.bib

format:
  html:
    theme:
      - cosmo
      - brand
  pdf:
    documentclass: scrreprt

(The figure is this one.)

I don't know its relevance, but my observation is that the problem goes away if you remove site-url or if you use a PNG file instead of the JPG, but using JPG and specifying site-url at the same time will result in this issue.

Expected behavior

The respective properties (i.e., og:image:height and og:image:width) should appear in the HTML:

<meta property="og:title" content="temp">
<meta property="og:description" content="">
<meta property="og:image" content="https://quarto.org/surus.jpg">
<meta property="og:site_name" content="temp">
<meta property="og:image:height" content="1200">
<meta property="og:image:width" content="892">
Actual behavior

The relevant part of the resulting HTML:

<meta property="og:title" content="temp">
<meta property="og:description" content="">
<meta property="og:image" content="https://quarto.org/surus.jpg">
<meta property="og:site_name" content="temp">

I.e., image-width and image-height does not appear at all.

Your environment
  • IDE: RStudio 2024.12.0 Build 467
  • OS: Windows 10
Quarto check output
Quarto 1.6.40
[>] Checking environment information...
      Quarto cache location: \AppData\Local\quarto
[>] Checking versions of quarto binary dependencies...
      Pandoc version 3.4.0: OK
      Dart Sass version 1.70.0: OK
      Deno version 1.46.3: OK
      Typst version 0.11.0: OK
[>] Checking versions of quarto dependencies......OK
[>] Checking Quarto installation......OK
      Version: 1.6.40
      Path: C:\Program Files\Quarto\bin
      CodePage: 1250

[>] Checking tools....................OK
      TinyTeX: (external install)
      Chromium: (not installed)

[>] Checking LaTeX....................OK
      Using: TinyTex
      Path: \AppData\Roaming\TinyTeX\bin\windows\
      Version: 2024

[>] Checking basic markdown render....OK

[>] Checking Python 3 installation....OK
      Version: 3.13.1
      Path: C:/Program Files/Python313/python.exe
      Jupyter: 5.7.2
      Kernels: python3

[>] Checking Jupyter engine render....OK

[>] Checking R installation...........OK
      Version: 4.4.2
      Path: C:/PROGRA~1/R/R-44~1.2
      LibPaths:
        - /AppData/Local/R/win-library/4.4
        - C:/Program Files/R/R-4.4.2/library
      knitr: 1.49
      rmarkdown: 2.29

[>] Checking Knitr engine render......OK

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the Quarto book configuration with a JPG image and site-url, then compare the generated HTML with the PNG or no-site-url cases. Trace the open-graph metadata handling and add coverage for the missing image-width and image-height properties; done means the expected Open Graph tags appear in the HTML for the reported configuration.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.