1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-23 12:52:10 +00:00

Support page-specific open graph images

Allow specifying open graph images for individual pages. Change default
site-wide open graph image alt-text to an empty string since the default
image only has visual value, and is better off hidden from assistive
technologies.

Set an open graph image for two articles.
This commit is contained in:
Rohan Kumar 2022-05-18 09:00:05 -07:00
parent e89b537c5c
commit 6d066f8711
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
4 changed files with 19 additions and 8 deletions

BIN
assets/p/serenity-4x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9 KiB

View file

@ -15,7 +15,9 @@ sitemap:
ChangeFreq: daily
Priority: 0.7
featured: 2
title: Best practices for inclusive textual websites
image: "serenity-4x.png"
image_alt: "Retro-looking web browser with bitmap fonts showing this article's \"code snippet 4\"."
title: "Best practices for inclusive textual websites"
---
<section role="doc-preface">
<h2 id="before-you-begin">Before you begin</h2>

View file

@ -12,6 +12,8 @@ tags:
- privacy
- platforms
featured: 3
image: "whatsapp_ad_dark.png"
image_alt: "WhatsApp PR notice describing data not collected; analysis in article."
title: WhatsApp and the domestication of users
---
<section role="doc-introduction">
@ -84,13 +86,13 @@ Those of us who were sounding the alarm a few years ago experienced a brief mome
The bait-and-switch operation incurred backlash significant enough for a noticeable minority of users to actually migrate; this number turned out to be slightly more than the rounding error WhatsApp was likely expecting. In response, WhatsApp delayed the change and published an ad to improve its image.
{{<transcribed-image id="whatsapp-ad">}}
{{<transcribed-image id="whatsapp-notice">}}
#### <span itemprop="name">Whatsapp Ad</span> {#whatsapp-ad-hd}
#### <span itemprop="name">Whatsapp Ad</span> {#whatsapp-notice-hd}
{{< transcribed-image-figure id="whatsapp-ad" has-transcript="true" >}}
{{< transcribed-image-figure id="whatsapp-notice" has-transcript="true" >}}
{{< picture name="whatsapp_ad" alt="WhatsApp ad describing data not collected" >}}
{{< picture name="whatsapp_ad" alt="WhatsApp notice describing data not collected." >}}
<figcaption itemprop="caption">

View file

@ -56,11 +56,18 @@
<meta property="og:type" content="article">
{{- end -}}
<!-- ANOTHER meta image?! When will it end? -->
{{ $og_image := resources.Get "/favicon512.png" | resources.Fingerprint "md5" -}}
{{- $og_image := resources.Get "/favicon512.png" | resources.Fingerprint "md5" -}}
{{- $og_image_alt := "" -}}<!--Default open graph image is purely decorative and visual, so it should be hidden from assistive technologies.-->
{{- with .Params.image -}}
{{- $og_image = resources.Get (printf "/p/%s" . ) | resources.Fingerprint "md5" -}}
{{- end -}}
{{- with .Params.image_alt -}}
{{- $og_image_alt = . -}}
{{- end }}
{{ printf `<meta property="og:image" content="%s">` $og_image.Permalink | safeHTML }}
<meta property="og:image:type" content="image/png">
<meta property="og:image:height" content="512"><meta property="og:image:width" content="512">
<meta property="og:image:alt" content="White-on-black colon and semicolon">
<meta property="og:image:height" content="{{ $og_image.Height }}"><meta property="og:image:width" content="{{ $og_image.Width }}">
<meta property="og:image:alt" content="{{ $og_image_alt }}">
<meta property="og:url" content="{{ .Site.Params.CanonicalBaseURL }}{{ $canonicalRelPermalink }}">
<meta property="og:description" content="{{ $description }}">
{{ hugo.Generator | replaceRE " />" ">" | safeHTML}}