Add thumbnail image to Twitter cards.

This commit is contained in:
Aleksander Helgaker
2019-08-25 12:29:51 +02:00
parent fcedb2194a
commit ebc6134453
10 changed files with 36 additions and 18 deletions

View File

@@ -1,7 +1,9 @@
// @flow strict
import React from 'react';
import Helmet from 'react-helmet';
import { withPrefix } from 'gatsby';
import type { Node as ReactNode } from 'react';
import { useSiteMetadata } from '../../hooks';
import styles from './Layout.module.scss';
type Props = {
@@ -10,19 +12,26 @@ type Props = {
description?: string
};
const Layout = ({ children, title, description }: Props) => (
<div className={styles.layout}>
<Helmet>
<html lang="en" />
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:site_name" content={title} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
</Helmet>
{children}
</div>
);
const Layout = ({ children, title, description, socialImage }: Props) => {
const { author, url } = useSiteMetadata();
const metaImage = socialImage != null ? socialImage : author.photo;
const metaImageUrl = url + withPrefix(metaImage);
return (
<div className={styles.layout}>
<Helmet>
<html lang="en" />
<title>{title}</title>
<meta name="description" content={description} />
<meta property="og:site_name" content={title} />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content={title} />
<meta name="twitter:description" content={description} />
<meta name="twitter:image" content={metaImageUrl} />
</Helmet>
{children}
</div>
)
};
export default Layout;