GatsbyでOGP設定

2021/02/03

やりたいこと

スターターgatsby-starter-blogをカスタマイズしてブログ記事名から,自動的にOGP画像を生成して表示させたい。

やること

OGP画像の生成
seoコンポーネントの修正

OGP画像の生成

画像の生成にはVuePress時代と同じように,Placehold.jpを使用します。
下記みたいにURLにパスパラメータ,クエリパラメータいれることで画像を生成してくれます。
```
https://placehold.jp/{画像サイズ}.{フォーマット(png|jpg)}?css={JSON化したCSSパラメータ文字列}&text={表示したい文字列}
```
詳しい使い方はこちら。

seoコンポーネントの修正

src/components/seo.jsを開いて, 画像生成用に以下追加します。

  // OGP画像
  const hostUrl = "https://placehold.jp/"
  const size = {
    horizontal: 740,
    vertical: 457
  }
  const css = '{"background-color":" white","color":" #555555","font-size":" 35px","word-break":" break-all","padding":" 25px"}'
  const imageUrl =
      hostUrl + size.horizontal + "x" + size.vertical + ".png?css=" + encodeURIComponent(css) + "&text=" + title

metaタグ生成部分に以下を追加します。

      meta={[
        // ==========(略)==========
        {
          property: `og:image`,
          content: imageUrl,
        },
        // ==========(略)==========
      ].concat(meta)}

全体だとこんな感じ

import React from "react"
import PropTypes from "prop-types"
import { Helmet } from "react-helmet"
import { useStaticQuery, graphql } from "gatsby"

const SEO = ({ description, lang, meta, title }) => {
  const { site } = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
            description
            social {
              twitter
            }
          }
        }
      }
    `
  )

  const metaDescription = description || site.siteMetadata.description
  const defaultTitle = site.siteMetadata?.title

  // OGP画像
  const hostUrl = "https://placehold.jp/"
  const size = {
    horizontal: 740,
    vertical: 457
  }
  const css = '{"background-color":"aliceblue","color":" #555555","font-size":" 35px","word-break":" break-all","padding":" 25px"}'
  const imageUrl =
      hostUrl + size.horizontal + "x" + size.vertical + ".png?css=" + encodeURIComponent(css) + "&text=" + title

  return (
    <Helmet
      htmlAttributes={{
        lang,
      }}
      title={title}
      titleTemplate={defaultTitle ? `%s | ${defaultTitle}` : null}
      meta={[
        {
          name: `description`,
          content: metaDescription,
        },
        {
          property: `og:title`,
          content: title,
        },
        {
          property: `og:description`,
          content: metaDescription,
        },
        {
          property: `og:type`,
          content: `website`,
        },
        {
          property: `og:image`,
          content: imageUrl,
        },
        {
          name: `twitter:card`,
          content: `summary_large_image`,
        },
        {
          name: `twitter:creator`,
          content: site.siteMetadata?.social?.twitter || ``,
        },
        {
          name: `twitter:title`,
          content: title,
        },
        {
          name: `twitter:description`,
          content: metaDescription,
        },
      ].concat(meta)}
    />
  )
}

SEO.defaultProps = {
  lang: `en`,
  meta: [],
  description: ``,
}

SEO.propTypes = {
  description: PropTypes.string,
  lang: PropTypes.string,
  meta: PropTypes.arrayOf(PropTypes.object),
  title: PropTypes.string.isRequired,
}

export default SEO

ひとこと

ひとまず,VuePressのときと同じようにTwitterでタイトルのOGP表示をさせることができるように成りました。
まだ,タイトルが長い場合に変な部分で改行してしまう問題は解決できていないので,近いうちに改善したいと思います。

それではまた明日。

やりたいこと

やること

OGP画像の生成

seoコンポーネントの修正

ひとこと