SEOを準拠するためのコーディングガイドライン
headタグ内に関する項目
対応環境
Googlebot のレンダリングエンジンは、最新版の GoogleChrome に準拠しているため、GoogleChrome(最新版)のへ対応をお願いします。
それ以外のブラウザやOSの対応は、貴社のサイト制作ガイドラインに準拠頂いて問題ございません。
title
- <head>タグ内に設置する。
- 1ページに1つの<title>とし、複数記述されていないかを確認する。
- カテゴリやディレクトリごとに定められた命名規則に従って出力されるように設定する。
<title>タイトル</title>description
- 特に指示がなくても必ず出力されるように設定すること。
- ページ単位で設定できる入力枠を設定し、ページごとに出し分けができるようなシステムを設計すること。
- 出し分け設定を行った上で、デフォルトで表示させるテキストを定めること。
- デフォルトで表示させるテキストは、汎用的なディスクリプションを使用したり、本文を抜粋したりなどルールを定めること。
<meta name="description" content="概要文" />meta keyword
- 設定不要。理由は下記。
「設定することによるSEO上のメリットはない上、施策対象キーワードが外部に露見されてしまうため」
canonical
- 正規URLが自己参照 canonical として出力されるように設定すること。
- 必要に合わせてページ単位で設定できるシステムを設計する。
<link rel="canonical" href="URL" />noindex
- 必要に合わせてページ単位で設定できるシステムを設計する。
<meta name="robots" content="noindex">多言語設定
同じ内容のコンテンツを複数言語で提供するような場合、 <link>タグの hreflang属性を用いて設定が必要。
3言語で設定していうような場合、hreflang 属性をすべての言語で対応するページを記述する。
サイト全体で多言語展開されている場合は、各言語でページのスラッグを統一し、システムで自動設定できるように対応すること。
<link rel="alternate" hreflang="ja" href="https://cpz.works/">
<link rel="alternate" hreflang="en" href="https://cpz.works/en">
<link rel="alternate" hreflang="ch" href="https://cpz.works/ch"> prev/next の設定
Googleは、ページネーションに紐づく<link>タグのrel=””prev”” および rel=””next”” のサポートを終了しています。(2019/3)
2ページ目に遷移する場合、アンカーテキストは「2」「2ページ目」などと表記し、2ページ目のタイトルタグにも「2ページ目」と入れ込むことで、「複数に渡るコンテンツ群である」ということがユーザーにもクローラーにも分かりやすいようご設定ください。
その他
<head>タグ内に<iframe>を使用しない。
リダイレクト設定の手段としてmeta refresh を使用しない。
ソーシャル設定
サーバーサイドでの設定に関する項目
リダイレクト
URLの正規化
ページの削除
削除したページはステータスコード 404 or 410 を返すようにしてください。
削除したページをTOPページへリダイレクトさせるなどは
参考 : 404 と 410の違い
ページの移動
robots.txt
マークアップに関する項目
HTML / CSS
HTMLタグのマークアップの誤用によるSEO的マイナスは特にございませんが、W3C,WHATWGに基づいたセマンティックなマークアップを心がけてください。
JavaScript
主要なコンテンツを JavaScript で生成することは避けてください。
JavaScript によって生成されたコンテンツでも、Google はクロール・インデックスすること自体は可能ですが、
クロールからインデックスまでの時間がかかったり、正確に JavaScript が処理されない可能性がございます。
JavaScript は基本的にアニメーションなどの副次的要素で使用をしてください。
※ 検索システムやCMSに関連する部分などはこの限りではありません。
コンテンツ内部に関する項目
見出しタグ
パンくずリスト
HTMLサイトマップ
XMLサイトマップ
画像
アンカーテキスト
隠しコンテンツ
- display : none
リンクについて
rel sponserd
モバイル関連
MFI
モバイルフレンドリー
AMP化
URLの紐付け
構造化データマークアップ
- JSON-LDで記載すること
- ページ上にないコンテンツはマークアップしない
- マークアップできる項目は可能な限りマークアップする
詳しくはこちら
サチコ
見出しタグ( h1~h6 )
- <h1>タグは1ページに一つが基本ですが、ページの構成やコーディングの関係上、複数存在していても特に問題ございません。
- <h1>タグはページ間で重複しないようにしてください。
- コンテンツの構成に併せて<h1>から<h6>まで適宜使い分けてください。
- 見出しタグがh1,h2,h3,h4…と正しい順番でネスト構造となるような構成を心掛けてください。
強調( strong, em, b,i )
- 装飾要素として太字にする場合は<b>タグ、斜体にしたい場合は<i>タグを使用してください。<b>と<i>に強調の意味はございません。
- 重要性を示したい場合は<strong>タグを使用してください。
- 文章にアクセントをつけたい場合、<em>を使用してください。
(例 : 「猫はかわいい。犬はかっこいい」というテキストに対して、「猫」や「犬」に焦点を当てるか、形容する要素に焦点を当てるか)
※ <b><i>による太字や斜体は CSS によるスタイリングによってでも問題ございません。意味を強調したいときは基本的に<strong>タグを使用してください。
※ SEO上は特に差はありません。