Counts the Clouds

GatsbyにOGPの指定を追加
2021.06.29

Gatsby
OGP

Walks with Purpose

html要素にprefix属性を追加

いちおう、このご時世なので基本的なOGPは入れておきたい。

OGPの公式にならってhtml要素にprefix属性を追加。Gatsbyの場合は.cache/defalut-html.jsをコピーしてhtml要素をカスタマイズする。

<html prefix="og: https://ogp.me/ns#">

その他のメタデータを追加

react-helmetの内容を返すSEO用のコンポーネントにタイトル、概要などの指定を追記。以下のようなイメージ。||でつなげているのは、記事をレンダリングするとき上書きするため。

// ...
return (
  // ...
  <meta property="og:title" content={title || siteMetadata.title} />
  <meta property="og:type" content={ogType || 'website'} />
  <meta property="og:url" content={`${siteMetadata.siteUrl}${path}`} />
  <meta property="og:image" content={`${siteMetadata.siteUrl}${ogImage}`} />
  <meta property="og:site_name" content={siteMetadata.title} />
  <meta property="og:description" content={description || siteMetadata.description} />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:site" content={siteMetadata.twitterAccountName}>
  // ...
)

og:imageがうまく設置できない

いろいろ調べた結果、デフォルトのsrc/imagesに置いてimportで読み込んでしまうのが一番ラクそう。何もしなくても画像を読み込めるあたり、file-loaderかraw-loaderが設定してあるのだろうか。

import ogImage from '../images/ogp.png'
// ...
<meta property="og:image" content={`${siteMetadata.siteUrl}${ogImage}`} />

Gatsby Cloudのプレビューでは問題なかったが、Firebase Hosting側でリンク切れになってしまった。本番だけで再現するのは勘弁してほしい。。

画像の設置場所を、記事を置いているposts以下にすると正しく表示できた。TwitterのCard validatorは失敗。

import ogImage from '../posts/images/ogp.png'
// ...
<meta property="og:image" content={`${siteMetadata.siteUrl}${ogImage}`} />

もしかすると、ただのタイミングなのかもしれないが、とりあえずこれで進める。

TwitterのCard validatorが通らない

TwitterのCard validatorが失敗するのは、長大なスタイルがOGPの前にあるとTwitterがOGPを読み取ってくれないからとのこと。そういうのはやめてほしい。。

gatsby-ssr.jsを追加して、スタイル要素より前にOGPがレンダリングされるようにする。

exports.onPreRenderHTML = function onPreRenderHTML({
  getHeadComponents,
  replaceHeadComponents,
}) {
  const headComponents = getHeadComponents();
  headComponents.sort((a, b) => {
    if (a.type === b.type || (a.type !== 'style' && b.type !== 'style')) {
      return 0;
    }

    if (a.type === 'style') {
      return 1;
    } else if (b.type === 'style') {
      return -1;
    }

    return 0;
  });

  replaceHeadComponents(headComponents);
};

さらに、react-helmetのサーバーサイドレンダリングができていなかったので、gatsby-plugin-react-helmetを追加。

これでTwitterのCard validatorが成功。

INFO:  Page fetched successfully
INFO:  15 metatags were found
INFO:  twitter:card = summary tag found
INFO:  Card loaded successfully

ちなみにFacebook向けの設定はしていないが、シェアデバッガでもプレビューはできた。