GatsbyにShare機能、OGPタグをつける

Programming

はじめに

この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。

内容

今回はWordPressのシェアボタンなんかでよくあるSNSへのシェアボタンとOGP設定タグの付け方を解説していきます。

SNSへのシェアボタン

OGP設定タグ

SNSシェアボタンを実装する

react-shareのインストール

めっちゃ簡単です。まずライブラリをインストール。

yarn add react-share

ShareSns.jsのコンポーネントの作成

適当なディレクトリを作成して(ここではShareSnsとします)

export const ShareSns = ({ articleUrl, articleTitle }) => (
  <div className={'ShareSns'}>
    <div>
      <FacebookShareButton url={articleUrl}>
        <FacebookIcon size={32} round />
      </FacebookShareButton>

      <LineShareButton url={articleUrl}>
        <LineIcon size={32} round />
      </LineShareButton>

      <LinkedinShareButton url={articleUrl}>
        <LinkedinIcon title={articleTitle} size={32} round />
      </LinkedinShareButton>

      <TwitterShareButton title={articleTitle} via="yoshiki__0428" url={articleUrl}>
        <TwitterIcon size={32} round />
      </TwitterShareButton>
    </div>
  </div>
);

呼び出し方

ちょっと呼び出し方がもどかしいですが、Gatsby buildをするときにwindow.location.hrefが未定義なのでビルド時に落ちてしまいます。そのため、typeofで確認する必要があります。

{typeof window !== 'undefined' && window.location.href &&
  <ShareSns articleUrl={window.location.href} articleTitle={title} />
}

もしくは呼び出し前にundifinedチェックをして値が存在するか事前に確認しても良いと思います。

const windowUrl = (typeof window !== 'undefined' && window.location.href) ? window.location.href : '';

これで下のようなボタンが表示されるはずです。他にも色々なSNSのボタンがあるので使ってみてはいかがでしょうか。

OGP設定タグ

react-helmetのインストール

大抵のTemplateには入っているのでやらなくても良いかもです。

yarn add react-helmet

Metaタグ専用のコンポーネントの作成

使い方は簡単です。Helmetタグを作成し、そこに必要なMetaタグを入力すればOKです。

この例ではOGとTwitterのOGPを設定しています。呼び出し元は画像データやタイトルデータが取得できる記事画面で呼び出すと良いと思います。Templateによって設計がまちまちなので環境に合わせて適用してみてください。

<Helmet>
  <html lang="jp" />
  <title>{title}</title>
  <meta name="description" content={description} />
  <meta property="og:site_name" content={title} />
  <meta property="og:image" content={image} />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content={title} />
  <meta name="twitter:description" content={description} />
  <meta name="twitter:image" content={image} />
</Helmet>

OGPタグの設定確認

netlifyにアップロードしたらTwitterのカード情報が確認できるサイトで対象のURLを入力して確認してみましょう。設定できていればOKです。Slackのチャットなんかにも投稿しても確認できます。

まとめ

いかがだったでしょうか?結構簡単に設定できたんじゃないかなと思います。ここらへんの機能もブログをやるのであれば必須なので是非やっておきましょう。それでは次回の記事で。

#CMS#Gatsby#OGP#Twitter

Related Links


Gatsbyでブログを始めるまで
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
タグ機能、カテゴリ機能をつける(応用編)
GatsbyにTableOfContents(目次)をつける
DarkModeのCSSを適用させる
GatsbyブログのSEO対策でやっておくこと一覧
多機能なGatsbyJSのThemeをつくってnpmに公開した話
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身

よく読まれている記事


Gatsbyでブログを始めるまで
GatsbyにShare機能、OGPタグをつける
Gatsbyにタグ機能、カテゴリ機能をつける(基礎編)
DL実装するときに理解すること
多機能なGatsbyJSのThemeをつくってnpmに公開した話
© 2020 Yoshiki Ohashi All rights reserved.