From dc1c13b7d457d466c7206de0b240c507fdd01406 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 6 Oct 2017 11:16:01 +0300 Subject: [PATCH 1/7] seo.js improvements --- src/components/Page/Page.js | 9 +++++++-- src/util/seo.js | 33 ++++++++++++++++++++++++++++----- 2 files changed, 35 insertions(+), 7 deletions(-) diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 82a5e814..13c81884 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -48,6 +48,7 @@ class PageComponent extends Component { intl, logoutError, scrollingDisabled, + author, contentType, description, facebookImages, @@ -83,13 +84,14 @@ class PageComponent extends Component { const metaTitle = title || schemaTitle; const metaDescription = description || schemaDescription; const facebookImgs = facebookImages || [ - { name: 'facebook', url: facebookImage, width: 1200, height: 630 }, + { name: 'facebook', url: `${config.canonicalRootURL}${facebookImage}`, width: 1200, height: 630 }, ]; const twitterImgs = twitterImages || [ - { name: 'twitter', url: twitterImage, width: 600, height: 314 }, + { name: 'twitter', url: `${config.canonicalRootURL}${twitterImage}`, width: 600, height: 314 }, ]; const metaToHead = metaTagProps({ + author, contentType, description: metaDescription, facebookImages: facebookImgs, @@ -100,6 +102,7 @@ class PageComponent extends Component { twitterHandle, updated, url: canonicalURL(pathWithSearch), + locale: intl.locale, }); // eslint-disable-next-line react/no-array-index-key @@ -158,6 +161,7 @@ PageComponent.defaultProps = { authInfoError: null, logoutError: null, scrollingDisabled: false, + author: null, contentType: 'website', description: null, facebookImages: null, @@ -178,6 +182,7 @@ PageComponent.propTypes = { scrollingDisabled: bool, // SEO related props + author: string, contentType: string, // og:type description: string, // page description facebookImages: arrayOf( diff --git a/src/util/seo.js b/src/util/seo.js index 056c9ca7..d13b7f5b 100644 --- a/src/util/seo.js +++ b/src/util/seo.js @@ -2,6 +2,15 @@ import config from '../config'; export const canonicalURL = path => `${config.canonicalRootURL}${path}`; +const ensureOpenGraphLocale = locale => { + switch (locale) { + case 'en': + return 'en_US'; + default: + return locale; + } +}; + /** * These will be used with Helmet */ @@ -12,6 +21,7 @@ export const openGraphMetaProps = data => { description, facebookAppId, facebookImages, + locale, published, siteTitle, tags, @@ -45,12 +55,13 @@ export const openGraphMetaProps = data => { { property: 'og:title', content: title }, { property: 'og:type', content: contentType }, { property: 'og:url', content: url }, + { property: 'og:locale', content: ensureOpenGraphLocale(locale) }, ]; facebookImages.forEach(i => { openGraphMeta.push({ property: 'og:image', - content: `${canonicalRootURL}${i.url}`, + content: i.url, }); if (i.width && i.height) { @@ -93,14 +104,15 @@ export const twitterMetaProps = data => { title, twitterHandle, twitterImages, + url, } = data; - if (!(title && description && siteTwitterHandle)) { + if (!(title && description && siteTwitterHandle && url)) { /* eslint-disable no-console */ if (console && console.warning) { console.warning( `Can't create twitter card meta tags: - title, description, and siteTwitterHandle are needed.` + title, description, siteTwitterHandle, and url are needed.` ); } /* eslint-enable no-console */ @@ -112,13 +124,14 @@ export const twitterMetaProps = data => { { name: 'twitter:title', content: title }, { name: 'twitter:description', content: description }, { name: 'twitter:site', content: siteTwitterHandle }, + { name: 'twitter:url', content: url }, ]; if (canonicalRootURL && twitterImages && twitterImages.length > 0) { twitterImages.forEach(i => { twitterMeta.push({ name: 'twitter:image:src', - content: `${canonicalRootURL}${i.url}`, + content: i.url, }); }); } @@ -129,6 +142,10 @@ export const twitterMetaProps = data => { twitterMeta.push({ name: 'twitter:creator', content: twitterHandle }); } + if (canonicalRootURL) { + twitterMeta.push({ name: 'twitter:domain', content: canonicalRootURL }); + } + return twitterMeta; }; @@ -144,6 +161,12 @@ export const metaTagProps = tagData => { siteTwitterHandle, } = config; + const author = tagData.author || siteTitle; + const defaultMeta = [ + { name: 'description', content: tagData.description }, + { name: 'author', content: author }, + ]; + const openGraphMeta = openGraphMetaProps({ ...tagData, canonicalRootURL, @@ -157,5 +180,5 @@ export const metaTagProps = tagData => { siteTwitterHandle, }); - return [...openGraphMeta, ...twitterMeta]; + return [...defaultMeta, ...openGraphMeta, ...twitterMeta]; }; From e46294ec9aae5de9986c92f7c0d282b625b86f00 Mon Sep 17 00:00:00 2001 From: Vesa Luusua Date: Fri, 6 Oct 2017 11:16:32 +0300 Subject: [PATCH 2/7] Page.js improvements --- src/components/Page/Page.js | 6 +++++- src/translations/en.json | 2 +- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/Page/Page.js b/src/components/Page/Page.js index 13c81884..3c35371a 100644 --- a/src/components/Page/Page.js +++ b/src/components/Page/Page.js @@ -3,6 +3,7 @@ import Helmet from 'react-helmet'; import { withRouter } from 'react-router-dom'; import { FormattedMessage, injectIntl, intlShape } from 'react-intl'; import classNames from 'classnames'; +import config from '../../config'; import { canonicalURL, metaTagProps } from '../../util/seo'; import facebookImage from '../../assets/saunatimeFacebook-1200x630.jpg'; @@ -79,7 +80,8 @@ class PageComponent extends Component { const { pathname, search = '' } = history.location; const pathWithSearch = `${pathname}${search}`; - const schemaTitle = intl.formatMessage({ id: 'Page.schemaTitle' }); + const siteTitle = config.siteTitle; + const schemaTitle = intl.formatMessage({ id: 'Page.schemaTitle' }, { siteTitle }); const schemaDescription = intl.formatMessage({ id: 'Page.schemaDescription' }); const metaTitle = title || schemaTitle; const metaDescription = description || schemaDescription; @@ -128,6 +130,8 @@ class PageComponent extends Component { > {title} + + {metaTags}