Generate PNG social cards for LinkedIn compatibility

Author: Clemens Vasters

.github/workflows/jekyll-gh-pages.yml

@@ -103,6 +103,8 @@ jobs:
           
       - name: Generate social cards for blog posts
         run: |
+          sudo apt-get update
+          sudo apt-get install -y librsvg2-bin
           chmod +x scripts/generate-social-cards.sh
           ./scripts/generate-social-cards.sh
           

_layouts/post.html

@@ -7,14 +7,15 @@
 
     {% seo %}
 
-    {% assign social_card_path = "/social-cards/" | append: page.slug | append: ".svg" %}
+    {% assign social_card_path = "/social-cards/" | append: page.slug | append: ".png" %}
 
-    <!-- Open Graph / Facebook -->
+    <!-- Open Graph / Facebook / LinkedIn -->
     <meta property="og:type" content="article">
     <meta property="og:url" content="{{ page.url | absolute_url }}">
     <meta property="og:title" content="{{ page.title | escape }}">
     <meta property="og:description" content="{{ page.excerpt | default: page.content | strip_html | truncate: 200 | escape }}">
     <meta property="og:image" content="{{ social_card_path | absolute_url }}">
+    <meta property="og:image:type" content="image/png">
     <meta property="og:image:width" content="1200">
     <meta property="og:image:height" content="630">
     <meta property="og:site_name" content="{{ site.title }}">

scripts/generate-social-cards.sh

@@ -105,11 +105,20 @@ for post_file in "$POSTS_DIR"/*.md; do
     title_escaped=$(echo "$title" | sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g')
 
     # Generate SVG
-    output_file="$SOCIAL_CARDS_DIR/${slug}.svg"
-    read_template | sed "s/TITLE_PLACEHOLDER/$title_escaped/g" | sed "s/DATE_PLACEHOLDER/$formatted_date/g" > "$output_file"
+    output_svg="$SOCIAL_CARDS_DIR/${slug}.svg"
+    read_template | sed "s/TITLE_PLACEHOLDER/$title_escaped/g" | sed "s/DATE_PLACEHOLDER/$formatted_date/g" > "$output_svg"
 
-    echo "Generated: $output_file"
+    echo "Generated: $output_svg"
+    
+    # Convert SVG to PNG using rsvg-convert (if available)
+    output_png="$SOCIAL_CARDS_DIR/${slug}.png"
+    if command -v rsvg-convert &> /dev/null; then
+      rsvg-convert -w 1200 -h 630 "$output_svg" -o "$output_png"
+      echo "Generated: $output_png"
+    else
+      echo "Warning: rsvg-convert not found, skipping PNG generation for $slug"
+    fi
   fi
 done
 
-echo "Social card generation complete!"
+echo "Social card generation complete!"