From 1c0184946845a5837bcdde6057a482e298e40091 Mon Sep 17 00:00:00 2001
From: Tobias Jordans <t@tobiasjordans.de>
Date: Fri, 8 Oct 2021 20:04:04 +0200
Subject: [PATCH] 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
---
 docs/advanced-usage.md | 4 +++-
 lib/template.html      | 7 +++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/advanced-usage.md b/docs/advanced-usage.md
index e534abd..f334496 100644
--- a/docs/advanced-usage.md
+++ b/docs/advanced-usage.md
@@ -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 | "
diff --git a/lib/template.html b/lib/template.html
index 682330b..4701025 100755
--- a/lib/template.html
+++ b/lib/template.html
@@ -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 %}