Skip to content

Commit

Permalink
Add missing og images attributes (#851)
Browse files Browse the repository at this point in the history 
* fix(og): add missing type and secure_url image tags

* refactor(og): use the same logic for videos and images

* fixup! refactor(og): use the same logic for videos and images
  • Loading branch information
@simrobin
simrobin authored Sep 16, 2021
1 parent 64103b7 commit 46cb769
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 143 deletions.
2 changes: 2 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,14 @@ const Page = () => (
width: 800,
height: 600,
alt: 'Og Image Alt',
type: 'image/jpeg',
},
{
url: 'https://www.example.ie/og-image-02.jpg',
width: 900,
height: 800,
alt: 'Og Image Alt Second',
type: 'image/jpeg',
},
{ url: 'https://www.example.ie/og-image-03.jpg' },
{ url: 'https://www.example.ie/og-image-04.jpg' },
Expand Down
12 changes: 12 additions & 0 deletions cypress/e2e/seo.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,6 +65,18 @@ describe('SEO Meta', () => {
.then(tags => {
expect(tags[0].content).to.equal('Og Image Alt A');
});
cy.get('head meta[property="og:image:type"]')
.should('have.length', 1)
.then(tags => {
expect(tags[0].content).to.equal('image/jpeg');
});
cy.get('head meta[property="og:image:secure_url"]')
.should('have.length', 1)
.then(tags => {
expect(tags[0].content).to.equal(
'https://www.test.ie/secure-og-image-a-01.jpg',
);
});
cy.get('head meta[property="og:image:width"]')
.should('have.length', 1)
.then(tags => {
Expand Down
2 changes: 2 additions & 0 deletions e2e/next-seo.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,8 @@ const APP_DEFAULT_SEO: DefaultSeoProps = {
width: 800,
height: 600,
alt: 'Og Image Alt A',
type: 'image/jpeg',
secureUrl: 'https://www.test.ie/secure-og-image-a-01.jpg',
},
],
site_name: 'SiteName A',
Expand Down
8 changes: 8 additions & 0 deletions src/meta/__tests__/__snapshots__/buildTags.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -528,6 +528,14 @@ exports[`renders correctly 1`] = `
content="Alt text right here"
property="og:image:alt"
/>
<meta
content="https://www.test.ie/secure-image-01.jpg"
property="og:image:secure_url"
/>
<meta
content="image/jpeg"
property="og:image:type"
/>
<meta
content="800"
property="og:image:width"
Expand Down
10 changes: 10 additions & 0 deletions src/meta/__tests__/buildTags.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,8 @@ const SEO: BuildTagsParams = {
width: 800,
height: 600,
alt: 'Alt text right here',
type: 'image/jpeg',
secureUrl: 'https://www.test.ie/secure-image-01.jpg',
},
{ url: 'https://www.test.ie/image-02.jpg' },
{ url: 'https://www.test.ie/image-03.jpg' },
Expand Down Expand Up @@ -168,6 +170,12 @@ it('returns full array for default seo object', () => {
const ogSetImageAlt = container.querySelectorAll(
`meta[content="${SEO.openGraph.images[0].alt}"]`,
);
const ogSetImageType = container.querySelectorAll(
`meta[content="${SEO.openGraph.images[0].type}"]`,
);
const ogSetImageSecureUrl = container.querySelectorAll(
`meta[content="${SEO.openGraph.images[0].secureUrl}"]`,
);
const ogLocale = container.querySelectorAll(
`meta[content="${SEO.openGraph.locale}"]`,
);
Expand Down Expand Up @@ -242,6 +250,8 @@ it('returns full array for default seo object', () => {
expect(Array.from(ogSetImageHeight).length).toBe(1);
expect(Array.from(ogSetImageWidth).length).toBe(1);
expect(Array.from(ogSetImageAlt).length).toBe(1);
expect(Array.from(ogSetImageType).length).toBe(1);
expect(Array.from(ogSetImageSecureUrl).length).toBe(1);
expect(Array.from(ogLocale).length).toBe(1);
expect(Array.from(ogLocaleTag).length).toBe(1);
expect(Array.from(ogSiteName).length).toBe(1);
Expand Down
235 changes: 102 additions & 133 deletions src/meta/buildTags.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { BuildTagsParams } from '../types';
import React, { ReactNodeArray } from 'react';
import { BuildTagsParams, OpenGraphMedia } from '../types';
const defaults = {
templateTitle: '',
noindex: false,
Expand All @@ -10,8 +10,95 @@ const defaults = {
defaultOpenGraphVideoHeight: 0,
};

const buildOpenGraphMediaTags = (
mediaType: 'image' | 'video',
media: ReadonlyArray<OpenGraphMedia> = [],
{
defaultWidth,
defaultHeight,
}: { defaultWidth?: number; defaultHeight?: number } = {},
) => {
return media.reduce((tags, medium, index) => {
tags.push(
<meta
key={`og:${mediaType}:0${index}`}
property={`og:${mediaType}`}
content={medium.url}
/>,
);

if (medium.alt) {
tags.push(
<meta
key={`og:${mediaType}:alt0${index}`}
property={`og:${mediaType}:alt`}
content={medium.alt}
/>,
);
}

if (medium.secureUrl) {
tags.push(
<meta
key={`og:${mediaType}:secure_url0${index}`}
property={`og:${mediaType}:secure_url`}
content={medium.secureUrl.toString()}
/>,
);
}

if (medium.type) {
tags.push(
<meta
key={`og:${mediaType}:type0${index}`}
property={`og:${mediaType}:type`}
content={medium.type.toString()}
/>,
);
}

if (medium.width) {
tags.push(
<meta
key={`og:${mediaType}:width0${index}`}
property={`og:${mediaType}:width`}
content={medium.width.toString()}
/>,
);
} else if (defaultWidth) {
tags.push(
<meta
key={`og:${mediaType}:width0${index}`}
property={`og:${mediaType}:width`}
content={defaultWidth.toString()}
/>,
);
}

if (medium.height) {
tags.push(
<meta
key={`og:${mediaType}:height${index}`}
property={`og:${mediaType}:height`}
content={medium.height.toString()}
/>,
);
} else if (defaultHeight) {
tags.push(
<meta
key={`og:${mediaType}:height${index}`}
property={`og:${mediaType}:height`}
content={defaultHeight.toString()}
/>,
);
}

return tags;
}, [] as ReactNodeArray);
};

const buildTags = (config: BuildTagsParams) => {
const tagsToRender = [];
const tagsToRender: ReactNodeArray = [];

if (config.titleTemplate) {
defaults.templateTitle = config.titleTemplate;
Expand Down Expand Up @@ -498,61 +585,12 @@ const buildTags = (config: BuildTagsParams) => {
}

if (config.openGraph.images && config.openGraph.images.length) {
config.openGraph.images.forEach((image, index) => {
tagsToRender.push(
<meta
key={`og:image:0${index}`}
property="og:image"
content={image.url}
/>,
);

if (image.alt) {
tagsToRender.push(
<meta
key={`og:image:alt0${index}`}
property="og:image:alt"
content={image.alt}
/>,
);
}

if (image.width) {
tagsToRender.push(
<meta
key={`og:image:width0${index}`}
property="og:image:width"
content={image.width.toString()}
/>,
);
} else if (defaults.defaultOpenGraphImageWidth) {
tagsToRender.push(
<meta
key={`og:image:width0${index}`}
property="og:image:width"
content={defaults.defaultOpenGraphImageWidth.toString()}
/>,
);
}

if (image.height) {
tagsToRender.push(
<meta
key={`og:image:height${index}`}
property="og:image:height"
content={image.height.toString()}
/>,
);
} else if (defaults.defaultOpenGraphImageHeight) {
tagsToRender.push(
<meta
key={`og:image:height${index}`}
property="og:image:height"
content={defaults.defaultOpenGraphImageHeight.toString()}
/>,
);
}
});
tagsToRender.push(
...buildOpenGraphMediaTags('image', config.openGraph.images, {
defaultWidth: defaults.defaultOpenGraphImageWidth,
defaultHeight: defaults.defaultOpenGraphImageHeight,
}),
);
}

// videos
Expand All @@ -565,81 +603,12 @@ const buildTags = (config: BuildTagsParams) => {
}

if (config.openGraph.videos && config.openGraph.videos.length) {
config.openGraph.videos.forEach((video, index) => {
tagsToRender.push(
<meta
key={`og:video:0${index}`}
property="og:video"
content={video.url}
/>,
);

if (video.alt) {
tagsToRender.push(
<meta
key={`og:video:alt0${index}`}
property="og:video:alt"
content={video.alt}
/>,
);
}

if (video.width) {
tagsToRender.push(
<meta
key={`og:video:width0${index}`}
property="og:video:width"
content={video.width.toString()}
/>,
);
} else if (defaults.defaultOpenGraphVideoWidth) {
tagsToRender.push(
<meta
key={`og:video:width0${index}`}
property="og:video:width"
content={defaults.defaultOpenGraphVideoWidth.toString()}
/>,
);
}

if (video.height) {
tagsToRender.push(
<meta
key={`og:video:height${index}`}
property="og:video:height"
content={video.height.toString()}
/>,
);
} else if (defaults.defaultOpenGraphVideoHeight) {
tagsToRender.push(
<meta
key={`og:video:height${index}`}
property="og:video:height"
content={defaults.defaultOpenGraphVideoHeight.toString()}
/>,
);
}

if (video.secureUrl) {
tagsToRender.push(
<meta
key={`og:video:secure_url${index}`}
property="og:video:secure_url"
content={video.secureUrl.toString()}
/>,
);
}

if (video.type) {
tagsToRender.push(
<meta
key={`og:video:type${index}`}
property="og:video:type"
content={video.type.toString()}
/>,
);
}
});
tagsToRender.push(
...buildOpenGraphMediaTags('video', config.openGraph.videos, {
defaultWidth: defaults.defaultOpenGraphVideoWidth,
defaultHeight: defaults.defaultOpenGraphVideoHeight,
}),
);
}

if (config.openGraph.locale) {
Expand Down
13 changes: 3 additions & 10 deletions src/types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,4 @@
export interface OpenGraphImages {
url: string;
width?: number;
height?: number;
alt?: string;
}

export interface OpenGraphVideos {
export interface OpenGraphMedia {
url: string;
width?: number;
height?: number;
Expand Down Expand Up @@ -80,8 +73,8 @@ export interface OpenGraph {
type?: string;
title?: string;
description?: string;
images?: ReadonlyArray<OpenGraphImages>;
videos?: ReadonlyArray<OpenGraphVideos>;
images?: ReadonlyArray<OpenGraphMedia>;
videos?: ReadonlyArray<OpenGraphMedia>;
defaultImageHeight?: number;
defaultImageWidth?: number;
locale?: string;
Expand Down

0 comments on commit 46cb769

Please sign in to comment.