🖥️
Tech Blog
About
GatsbyにShare機能、OGPタグをつける

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

Category
Programming
Author
Yoshiki
Tags
Gatsby
Blog
JavaScript
Description
今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。
Published
May 25, 2020
Last Updated
Last Updated May 25, 2020
Writings
この記事は約8分で読めます

はじめに

今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。
今回はWordPressのシェアボタンなんかでよくあるSNSへのシェアボタンとOGP設定タグの付け方を解説していきます。
notion image
SNSへのシェアボタン
notion image
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>
);

はてなブログアイコンの追加方法

最近はてなブログのアイコンを追加したのでやり方を載せておきます。
外部のJavaScriptファイルを読み込む必要があるためreact-helmetが必要になります。
<Helmet>
  <script type="text/javascript" src="//b.st-hatena.com/js/bookmark_button.js" charSet="utf-8" async="async"/>
</Helmet>

<a
  aria-label="share_hatena-bookmark"
  href="<http://b.hatena.ne.jp/entry/>"
  className="hatena-bookmark-button"
  data-hatena-bookmark-layout="touch-counter"
  title="このエントリーをはてなブックマークに追加"
  style={{ boxShadow: 'none' }}
>
  <img
    src="<https://b.st-hatena.com/images/entry-button/[email protected]>"
    alt="このエントリーをはてなブックマークに追加"
    width="24"
    height="24"
    style={{ border: 'none' }}
  />
</a>
サイズなどはCSSで適宜対応してください。
表示されるとこんな感じになります。
notion image

呼び出し方

ちょっと呼び出し方がもどかしいですが、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のボタンがあるので使ってみてはいかがでしょうか。
notion image

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のチャットなんかにも投稿しても確認できます。

まとめ

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