docs: add twitter metadata tags (#1732)
This commit is contained in:
15
website/src/components/twitter-meta.js
Normal file
15
website/src/components/twitter-meta.js
Normal file
@ -0,0 +1,15 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
|
||||
const TwitterMeta = ({ title, description, image, imageAlt }) => (
|
||||
<Helmet>
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="twitter:site" content="@netlifycms" />
|
||||
{title && <meta name="twitter:title" content={title} />}
|
||||
{description && <meta name="twitter:description" content={description} />}
|
||||
{image && <meta name="twitter:image" content={image} />}
|
||||
{image && imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
|
||||
</Helmet>
|
||||
);
|
||||
|
||||
export default TwitterMeta;
|
@ -1,7 +1,9 @@
|
||||
import React from 'react';
|
||||
import Helmet from 'react-helmet';
|
||||
import { graphql } from 'gatsby';
|
||||
import { trimStart, trimEnd } from 'lodash';
|
||||
|
||||
import TwitterMeta from '../components/twitter-meta';
|
||||
import Layout from '../components/layout';
|
||||
|
||||
export const BlogPostTemplate = ({ title, author, date, body, html }) => (
|
||||
@ -22,7 +24,10 @@ export const BlogPostTemplate = ({ title, author, date, body, html }) => (
|
||||
|
||||
const BlogPost = ({ data }) => {
|
||||
const { html, frontmatter } = data.markdownRemark;
|
||||
const { author, title, date, description, meta_description } = frontmatter;
|
||||
const { author, title, date, description, meta_description, twitter_image } = frontmatter;
|
||||
const { siteUrl } = data.site.siteMetadata;
|
||||
const twitterImageUrl =
|
||||
twitter_image && `${trimEnd(siteUrl, '/')}/${trimStart(twitter_image, '/')}`;
|
||||
|
||||
const desc = meta_description || description;
|
||||
|
||||
@ -32,6 +37,7 @@ const BlogPost = ({ data }) => {
|
||||
<title>{title}</title>
|
||||
{desc && <meta name="description" content={desc} />}
|
||||
</Helmet>
|
||||
<TwitterMeta title={title} description={desc} image={twitterImageUrl} />
|
||||
<BlogPostTemplate title={title} author={author} date={date} html={html} />
|
||||
</Layout>
|
||||
);
|
||||
@ -41,6 +47,11 @@ export default BlogPost;
|
||||
|
||||
export const pageQuery = graphql`
|
||||
query blogPost($slug: String!) {
|
||||
site {
|
||||
siteMetadata {
|
||||
siteUrl
|
||||
}
|
||||
}
|
||||
markdownRemark(fields: { slug: { eq: $slug } }) {
|
||||
frontmatter {
|
||||
title
|
||||
@ -48,6 +59,7 @@ export const pageQuery = graphql`
|
||||
# meta_description
|
||||
date(formatString: "MMMM D, YYYY")
|
||||
author
|
||||
twitter_image
|
||||
}
|
||||
html
|
||||
}
|
||||
|
Reference in New Issue
Block a user