#04.UIデザインに関係する内部SEO対策まとめ
こんにちは！Webデザイナーのoyamadaです。
「WEBデザイナーの学習記録」シリーズも、今回で第4回目！
構成＆デザイン段階で知っておきたい内部SEO対策について、
覚え書きとしてまとめてみました。
（コーディング側も含めるとかなりの量ですので、今回はUIデザインに関係するものを個人的にピックアップしたものになります）
今回もTECHNICAL SEO BLOGさんのサイトで無料でダウンロードできる「SEOチェックリスト」より施策内容を一部引用＆参考にさせて頂きましたm(__)m
もっと詳しく知りたい方は、TECHNICAL SEO BLOGさんのサイトをご覧ください！
1.HTMLサイトマップとXMLサイトマップの作成
サイトマップには2種類あることをご存知でしたか？
デザイナーの私にとって「サイトマップ」といったら「HTMLサイトマップ」しか思い浮かばなかったです(・・;)
①HTMLサイトマップ → 人が対象 → ユーザビリティ対応
②XMLサイトマップ → クローラー対応 → SEO対策
専門家の間では、
HTMLサイトマップにSEO観点で直接的な有用性はないという考えから、
サイトマップが無いサイトもあるようです。
しかし、デザイナーとしては、「誰のためのサイト？」って考えたら、
サイトに訪れる「人」が使いやすいサイトであることが第一優先じゃないかとユーザビリティ向上も大事にすべきだと考え、2つのサイトマップは両方作成するのが望ましいのではと思いました。
サイトで迷子にならないようにデザインしたいものの、それでもページ数が多い時などは、サイトマップページがあるだけで、サイト全体を俯瞰して確認することができますからね！
2.モバイルSEO
Google は モバイルファーストインデックス（インデックス登録と掲載順位の決定にモバイル版のページを使用すること）を採用。
つまり、PC向けサイトよりもモバイル向けサイトを重視するようになったので、レスポンシブでスマホ対応しているだけでは評価されないとのこと。
スマホサイトのデザインが、以下のようなユーザービリティを満たしているかが判断基準だそうです。せっかく作るのなら、ユーザビリティもSEOも強いデザインにしたいですよね！
✅テキストを読める大きさにする
Googleは本文のフォントサイズが16pxを推奨
✅縦スクロールでページが見れるようにする
画像やテーブルの幅が、画面幅を超えるコンテンツを見つけ次第「このページはモバイルフレンドリーではない」と判断されてしまうので、SP用の画像を準備したり、max-width:100%などで、最大幅に合わせてレイアウトが変化させることを考えたデザインを検討
✅リンクやボタンを押しやすくする
テキストリンクの文字列（アンカーテキスト）が、1～3文字など短かったり、連続していると「押しにくい」もしくは「押し間違えやすい」と判断されてしまうので、テキストを長くしたり、行を分けたりする。
✅モバイルとPCで同じコンテンツを表示させる
Googleは、ブラウザの大きさに合わせ、レイアウトを柔軟に制御するレスポンシブデザインを推奨。
3.見出し
SEO対策を考えるとしたら、構成＆デザイン段階でもHTMLタグのh1、h2、h3などの見出しを適切に設定することが必要。
✅h1タグを1つだけ設定する
大見出しに当たるh1タグをHTML内に1つだけ記述します。H1タグはタイトルと同じテキストにします。
✅文書構造に合わせてh2タグ～h3タグを設定する
文書の階層構造に合わせ、中見出しをh2タグ、小見出しをh3タグとして記述します。
✅見出しにキーワードを含める
メインキーワードや関連キーワードを見出し内に含めるようにします。
✅長すぎる見出しを避ける
見出しは30文字以内を目安として設定します。
4.リンクの貼り方
リンクを張ると、リンク先ページに対して評価を分け与えることになるとのこと。SEO外部施策の領域となりますが、他のサイトから自分のサイトに張られたリンク（被リンク、バックリンク）を増やすとGoogleは被リンクを「コンテンツが有益なものである」と判断されて評価が上がるので、引用されるような価値を持ったページを作成することが重要とのこと。
この投稿でもTECHNICAL SEO BLOGさんのページを
けっこうな数、引用＆リンクさせていただいているので、
SEOに関しての知識を頂いた代わりに、
TECHNICAL SEO BLOGさんの被リンクとして貢献できているのではと
リンクを張ることで恩返しできてると思うと嬉しいです＾＾
アンカーリンク、短すぎてもダメでしたが、長すぎても重要なキーワードとして認識されず、リンク文字列は重要な語句に絞って短くつけるのが鉄則のようです。
そして、デザイナーなら大丈夫だと思うのですが、リンク部分が非常に小さかったり色が本文や背景色と同化してリンクだと分からないデザインだと、ガイドライン違反でスパムサイトと認識されてしまう可能性もあるので、
ユーザーがクリックしやすいデザインにすることがとても大事。
✅関連性の高いページへリンクを張る
関連性の高い記事同士の評価を改善できます。
✅アンカーテキストにリンク先ページのキーワードを含める
リンクの文字列にリンク先のページを表す短いテキストにします。
✅アンカーテキストは短く分かりやすい文字列にする
内部リンクの場合、リンク先への評価改善につながります。
✅目次のページ内リンクはh2タグにリンクを張る
h2がサイトリンクとして表示され、CTR向上が見込めます。
（Click Through Rate＝ユーザーに表示された回数（インプレッション数）のうち、ユーザーがクリックした回数の割合を計算したもの）
✅リンクと識別できる見た目にする
スパムサイトと認識される可能性を減らせます。
5.表示速度＆画像の使い方
デザイナーとしては画像がキレイに見えるようにつくりたい、高解像度ディスプレイに対応させるために画像を2倍サイズで準備することが多いのですが、大きい画像や動画のファイルサイズが大きいと表示速度が遅くなり、ユーザーの離脱だけでなく、Googleによるサイトのクローリングが効率的にできない、CSSなどの取得時にタイムアウトが起きやすくなるとのことからSEO的にも良くない。
その他、文字のアウトライン化はしない方が良いことや、ページの上部ほど情報の価値が高いとみなされているので、重要な画像は上部に配置する。
✅画像にテキストを埋め込まない
画像の中に、商品名やサービス名・キャッチコピー・見出しなどの重要なテキストを含めてしまうと、Googleは情報を正確に認識することが難しくなります。重要なテキストは、テキストをHTMLタグで構成するようにします。
✅画像や動画のファイルサイズの削減
関連性の高い記事同士の評価を改善できます。
✅画像ファイル名にローマ字表記を使わない
画像ファイル名は、Googleが画像の内容を理解するのに使用します。
ファイル名は、英単語をハイフンで区切った名前にします。できるだけ一般的な英語名称を含めるようにして、その画像を表すようにします。また、型番や固有名詞をファイル名に含めるようにします。
✅装飾目的の画像はalt属性を空にする
装飾目的の画像を使っている場合、imgタグでは alt="" のように設定します。「文脈上、重要な画像ではない」ことを示します。
✅重要な画像を上部に配置する
ユーザーはページを上から順に閲覧していくので、Googleもページ上部ほど、情報の質を重視しています。画像についても同様で、価値が高い画像はできるだけページ上部に配置します。
例えば、次のような方法があります。
●メインビジュアルにページの内容を表す画像を配置する
●ページに概要セクションを追加して、そのセクションに重要な画像を配置
まとめ
今回は、WEBページのデザインする時にも頭に入れておきたいと思ったSEO内部施策をピックアップして理解を深めながらまとめてみました。
デザイナーとして、より多くの人に見てもらえるWEBサイトにするためには、デザイン段階でもSEO施策を意識することが必要だなと改めて思いました。
少々長くなりましたが、これでSEO施策まとめシリーズは完結したいと思います！
最後までお付き合いいただき、ありがとうございましたm( _ _ )m