moved to PNG over WEBP for open graph images to enable LinkedIn support

Author: davidwesst

.eleventy.js

@@ -54,11 +54,11 @@ module.exports = function (eleventyConfig) {
 		const imageSrc = path.join("src", this.page.url, src);
 		let metadata = await pluginImage(imageSrc, {
 			widths: [1200],
-			formats: ["webp"],
+			formats: ["png", "webp"],
 			outputDir: "dist/img/"
 		});
 
-		return metadata.webp[0].url.trim();
+		return metadata.png[0].url.trim();
 	}
 	eleventyConfig.addLiquidShortcode("image_uri", frontMatterImageShortcode);
 

CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 This a log of all the notable changes for [davidwesst.com](https://www.davidwesst.com/). You can find the source code on [GitHub](https://github.com/davidwesst/website).
 
+## [10.1.2] - 2022-11-16
+### Changes
+- Using PNG over WEBP for post open graph images for compatibility with LinkedIn
+
 ## [10.1.1] - 2022-11-12
 ### Fixes
 - Minor tweaks to meta tags for LinkedIn support ([#161](https://github.com/davidwesst/website/issues/161))

package.json

@@ -2,7 +2,7 @@
   "name": "dw-website",
   "private": true,
   "description": "The personal and somewhat professional website for David Wesst, a.k.a. DW, a.k.a. Wessty.",
-  "version": "10.1.1",
+  "version": "10.1.2",
   "author": "David Wesst <[email protected]>",
   "homepage": "https://github.com/davidwesst/website#readme",
   "license": "MIT",

src/_layouts/base.html

@@ -11,7 +11,7 @@
         {% assign page_type = type | default: "website" %}
 		{% assign page_image_height = image_height | default: 630 %}
 		{% assign page_image_width = image_width | default: 1200 %}
-		{% assign page_image_mimetype = image_type | default: "image/webp" %}
+		{% assign page_image_mimetype = image_type | default: "image/png" %}
 
         <link rel="canonical" href="{{ page_url | url  }}" />
         <link rel="stylesheet" href="/assets/main.css" />
@@ -35,7 +35,7 @@
 		<meta property="og:image:secure_url" content="{{ page_image | strip | prepend: 'https://www.davidwesst.com' }}" />
 		<meta property="og:image:alt" content="{{ image_alt }}" />
 		{% else %}
-		<meta name="image" property="og:image" content="https://www.davidwesst.com/static/default_og.webp" />
+		<meta name="image" property="og:image" content="https://www.davidwesst.com/static/default_og.png" />
         <meta property="og:image:alt" content="A pixel art version of David Wesst with glasses in a circle, looking to the top right towards text that is his name and the subtitle 'Code. Creativity. Cool Stuff'." />
 		{% endif %}
         <meta property="og:image:type" content="{{ page_image_mimetype }}" />