Add `og:image:alt` and `twitter:image:alt`

Twitter documentation https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/summary-card-with-large-image
> twitter:image:alt
A text description of the image conveying the essential nature of an image to users who are visually impaired. Maximum 420 characters.

Facebook / OG cocumentation
> og:image:alt - A description of what is in the image (not a caption). If the page specifies an og:image it should specify og:image:alt.

Closes https://github.com/jekyll/jekyll-seo-tag/issues/395
This commit is contained in:
Tobias Jordans 2021-10-08 20:04:04 +02:00
parent 36330e876c
commit 1c01849468
2 changed files with 10 additions and 1 deletions

View File

@ -98,6 +98,7 @@ For most users, setting `image: [path-to-image]` on a per-page basis should be e
* `path` - The relative path to the image. Same as `image: [path-to-image]`
* `height` - The height of the Open Graph (`og:image`) image
* `width` - The width of the Open Graph (`og:image`) image
* `alt` - The alternative image text for Open Graph (`og:image:alt`) and Twitter (`twitter:image:alt`)
You can use any of the above, optional properties, like so:
@ -106,6 +107,7 @@ image:
path: /img/twitter.png
height: 100
width: 100
alt: Twitter Logo
```
### Setting a default image
@ -158,7 +160,7 @@ Which will generate following canonical_url:
You can override the default title modifier for paginated pages from `Page %{current} of %{total} for ` to a string of your
choice by setting a `seo_paginator_message` key in your `_config.yml`.
For example:
For example:
```yml
seo_paginator_message: "%<current>s / %<total>s | "

View File

@ -37,6 +37,9 @@
{% if seo_tag.image.width %}
<meta property="og:image:width" content="{{ seo_tag.image.width }}" />
{% endif %}
{% if seo_tag.image.alt %}
<meta property="og:image:alt" content="{{ seo_tag.image.alt }}" />
{% endif %}
{% endif %}
{% if page.date %}
@ -61,6 +64,10 @@
<meta name="twitter:card" content="summary" />
{% endif %}
{% if seo_tag.image.alt %}
<meta name="twitter:image:alt" content="{{ seo_tag.image.alt }}" />
{% endif %}
{% if seo_tag.page_title %}
<meta property="twitter:title" content="{{ seo_tag.page_title }}" />
{% endif %}