Merge pull request #213 from totto2727-org/master

feat: add og:image:alt support
jshemas · Mar 3, 2024 · 497cfec · 497cfec
2 parents 1d56b01 + 7f9e115
commit 497cfec
Show file tree

Hide file tree

Showing 9 changed files with 31 additions and 2 deletions.
diff --git a/dist/lib/fields.js b/dist/lib/fields.js
@@ -32,6 +32,11 @@ const fields = [
         property: 'og:image:url',
         fieldName: 'ogImageURL',
     },
+    {
+        multiple: true,
+        property: 'og:image:alt',
+        fieldName: 'ogImageAlt',
+    },
     {
         multiple: true,
         property: 'og:image:secure_url',

diff --git a/dist/lib/media.js b/dist/lib/media.js
@@ -28,6 +28,7 @@ const mediaMapper = (item) => ({
     type: item[3],
     url: item[0],
     width: item[1],
+    alt: item[4],
 });
 const mediaSorter = (a, b) => {
     if (!(a.url && b.url)) {
@@ -79,7 +80,8 @@ function mediaSetup(ogObject) {
         || ogObject.ogImageProperty
         || ogObject.ogImageWidth
         || ogObject.ogImageHeight
-        || ogObject.ogImageType) {
+        || ogObject.ogImageType
+        || ogObject.ogImageAlt) {
         ogObject.ogImageSecureURL = ogObject.ogImageSecureURL ? ogObject.ogImageSecureURL : [];
         ogObject.ogImageURL = ogObject.ogImageURL ? ogObject.ogImageURL : [];
         ogObject.ogImageProperty = ogObject.ogImageProperty ? ogObject.ogImageProperty : [];
@@ -91,9 +93,10 @@ function mediaSetup(ogObject) {
         ogObject.ogImageWidth = ogObject.ogImageWidth ? ogObject.ogImageWidth : [];
         ogObject.ogImageHeight = ogObject.ogImageHeight ? ogObject.ogImageHeight : [];
         ogObject.ogImageType = ogObject.ogImageType ? ogObject.ogImageType : [];
+        ogObject.ogImageAlt = ogObject.ogImageAlt ? ogObject.ogImageAlt : [];
     }
     // format images and limit to 10
-    const ogImages = zip(ogObject.ogImageProperty, ogObject.ogImageWidth, ogObject.ogImageHeight, ogObject.ogImageType)
+    const ogImages = zip(ogObject.ogImageProperty, ogObject.ogImageWidth, ogObject.ogImageHeight, ogObject.ogImageType, ogObject.ogImageAlt)
         .map(mediaMapper)
         .filter((value) => value.url !== undefined && value.url !== '')
         .filter((value, index) => index < 10)

diff --git a/dist/lib/types.d.ts b/dist/lib/types.d.ts
@@ -76,6 +76,7 @@ export type ImageObject = {
     type?: string;
     url: string;
     width?: number;
+    alt?: string;
 };
 export type VideoObject = {
     height?: number;
@@ -195,6 +196,7 @@ export type OgObjectInteral = {
     ogImageType?: string | string[] | null[];
     ogImageURL?: string | string[] | null[];
     ogImageWidth?: string | string[] | null[];
+    ogImageAlt?: string | string[] | null[];
     ogLocale?: string;
     ogLocaleAlternate?: string;
     ogLogo?: string;

diff --git a/lib/fields.ts b/lib/fields.ts
@@ -30,6 +30,11 @@ const fields = [
     property: 'og:image:url',
     fieldName: 'ogImageURL',
   },
+  {
+    multiple: true,
+    property: 'og:image:alt',
+    fieldName: 'ogImageAlt',
+  },
   {
     multiple: true,
     property: 'og:image:secure_url',

diff --git a/lib/media.ts b/lib/media.ts
@@ -34,6 +34,7 @@ const mediaMapper = (item: ImageObject[] | VideoObject[]) => ({
   type: item[3],
   url: item[0],
   width: item[1],
+  alt: item[4],
 });
 
 const mediaSorter = (
@@ -92,6 +93,7 @@ export function mediaSetup(ogObject: OgObjectInteral) {
     || ogObject.ogImageWidth
     || ogObject.ogImageHeight
     || ogObject.ogImageType
+    || ogObject.ogImageAlt
   ) {
     ogObject.ogImageSecureURL = ogObject.ogImageSecureURL ? ogObject.ogImageSecureURL : [];
     ogObject.ogImageURL = ogObject.ogImageURL ? ogObject.ogImageURL : [];
@@ -104,6 +106,7 @@ export function mediaSetup(ogObject: OgObjectInteral) {
     ogObject.ogImageWidth = ogObject.ogImageWidth ? ogObject.ogImageWidth : [];
     ogObject.ogImageHeight = ogObject.ogImageHeight ? ogObject.ogImageHeight : [];
     ogObject.ogImageType = ogObject.ogImageType ? ogObject.ogImageType : [];
+    ogObject.ogImageAlt = ogObject.ogImageAlt ? ogObject.ogImageAlt : [];
   }
 
   // format images and limit to 10
@@ -112,6 +115,7 @@ export function mediaSetup(ogObject: OgObjectInteral) {
     ogObject.ogImageWidth,
     ogObject.ogImageHeight,
     ogObject.ogImageType,
+    ogObject.ogImageAlt,
   )
     .map(mediaMapper)
     .filter((value:ImageObject) => value.url !== undefined && value.url !== '')

diff --git a/lib/types.ts b/lib/types.ts
@@ -83,6 +83,7 @@ export type ImageObject = {
   type?: string;
   url: string;
   width?: number;
+  alt?: string
 };
 
 export type VideoObject = {
@@ -203,6 +204,7 @@ export type OgObjectInteral = {
   ogImageType?: string | string[] | null[];
   ogImageURL?: string | string[] | null[];
   ogImageWidth?: string | string[] | null[];
+  ogImageAlt?: string | string[] | null[];
   ogLocale?: string;
   ogLocaleAlternate?: string;
   ogLogo?: string;

diff --git a/tests/integration/basic.spec.ts b/tests/integration/basic.spec.ts
@@ -30,6 +30,7 @@ describe('basic', function () {
         width: '300',
         height: '300',
         type: 'image/png',
+        alt: 'The Open Graph logo',
       }]);
       expect(result.requestUrl).to.be.eql('https://ogp.me/');
       expect(result.charset).to.be.eql('utf-8');
@@ -61,6 +62,7 @@ describe('basic', function () {
       width: '300',
       height: '300',
       type: 'image/png',
+      alt: 'The Open Graph logo',
     }]);
     expect(result.requestUrl).to.be.eql('https://ogp.me/');
     expect(result.charset).to.be.eql('utf-8');
@@ -94,6 +96,7 @@ describe('basic', function () {
         width: '300',
         height: '300',
         type: 'image/png',
+        alt: 'The Open Graph logo',
       }]);
       expect(response.result.requestUrl).to.be.eql('https://ogp.me/');
       expect(response.result.charset).to.be.eql('utf-8');
@@ -112,6 +115,7 @@ describe('basic', function () {
       expect(result.ogUrl).to.be.eql('https://ogp.me/');
       expect(result.ogDescription).to.be.eql('The Open Graph protocol enables any web page to become a rich object in a social graph.');
       expect(result.ogImage).to.be.eql([{
+        alt: 'The Open Graph logo',
         url: 'https://ogp.me/logo.png',
         width: '300',
         height: '300',

diff --git a/tests/integration/static.spec.ts b/tests/integration/static.spec.ts
@@ -1760,6 +1760,7 @@ describe('static', function () {
           width: '1200',
           height: '630',
           type: 'image/jpeg',
+          alt: 'FILE - In this Oct. 8, 2014, file photo, a Wall Street address is carved in the side of a building in New York. Stocks are opening modestly higher on Wall Street, Friday, Aug. 11, 2017, led by gains in technology companies and banks. (AP Photo/Mark Lennihan, File)',
         }]);
         expect(result.twitterImage).to.be.eql([{
           url: 'https://ca-times.brightspotcdn.com/dims4/default/3d21428/2147483647/strip/true/crop/2048x1152+0+51/resize/1200x675!/quality/90/?url=https%3A%2F%2Fcalifornia-times-brightspot.s3.amazonaws.com%2Ff2%2F6c%2F8f7e89b7eb2a7ecc01f245e3ec0b%2Fla-1502459693-4svslqel7u-snap-image',
@@ -2800,6 +2801,7 @@ describe('static', function () {
         expect(result.ogLocale).to.be.eql('en');
         expect(result.twitterUrl).to.be.eql('https://www.vox.com/recode/2020/6/11/21287395/jack-dorsey-start-small-billionaire-philanthropy-coronavirus-twitter-square-kaepernick-rihanna');
         expect(result.ogImage).to.be.eql([{
+          alt: 'Jack Dorsey Sydney Photo Shoot',
           url: 'https://cdn.vox-cdn.com/thumbor/PP5h21sGbjyDt0BoZYKpdNUsFFs=/0x0:4746x2485/fit-in/1200x630/cdn.vox-cdn.com/uploads/chorus_asset/file/20030444/524250960.jpg.jpg',
           width: '1200',
           height: '630',

diff --git a/tests/unit/static.spec.ts b/tests/unit/static.spec.ts
@@ -112,6 +112,7 @@ describe('static check meta tags', function () {
       <meta property="og:image:type" content="image/png">
       <meta property="og:image:width" content="1">
       <meta property="og:image" content="http://foobar.png">
+      <meta property="og:image:alt" content="alt text">
       <meta property="og:image:secure_url" content="https://foobar.png">
     </head></html>`;
 
@@ -128,6 +129,7 @@ describe('static check meta tags', function () {
           width: '1',
           height: '2',
           type: 'image/png',
+          alt: 'alt text',
         }]);
         expect(data.html).to.be.eql(metaHTML);
         expect(data.response).to.be.a('response');