SEOタグの設計

ブログ

Gatsby

SEO

アフィリエイトの導入にむけて、SEO関連の対応を進めます。
いくつかやるべきことがるので列挙しつつ設計を進めていきます。

SEO検索ワードの設計
各種メタタグの設計
サイトマップ
カテゴリ・タグ一覧ページの作成
PWA対応
記事の作成時の見出し等のルール・フォーマット
noindexの解除
analiticsの導入・設定

それなりにGatsbyが対応してくれる様子だが、それぞれ詳細な実装を確認しておきたい。

他にも対応必要なことがありそうだが一旦これらを対応をした後に、「noindexの解除」を行い、googleにインデックスしてもらいます。

各種メタタグの設計

title

サイト名 | ページ名

keywords

いくつかのキーワードをカンマ区切りで、
記事ページではtagとカテゴリの内容を出力する

description

サイト内で固定の内容か？
記事ページでは記事の要約を記載する？

icon

それっぽい画像を作る。

ogp タグ

以下のようなものがあります。それぞれ内容を設計して出力するように実装します。

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="">
<meta name="twitter:site" content="">
<meta name="twitter:title" content="">
<meta name="twitter:image" content="">
<link rel="canonical" href="" />
<link rel='dns-prefetch' href='' />
<link rel='https://api.w.org/' href='' />
<link rel="alternate" type="application/json+oembed" href="" />
<link rel="alternate" type="text/xml+oembed" href="" />
<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:type" content="" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:site_name" content="" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="">
<link rel="icon" href="" sizes="32x32" />

こちら実相しました。React-helmetというプラグインを使って簡単に実装できました。

基本的にOGPタグの対応は完了しています。SEO関連の対策はコンテンツ的な話で他にもいろいろできますので、順次そちらに取り組んでいく予定です。

OGP画像は固定になっています。できれば記事ごとに異なる画像を設定したいですが、ちょっと様子見です。