明日の自分のために

moon indicating dark mode
sun indicating light mode

GatsbyJSで作ったブログに問い合わせフォームとプライバシーポリシーを設置した

June 17, 2020

AdSenseのヘルプドキュメントに必須コンテンツとしてプライバシーポリシーがあるので対応しました。各ページの末尾に配置されています。
それとおまけで問い合わせフォームも作りました。biographyのメールアイコンがそれです。

プライバシーポリシー

プライバシーポリシーの文章の内容は検索すると参考になるサイトが色々出てきたので、ありがたく参考にさせていただきました。
ただ、どの様にページを作るのが楽かちょっと悩みました。 文書を整形して表示するためだけにJSXを書くのは面倒なので、ブログ記事と同じ様にmarkdownを整形して表示したいです。
MDXに最低限のタグだけ追加して整形させる案が思いついた中で一番楽そうなので以下のようにしました。 このファイルをsrc/pages/に入れておけばページが生成されます。

src/pages/privacy-policy.mdx

import Layout from "gatsby-theme-blog/src/components/layout"
import SEO from "gatsby-theme-blog/src/components/seo"
import { Styled } from "theme-ui"
import { Link } from "gatsby"
<Layout location="/privacy-policy" title="明日の自分のために">
<SEO title="Privacy Policy" />
...マークダウンの本文...
<Styled.a as={Link} to="/">
Home
</Styled.a>
</Layout>

そして、プライバシーポリシーのページは検索に出る必要はないのでrobots.txtを作成してクロールから除外しました。 作成したrobots.txtはrobots.txtテスターで動作確認できます。

今回作成したrobots.txtの中身は以下のとおりです。/privacy-policyだけDisallowとしています。それ以外はAllowです。 /staticディレクトリに置いておけばコンパイル時にルート直下に配置されます。

/static/robots.txt

# Group 1
User-agent: Googlebot
Disallow: /privacy-policy
# Group 2
User-agent: *
Allow: /

ちなみにsitemapは用意していません。サイトマップが必要かどうかを見ると500ページ以下の小さいサイトでは不要なようです。

問い合わせフォーム

メールアドレスを記載しておくのは気が引けたので、Google Formsを使いました。 作業は新しいフォームを作成でテンプレートギャラリーから適当なものを選んでポチポチするだけでした。 メールアドレス宛に通知を出すこともできるため、メールアドレスを公開せずにメールと同じように連絡を受け取ることができます。