mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-12-24 01:42: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:
parent
e89b537c5c
commit
6d066f8711
4 changed files with 19 additions and 8 deletions
BIN
assets/p/serenity-4x.png
Normal file
BIN
assets/p/serenity-4x.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 9 KiB |
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
||||
|
|
|
@ -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}}
|
||||
|
|
Loading…
Reference in a new issue