Skip to content

Auto-convert SVG post images to PNG for social thumbnails; support all raster formats#23

Merged
evijit merged 4 commits intomasterfrom
copilot/add-open-graph-tags-to-templates
Mar 30, 2026
Merged

Auto-convert SVG post images to PNG for social thumbnails; support all raster formats#23
evijit merged 4 commits intomasterfrom
copilot/add-open-graph-tags-to-templates

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 30, 2026 •
edited
Loading

Social crawlers reject SVGs for og:image. Blog posts using .svg as their image: front matter produced broken/missing social preview thumbnails.

Changes

  • _includes/head.html — strips the old SVG-exclusion guard; for SVG images swaps .svg→.png in the og/twitter meta tags only, leaving page.image (and thus page display) untouched. WebP/PNG/JPG pass through unchanged.
{% if _page_ext == 'svg' %}
  {% assign _og_img = page.image | replace: '.svg', '.png' | absolute_url %}
{% else %}
  {% assign _og_img = page.image | absolute_url %}
{% endif %}

  • .github/workflows/convert-svg-images.yml — triggers on pushes touching _posts/ or assets/img/blogs/; scans every post's image: front matter, converts any referenced SVG to a 1200×630 PNG sibling via rsvg-convert, and commits it back with [skip ci]. No front matter edits — the SVG stays as-is.

  • assets/img/blogs/field-notes-interview.png — pre-committed PNG for the one existing SVG post so the thumbnail resolves immediately without waiting for CI.

Original prompt

The blog pages within the evaleval.github.io repository lack banner images when shared on social platforms or messaging apps (e.g., iMessage). This is caused by the absence of Open Graph metadata in the HTML. To resolve this:

  1. Update the blog post layout templates (if dynamic templates are used, such as in Jekyll) to include the required Open Graph tags.
  2. Ensure these Open Graph tags are populated with appropriate content:
    • og:title - Title of the blog post.
    • og:description - A brief description of the blog post.
    • og:image - The URL of the banner image associated with the blog post. Use unique images for each post if available, or a default fallback image otherwise.
    • og:url - The URL of the blog post.
  3. Add a default og:image tag for blog posts missing specific banners.
  4. Verify that all banner images are publically accessible and properly linked.

After these changes, test the integration using external tools like Facebook's Sharing Debugger and Twitter's Card Validator to ensure the metadata renders previews correctly.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: The blogs should ideally show the blog banner image on socials/iMessage thumbnails. Currently it doesn't show any image

Assistant: It seems like you're experiencing an issue where blog pages aren't displaying a banner or preview image when shared on social platforms or in messages like iMessage. This typically happens when the required metadata, like og:image tags (Open Graph metadata), is missing or incorrectly set up.

To Fix This Issue:

  1. Add Open Graph Metadata:
    The HTML for your blog posts should include an og:image tag. This tag specifies the URL to the banner image. Here's an example:

    <meta property="og:image" content="https://yourwebsite.com/path/to/image.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">

  2. Ensure All Metadata Is Present:
    At a minimum, the following Open Graph tags should be included in your HTML:

    <meta property="og:title" content="Blog Post Title">
<meta property="og:description" content="A brief description of the blog post.">
<meta property="og:image" content="https://yourwebsite.com/path/to/image.jpg">
<meta property="og:url" content="https://yourwebsite.com/blog-post-url">
<meta property="og:type" content="website">

  3. Use Default Metadata for Missing Images:
    If some blog posts don't have a specific banner image, you can set a default og:image in the <head> of your website.

    For example:

    <meta property="og:image" content="https://yourwebsite.com/default-image.jpg">

  4. Check Robots.txt File:
    Ensure that the paths to your banner images are not blocked by the robots.txt file. For SEO and previews to work, the images must be publicly accessible.

  5. Test Integration:
    Use tools like the Facebook Sharing Debugger or Twitter's Card Validator to test if the preview works as expected.

  6. Update Templates:
    If you are using a static site generator (like Jekyll or Hugo):

    • Update the blog post layout template to include the Open Graph metadata dynamically based on the specific blog post.
    • For instance, in Jekyll, you can use: 
      <meta property="og:image" content="{{ site.url }}/assets/images/{{ page.banner }}">

Let me know if you'd like help implementing this in your repository specifically!

User: Can you open a pull request to do this

Assistant: Before creating a pull request, I'll need to ensure we have a problem statement and that the necessary metadata updates (Open Graph and others) can be implemented in this repository. I'll proceed by crafting a detailed problem statement for the changes and open a pull request for you.

Assistant: I've opened a pull request to add Open Graph metadata for blog page previews in the repository. Let me know if further adjustments are needed!

This pull request was created from Copilot chat.

⚡ Quickly spin up Copilot coding agent tasks from anywhere on your macOS or Windows machine with Raycast.

@evijit
Copy link
Copy Markdown
Contributor

evijit commented Mar 30, 2026

@copilot this should happen automatically for every new blog

Copilot AI changed the title [WIP] Add Open Graph metadata for blog post sharing Fix broken og:image URLs in blog post Open Graph metadata Mar 30, 2026
Copilot AI requested a review from evijit March 30, 2026 01:45
Copy link
Copy Markdown
Contributor Author

Copilot AI commented Mar 30, 2026

@copilot this should happen automatically for every new blog

Done in commit 4452a2c. The og:image and twitter:image tags are now generated automatically in head.html for every blog post:

  • If the post's image: is a raster format (WebP / PNG / JPG) → uses that image
  • If the post's image: is an SVG (or absent) → falls back to the site-wide site-banner.png

This also fixes the field-notes-interview post specifically — its image was an SVG, which social crawlers don't support, so it now gets the site banner as its thumbnail instead.

Copilot AI changed the title Fix broken og:image URLs in blog post Open Graph metadata Fix Open Graph image metadata for blog post social sharing thumbnails Mar 30, 2026
Copilot AI changed the title Fix Open Graph image metadata for blog post social sharing thumbnails Auto-convert SVG post images to PNG for social thumbnails Mar 30, 2026
Copilot AI changed the title Auto-convert SVG post images to PNG for social thumbnails Auto-convert SVG post images to PNG for social thumbnails; support all raster formats Mar 30, 2026
@evijit evijit marked this pull request as ready for review March 30, 2026 02:00
@evijit evijit merged commit 0e4bcc6 into master Mar 30, 2026
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@evijit evijit Awaiting requested review from evijit

Assignees

@evijit evijit

Copilot code review Copilot

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@evijit