Fixing Broken Hugo Open Graph Previews with Lossless WebP Fallbacks

Vector graphics (SVGs) are the holy grail of modern web design. They render with pixel-perfect clarity on any screen size, maintain incredibly small file sizes, and can be styled with CSS. However, if you rely on SVGs for your website’s featured images, you’ll quickly run into a frustrating problem: they completely break Open Graph (OG) social media previews.

When you share a link on LinkedIn, Twitter, or WhatsApp, their scrapers look for an image to display in the preview card. Unfortunately, most of these platforms do not support SVG files for Open Graph images. The result? A broken or missing preview card that hurts your click-through rate.

Here is the exact engineering solution I implemented to fix this on my Hugo website (using the Blowfish theme) without sacrificing the crispness of my SVGs.

1. The Lossy Compression Trap

#

The obvious solution to the SVG problem is to provide a rasterized fallback image (like a PNG or JPEG). However, standard image compression often introduces ugly color banding and blurriness, especially around sharp text—ruining the premium feel of the vector original.

WebP is a modern image format that provides superior compression. But if you just use standard WebP conversion, it defaults to lossy compression.

The secret weapon here is lossless WebP. Lossless WebP compresses pixel data without discarding any color details, preserving the exact pixel clarity of the original vector render while still being ~26% smaller than an equivalent PNG.

The conversion is a two-step process. First, strip all EXIF metadata from the rasterized PNG using exiftool to reduce file size and remove unnecessary data. Then convert to lossless WebP using cwebp:

# Step 1: Strip all EXIF metadata from the PNG
exiftool -all= -overwrite_original input.png

# Step 2: Convert to lossless WebP
cwebp -lossless -q 100 input.png -o output.webp

Note: If color accuracy is critical (e.g. for brand assets), you can preserve the ICC color profile while still dropping other metadata by using cwebp -metadata icc -lossless -q 100 input.png -o output.webp and skipping the exiftool step.

This gives you a perfectly crisp, lightweight image ready for social media scrapers.

What About PNG?

#

If you don’t want to install cwebp or deal with an extra conversion step, PNG works perfectly fine as a social fallback format. Every social media platform supports PNG natively, and a metadata-stripped PNG is already a high-quality, lossless image.

# Simple PNG approach — just strip metadata and use the PNG directly
exiftool -all= -overwrite_original screenshot.png
# Rename and use as your social fallback
mv screenshot.png social-fallback.png

Then in your front matter:

images: ["social-fallback.png"]

PNG vs Lossless WebP — when to use which:

For most blogs, the difference between a 300 KB PNG and a 220 KB WebP is negligible. Use WebP if you want maximum optimization; use PNG if you want simplicity. Both are lossless and both render identically on social media.

Note: If you want to automate this conversion pipeline, check out my deep-dive Ultimate Guide to Automating SVG Rasterization to see a rendering compatibility comparison of the best command-line tools for the job.

2. The Hugo vs. Blowfish Conflict

#

Now that we have our crisp output.webp, we need to tell Hugo to use it for Open Graph tags, while still using the featured.svg for the actual website layout.

This is where things get tricky, especially if you are using a feature-rich theme like Blowfish.

Blowfish automatically searches for images in your page bundle using greedy wildcards (like *feature* or *cover*). If you name your fallback image featured.webp alongside your featured.svg, the theme’s logic might accidentally prioritize the WebP image and render it on your webpage instead of the SVG!

3. The “Social Fallback” Solution

#

To solve this conflict, we need a two-step approach that “blinds” the theme from accidentally using the fallback image on the frontend, while explicitly feeding it to the SEO scrapers.

Step 1: Rename the fallback image. Instead of naming it featured.webp, name it something the theme’s wildcard search won’t catch, such as social-fallback.webp.

Step 2: Explicitly define the image in Front Matter. In your Hugo blog post’s Markdown file, use the images array in the YAML front matter to explicitly point the Open Graph templates to this specific file.

---
title: "Your Awesome Blog Post"
date: 2026-07-19
images: ["social-fallback.webp"]
---

The Result

#

With this setup:

1. Your website’s frontend continues to perfectly render the crisp, lightweight featured.svg.
2. The Hugo SEO templates generate <meta property="og:image" content=".../social-fallback.webp"> tags in the <head> of your HTML.
3. When shared on LinkedIn or Twitter, their scrapers pull the perfectly crisp, lossless WebP image.

You get the best of both worlds: flawless vector rendering on your site and pristine social media preview cards.