docs: add 'og:image:alt' metadata#2143
Conversation
|
✅ Deploy Preview for astro-starlight ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
295b75e to
67bee5e
Compare
There was a problem hiding this comment.
Thanks @julien-deramond — I think this is a reasonable change!
As an aside: I’m honestly not sure what on earth Twitter is doing with any of this. Looking at the astro.build example, the markup looks something like this:
<a
href="..."
aria-label="astro.build Astro 4.12: Server Islands | Astro"
role="link"
>
<div aria-label="Astro 4.12: Server Islands">
<img alt="Astro 4.12: Server Islands" src="...">
</div>
<span>Astro 4.12: Server Islands | Astro</span>
</a>Two aria-labels, an unnecessary role, an alt, and then actual text…
Nevertheless, this seems like a reasonable change to make.
One question: do you happen to know if both the twitter:image:alt and og:image:alt variants are required? Or would Twitter use the og: one if available?
Yeah, and they improved it, apparently. I stumbled upon a post where it was mentioned that the alt text was inside an HTML element with an
There are apparently fallback rules (that I haven't tested) here: https://developer.x.com/en/docs/twitter-for-websites/cards/overview/markup
We could rely on the What do you think? |
|
#2137 coincidentally removes most of the existing |
|
Oh, I didn't notice #2137, funny coincidence. I can understand the logic behind getting rid of I've subscribed to #2137. Whenever it's merged, I'll update my PR, no problem, to keep only the |
67bee5e to
ada448c
Compare
delucis
left a comment
There was a problem hiding this comment.
Thanks for the quick update — looks great!
Also, didn’t address this earlier, but given we have the one static OG image, I think a non-translated alternative text makes sense too.
* main: (275 commits) [ci] release (withastro#2165) Define well-known RTL locales before calling `getLocaleInfo()` for default locale (withastro#2167) Update dependencies (withastro#2166) Improve page load performance (withastro#2155) docs: Add CodeSweetly to showcase (withastro#2160) [ci] release (withastro#2145) Fix bug for projects with spaces in their pathname (withastro#2156) ci: update file icons (withastro#2157) [ci] format Merge <link rel="canonical" /> tags, quick fixes (withastro#2153) (withastro#2154) Add two new showcase sites (withastro#2149) [ci] format i18n(zh-cn): Update `environmental-impact.md` (withastro#2148) add Saasfly showcase (withastro#2147) docs: add 'og:image:alt' metadata (withastro#2143) Deleting unnecessary twitter meta tags, quick fixes (withastro#2137) [ci] format i18n(es): update `environmental-impact` (withastro#2144) [ci] release (withastro#2142) feat: Add Pinterest icon to social list (withastro#2135) ...
Description
This PR adds a metadata in Starlight documentation to improve the accessibility of Twitter cards when this documentation is shared on this platform, or other cards on different social media platforms.
Feel free to drop this PR if this is a topic that has already been discussed, or if you think this is not necessary. In this case, don't spend too much time on my PR :)
Important
After a discussion based on #2137, this PR will only implement
og:image:alt, and Twitter will use this as a fallbackTwitter/X platform
Let's consider this page: https://astro.build/blog/astro-4120/.
It contains the following metadata:
When shared on Twitter (see https://x.com/astrodotbuild/status/1813994888427684008), if you inspect the Twitter card, you'll see that the image has an alternative text, which is good for a11y:
Let's consider our own Starlight documentation at https://starlight.astro.build/ja/getting-started/ (for instance).
It contains the following metadata:
The image is the following:
But there's no
twitter:image:alt.When shared on Twitter (see https://x.com/NewGyu/status/1814669986096685126), if you inspect the Twitter card, you'll see that the image doesn't have any alternative text:
It's probably debatable whether a Twitter card image is decorative or not, and should have an alt text or not. However, our Starlight documentation image contains text that, if important, should be accessible to everyone, so via a screen reader too, as it is an information.
This is the reason why I'm suggesting this enhancement.
Other social media platforms
For other social media platforms, they mostly use Open Graph, and it also supports the alternative text for images with
og:image:alt. So this is basically the same explanation for the same conceptTranslate or not translate?
I've forced the following English text: "Make your docs shine with Starlight".
The reason is that I'd say we should have the exact same information as in the thumbnail (which is not translated).
But that's debatable. Maybe we can translate it for screen readers users only, for once, they would have the most precise information :)