return (
<Helmet title={this.props.title}>
- {/* Primary Meta Tags */}
- <meta name="title" content={this.props.title} />
+ {['title', 'og:title', 'twitter:title'].map(t => (
+ <meta property={t} content={this.props.title} />
+ ))}
+ {['og:url', 'twitter:url'].map(u => (
+ <meta property={u} content={url} />
+ ))}
{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
- <meta property="og:url" content={url} />
- <meta property="og:title" content={this.props.title} />
{/* Twitter */}
<meta property="twitter:card" content="summary_large_image" />
- <meta property="twitter:url" content={url} />
- <meta property="twitter:title" content={this.props.title} />
{/* Optional desc and images */}
- {this.props.description && [
- <meta
- name="description"
- content={md.renderInline(this.props.description)}
- />,
- <meta
- property="og:description"
- content={md.renderInline(this.props.description)}
- />,
- <meta
- property="twitter:description"
- content={md.renderInline(this.props.description)}
- />,
- ]}
+ {this.props.description &&
+ ['description', 'og:description', 'twitter:description'].map(n => (
+ <meta name={n} content={md.renderInline(this.props.description)} />
+ ))}
- {this.props.image && [
- <meta property="og:image" content={this.props.image} />,
- <meta property="twitter:image" content={this.props.image} />,
- ]}
+ {this.props.image &&
+ ['og:image', 'twitter:image'].map(p => (
+ <meta property={p} content={this.props.image} />
+ ))}
</Helmet>
);
}