(更新日:)

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>
);

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

最近はてなブログのアイコンを追加したのでやり方を載せておきます。

外部の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/button-only@2x.png"
    alt="このエントリーをはてなブックマークに追加"
    width="24"
    height="24"
    style={{ border: 'none' }}
  />
</a>

サイズなどはCSSで適宜対応してください。

表示されるとこんな感じになります。

呼び出し方

ちょっと呼び出し方がもどかしいですが、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でブログを始めるまで
Yoshiki Ohashi
2x歳の個人事業主エンジニア。SI企業1年, Webベンチャー企業2年で上流から下流の経験を経て独立。 エンジニアらしく性格は温和。プロジェクトチームに心理的安全性を求める。go gin | Spring | Java | Kotlin | Vue | Python | 筋トレ | キャンプ | 個人開発 | 新潟出身
© 2020 Yoshiki Ohashi All rights reserved.