When a link to https://collaboraonline.github.io is shared (Open Graph / Twitter card previews in chat apps and social platforms), the preview card shows the empty laptop device frame instead of a screenshot of the product.
Why this happens
The site does not emit any og:image or twitter:image meta tag. layouts/partials/head.html includes Hugo's internal opengraph.html and twitter_cards.html templates, but those templates only output an image when the page front matter or the site config provides an images parameter, and neither does today.
With no image declared, the platforms that render the preview fall back to scraping an image from the page. They pick static/images/notebook.jpg, which is the bare laptop frame with an empty black screen. The actual product screenshot (static/images/homepage-image.png) is layered onto that frame with CSS, so scrapers never see the combined picture.
Suggested fix
Declare the screenshot as the site-wide card image in config.toml:
[params]
images = ["/images/homepage-image.png"]
Hugo's internal templates pick this up for every page that does not set its own images in front matter, and the Twitter card switches from summary to summary_large_image automatically.
Notes:
homepage-image.png is 2755x1550 (16:9), which is close enough to the recommended 1.91:1 card ratio for most platforms; a dedicated 1200x630 crop could be added later if the edges get cut.- Individual pages (Android, GSoC, etc.) can still override with their own
images front matter where a more specific screenshot makes sense.
When a link to https://collaboraonline.github.io is shared (Open Graph / Twitter card previews in chat apps and social platforms), the preview card shows the empty laptop device frame instead of a screenshot of the product.
Why this happens
The site does not emit any
og:imageortwitter:imagemeta tag.layouts/partials/head.htmlincludes Hugo's internalopengraph.htmlandtwitter_cards.htmltemplates, but those templates only output an image when the page front matter or the site config provides animagesparameter, and neither does today.With no image declared, the platforms that render the preview fall back to scraping an image from the page. They pick
static/images/notebook.jpg, which is the bare laptop frame with an empty black screen. The actual product screenshot (static/images/homepage-image.png) is layered onto that frame with CSS, so scrapers never see the combined picture.Suggested fix
Declare the screenshot as the site-wide card image in
config.toml:Hugo's internal templates pick this up for every page that does not set its own
imagesin front matter, and the Twitter card switches fromsummarytosummary_large_imageautomatically.Notes:
homepage-image.pngis 2755x1550 (16:9), which is close enough to the recommended 1.91:1 card ratio for most platforms; a dedicated 1200x630 crop could be added later if the edges get cut.imagesfront matter where a more specific screenshot makes sense.