[活動記録] 2020/08/17 週
主に、GatsbyJS で生成したサイトにブログカード機能を組み込むための試行錯誤をしてました。
ブログカード機能
ブログカード機能とは、リンク先のサムネイルと説明文などをカード形式で表示しリンクする
機能です。
例えば、LINE や Twitter にも同様な機能があり、メッセージに
リンクを貼り付けるとカード形式に変換して表示してくれます。
この仕組みを調べたところ、HTML の meta 要素にある OGP プロパティの値を参照して、
カード形式に変換していることがわかりました。
仕組みがわかったので、本サイトに指定した URL から OGP を読み取るページを
試しに作成してみました。
関連するコミット：[update]OGP タグ取得ツールを組み込む
こちらを完成させるまでには色々とつまずくところがありました。
CORS ポリシーにつまずく
ブラウザ経由で認証なしに別のドメインの情報を取得しようとすると CORS ポリシーというものに引っかかり、情報を取得することができません。 CORS ポリシーは、XSS や CSRF などの脆弱性を防ぐことを目的としているらしいです。
これを解決するためには、次の策を検討しました。
- サーバー側で、すなわち Gatsby サイトビルド時に OGP 情報を取得する
- OGP 情報を返す公開されている API を利用する
- 自分で API を作成する
1 は GatsbyJS での実現方法がわからないのと、ビルド時間が長くなりそうなので断念しました。
2 は、こちらが利用できるかと思い試してみましたが、
リソースの共有は許可されておらず、CORS ポリシーに引っかかってしまいました。
結局は、3 の手段で対応しました。
無料で API（or Serverless Function）を公開しようとするとGlitchやVerselなどのサービスがありました。
今回は無料枠でも問題なく使えそうな Vercel を利用して実現してみました。
ソースコードはこちらです。
Vercel については、別記事にまとめてみようと思います。
ちなみに、このサイトをホスティングしている Netlify にも無料枠で同様のサービスはありましたが、
無料枠の制限を超えた場合、自動で有償枠に変えられてしまうのでやめておきました。
参考
サイトマップを作成する
GatsbyJS のプラグインにサイトマップを作成するものがありました。
下記のプラグインです。
https://www.gatsbyjs.com/plugins/gatsby-plugin-sitemap/
こちらのプラグインを利用してサイトマップを生成すると、 デフォルトではサイト内の全ての URL に対して一律で次の設定値となります。
- changefreq:daily
- priority:0.5
実体と乖離するので serialize オプションを利用して設定値を変更しました。
（changefreq は更新頻度を示しているのですが、全てのページを毎日更新しないですし、ページ毎に priority も変えたいというのもありました。）
関連するコミット：[update]サイトマップを生成する
また、このプラグイン利用してみて次の気づきがありました。
- lastmod(更新日)を設定するためには一工夫必要となる
- xml のスタイルシート(XSLT)は自力で何とかするしかなさそう
サイトマップ生成後は、Google Search Consoleでサイトマップを登録しておきました。
サイトマップを登録しておくとGoogleの検索エンジンのクロールに有益に働くようです。
参考