基本のコーディングルール (Basic Rules)<html><head><meta description,keyword><title><link rel=“canonical,next,prev”><meta ogp tag></head><body><header>
グローバルナビ(Global navi)
パンくずナビ(bread crumbs)</header><section>
メインコンテンツ(main contents,h1,h2,p…)</section><aside>サイドメニュー(side menu)</aside><script>多くのJavaScript(Many JavaScript)</script><script>構造化データ(Structured data)</script></body></html>

タグ

ポイント

description,keyword

メインキーワードを⼊れる

ogp tag

SNSでシェアされた時の情報を⼊れる

canonical,next,prev

重複コンテンツの場
合Googleに伝える

title

そのページで狙うキーワードを含める

JavaScript</body>の近辺において表⽰スピードをあげる

Structured Data

Googleに構造化データを伝える。
JSON-LDを使う基本のコーディングルールを示す。Googleはソースコードの先頭を評価しやすいので、なるべくメインコンテンツを上部に。
正しいHTMLを使用することでGoogleにより正しく内容を伝えることができる。HTML5は特に有効である。
JavaScriptなどは、なるべく</body>の近辺に設置し、アクセス直後の描画スピードをあげる。
1

TOPページのコーディング例 (Home Page)
タグポイントmeta description

メインキーワードを⼊れる

meta keyword

メインキーワードを⼊れる

title

メインキーワードとサイト名を⼊れる

h1

メインキーワードとサイト名を⼊れる

h2

⾃然な⽂章になるよ
うにメインキーワー
ドやサイトについて説明する<header><h1>メインキーワード＋サイト名称 (Main target keyword + site name) </h1><img alt=“image’s keyword” src=“MainVisual.jpg”>※グローバルナビ(Navi)<nav><ul><li>Page Name</li><li>Page Name</li></ul></nav></header>※メニュー (Menu)<aside><nav><ul><li>Category Name<ul><li>Page Name</li><li>Page Name</li><ul></li></ul></nav></aside>※内容 (Contents)例<section><h1>メインキーワード</h1><h2>メインキーワードについて</h2><p>xxxxxx</p><h2>このサイトについて</h2><p>xxxxxx</p></section>

フッター(Footer)はルールなし(no rule)。グローバルと同じでもOK。
<footer><ul><li>Page Name</li><li>Page Name</li></ul></footer>

TOPページは、メインで狙うキーワードを強化すること、離脱を防ぐことを目的とする。
必然的にキャッチーな画像と適切なメニューを設置することになる。メニューはページ名やカテゴリ名でリンクする。
コーディングや内容は例なので、あまり意識しすぎない。HTML５も用いて正しくGoogleに内容を伝えることが一番大切2

カテゴリページのコーディング例 (Category Page)
タグ

ポイント

meta description

カテゴリキーワードを⼊れる

meta keyword

カテゴリキーワードを⼊れる

title

カテゴリキーワードを⼊れる

h1

カテゴリキーワードを⼊れる

h2

各記事の名前にしてリンクにする<header><p>メインキーワード＋サイト名称 (Main target keyword + site name) </p>
※グローバルナビ(Navi)<nav><ul><li>Page Name</li><li>Page Name</li></ul></nav>
パンくず> ナビ > <strong>CategoryName</strong>※(bread crumbs)</header>※メニュー (Menu)<aside><nav><ul><li>Category Name<ul><li>Page Name</li><li>Page Name</li><ul></li></ul></nav></aside>※内容 (Contents)例<section><h1>カテゴリキーワードについて</h1><p>説明</p><h2>Page Name</h2><p>Pageの⼀部を表⽰</p></section>

フッター(Footer)はルールなし(no rule)。グローバルと同じでもOK。
<footer><ul><li>Page Name</li><li>Page Name</li></ul></footer>

カテゴリページは、基本的にカテゴリに属する記事一覧を表示するリンク集になる。
記事の上部でカテゴリに関する説明をすること。また各記事を読みたくなるように、できれば各記事の画像を設置したい。
よく間違いやすいTOPページとの違いは、<header>のところのサイト名称を<p>タグにする（狙うキーワードが違うから）。
またユーザーが使いやすくなるならば、サイドメニューもカテゴリ固有のメニューにした方がよい。
3

記事ページのコーディング例（Entry Page)<header><p>メインキーワード＋サイト名称 (Main target keyword + site name) </p>
※グローバルナビ(Navi)<nav><ul><li>Page Name</li><li>Page Name</li></ul></nav>
パンくず> ナビ > <strong>PageName</strong>※(bread crumbs)</header>※メニュー (Menu)<aside><nav><ul><li>Category Name<ul><li>Page Name</li><li>Page Name</li><ul></li></ul></nav></aside>※内容 (Contents)例<section><h1>キーワードについて</h1><p>サイト内の⽬次など</p><h2>⾃然な⽂章</h2><p>XXX<a href=“Page URL”>Keywordsを詳しく</a></p></section><ul><li>Same Category Name<ul><li>Page Name</li><li>Page Name</li><ul>
</li>
</ul>

タグ

ポイント

meta description

狙うキーワードを⼊れる

meta keyword

狙うキーワードを⼊れる

title

狙うキーワードを⼊れる

h1

狙うキーワードを⼊れる

h2

⾃然な⽂章にする。
おそらく狙うキーワードが⾃然に⼊る時もある。

フッター(Footer)はルールなし(no rule)。グローバルと同じでもOK。
<footer><ul><li>Page Name</li><li>Page Name</li></ul></footer>

記事ページは構造上はカテゴリページに似ているが、一番の違いは「内容」である。
ユーザーにしっかり読ませる内容にし、適切な見出しタグを用いて構築する。必要であれば他のページへのリンクも適切に入れる。
読み終わった後には、他の記事も読みたくなることが多いため、同一カテゴリの記事へのリンクを設置しておく。
4