第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント | デザインってオモシロイ -MdN Design Interactive-

第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント

2024.4.20 SAT

【サイトリニューアル!】新サイトはこちらMdNについて

知ってるつもりで意外と知らないSEO最新のキホン

第9回 Webデザイナーが押さえておくべき、内部SEO施策18のポイント

2015年03月24日
TEXT:押谷圭佑(ヴォラーレ株式会社)


ヴォラーレ株式会社 こんにちは。ヴォラーレ株式会社の押谷です。前回はリニューアルにおけるSEOの全体感の説明をしましたが、今回はより実践的で細かな施策を紹介します。

クライアントに「いま手がけているWebサイトのSEOもお願いしたい」と依頼された経験のあるWebデザイナーや、Web担当者を兼務しているWebデザイナーは、WebサイトのSEO対策を考えたことが一度はあると思います。そうしたWebデザイナーのために、押さえておくべき18のSEO内部施策に関するポイントを紹介していきます。


■HTMLの調整

基本的に、1ページに対して1テーマ(キーワード)として対策します。これはSEOにおけるHTMLの調整の基本であり、対策するキーワードは後述のtitle、description、h1などへ含めるように反映させます。

▼title(タイトル)
SEOにとってもっとも重要なものです。各ページに必ずキーワードを入れ、各ページ固有のtitleをつけましょう。titleはGoogleなど各種検索サイトの検索結果画面に表示されるので、クリック率にも影響します。クリックされやすいタイトルづけにこだわってください。なお、検索結果に表示される文字数は30文字程度なので、titleをすべて表示させたい場合は30文字以内に収めましょう。

▼description(ディスクリプション)
こちらも、SEOにとって重要。検索順位そのものに大きく影響はしませんが、検索結果画面に表示され、クリック率にも影響するので、こだわって作成してください。対策キーワードはもちろん、キーワードと掛け合わせて検索されるキーワードも入るようにしましょう。titleと同様に、各ページ固有のdescriptionを設定することが望ましいです。なお検索結果に表示される文字数はPC版で110文字程度、スマートフォン版で50文字程度になります。

▼h1
前述のふたつと同様、SEOにとって重要なものです。検索順位にもある程度影響するようなので、キーワードが含まれているか、ページ内容の見出しとなる端的なタイトルとなっているか確認しましょう。

以上が調整するべきHTMLです。なおtitleやdescriptionは、複数のWebページで重複することは好ましくありません。重複の確認を行う際は、Googleウェブマスターツールの「HTMLの改善」を使いましょう。より詳しい内容を知りたい方は、下記の記事もご覧ください。

参考ページ:SEOの基本中の基本!「titleタグ」「meta description」「h1タグ」の書き方まとめ
http://liginc.co.jp/web/seo/127545


■インデックスとクロールの施策

Googleのインデックスとクロールの考え方は小難しそうですが、Googleに「きちんとWebページを認識してもらう」「むだなWebページを認識させない」「むだなクロールをなくす」という基本的な点さえ押さえておけば、応用はいくらでも効きます。

▼リダイレクト
301リダイレクトと302リダイレクトが、本来とは異なる意味で使われているケースがあります。それぞれ使い方がまったく異なりますので、注意してください。

・301リダイレクト…恒久的なWebページの移転を示すときに使用。移転前のWebページの評価を引き継ぎます。
・302リダイレクト…一時的なWebページの移転を示すときに使用。移転前のWebページの評価は引き継ぎません。

▼canonical
canonicalは、重複するコンテンツが同じコンテンツであることをGoogleのクローラに認識させるために利用します。重複コンテンツの問題を解消する際、使われることが多いようです。重複しているWebページから統一すべきWebページに、canonicalを設定します。

参考ページ:canonical属性とは/link rel="canonical"によるURL正規化タグ——SEOにとって非常に重要な進歩(前編)
http://web-tan.forum.impressrd.jp/e/2009/03/05

▼robots.txt
robots.txtは、クローラに対してWebページへのアクセスを制限するための命令文を記述したファイルです。たとえば、Webサイト内に存在する、関係者のみ閲覧可能にしているWebページへクローラのアクセスを制限したい場合などに用いられます。

参考ページ:robots.txtの書き方(保存版)
https://www.suzukikenichi.com/blog/how-to-create-robotstxt/

▼ページネーション
記事の一覧ページや商品一覧ページでは、2ページ目、3ページ目…と複数のWebページを表示するケースが多いと思います。そういった場合は、複数のWebページが一覧ページであることをGoogleへ認識させるために「rel="prev" 」と「rel="next" 」を使います。

参考ページ:rel="prev" とrel="next"のページネーションにおける正しい使い方
https://www.suzukikenichi.com/blog/implementing-rel-prev-next-correctly/

▼ソフト404
ソフト404ページとは、404ページなのにステータスコード200を返しているWebページのことです。本来クローラに認識されたくないWebページが認識されている状態で、Webサイトの順位を大きく下げる原因にはなりません。しかし、慢性的にソフト404ページを量産している状態は、サイト全体として評価が下がる恐れがあります。

参考ページ:ソフト404エラーとは
http://www.seohacks.net/basic/terms/soft404/

▼内部リンクのテキスト
クローラはリンク先のWebページを認識する際に、発リンクのアンカーテキストを認識して、リンク先のWebページを評価します。ここでのポイントはテキストを使い、リンク先のWebページがわかる文言でリンクを設置することです。

▼リンク切れ
リンク先のWebページが表示できない発リンクをリンク切れとよびまずが、これはクローラにむだなクロールをさせている状態といえます。クローラはむだなクロールを嫌うため、サイト自体へのクロール頻度が徐々に減り、結果的にサイト全体として評価を下がる恐れがあります。リンク切れはWebサイトの内部リンクも、外部サイトへの発リンクも同様に扱われます。無料でWebサイトのリンク切れを確認できるツールもあるので、一度確認してみましょう。

参考ページ:リンクチェッカー(リンク切れチェックツール)
http://www.dead-link-checker.com/ja/

▼XMLサイトマップ
XMLサイトマップは、クローラ用のサイトマップです。クローラはすべてのWebページをクロールするわけではないので、サイト内にあるWebページをクローラに知らせるURLのリストファイルとして、XMLサイトマップを活用します。クローラに認識してもらうまでの手順としては、まず生成ツールでXMLサイトマップを作成し、サーバにアップロードします。その後、GoogleウェブマスターツールでXMLサイトマップを設置したURLを登録します。

参考ページ:サイトマップを作成-自動生成ツール「sitemap.xml Editor」
http://www.sitemapxml.jp/

参考ページ:XMLサイトマップとは
http://www.seohacks.net/basic/terms/xml_sitemap/

▼Webページの表示速度
Webページの表示速度は、Googleが検索順位を決定するための要因のひとつであることを公表しています。SEOという目的だけではなく、ページ表示速度が遅いWebサイトはユーザーにストレスを与えてしまい、離脱につながる可能性も高くなるでしょう。まずは、Webサイトのページ表示速度をGoogle Analyticsの「サイトの速度」やPageSpeed Insightsを使って確かめるとよいです。日本語に対応していませんが、Webページのどのリソースにどれくらいの時間を費やしているかを確認することもできます。

参考ページ:Pingdom Website Speed Test
http://tools.pingdom.com/fpt/

参考ページ:Webサイト高速化・表示速度改善のために知っておきたい基礎知識
http://www.seohacks.net/blog/crawl_index/site_speed/

▼隠れたコンテンツについて
Googleは、展開ボタンやタブで隠れている情報を検索結果の対象にしないと公表しています。実際、事例も確認できています。Googleは「最初からWebページに表示されていない情報は重要な情報でないと判断する」というスタンスを取っているので、重要な情報は展開ボタンやタブで隠さずに、最初からユーザーに見える状態で表示しておくとよいでしょう。なお、これらの内容はPC版Webページでの問題になります。スマホ版の検索順位は基本的にPC版Webページの評価に基づいて決まりますので、スマホ版のWebページでは問題になりません。

参考ページ:[続報] 重要なコンテンツならタブや展開ボタンで隠さないほうがいい
https://www.suzukikenichi.com/blog/do-not-hide-content-if-its-important/


■画像

時々、テキストの大部分が画像でつくられているWebサイトを見かけます。クローラは基本的にテキスト情報を認識するので、Webサイトの情報は可能な限りテキストで表現しないとWebページが評価されません。

▼alt要素
クローラは画像を認識できないので、alt要素には画像の内容を説明する端的なテキストを設定しましょう。

▼画像のデータサイズ
画像のデータが大きすぎるとWebページの表示速度が遅くなるので、できる限り小さくしましょう。

▼画像のテキスト化
前述のとおりクローラは基本的にテキスト情報を認識するので、情報はできる限り画像ではなくテキストで示すことが好ましいです。しかし、ここでよくデザイナーを悩ませるのが、「テキストのフォントにこだわりたい」といった場合。そのときはWebフォントを使うことで、デザイン性の高いフォントを使いつつテキストが表示できます。最近ではGoogleが無料で日本語にも対応したWebフォントを提供しているので、ぜひ使ってみてください。

参考ページ:無料の日本語フォント【Noto Sans Japanese】があまりにも美しいので、ブログに使ってみた
http://11neko.com/font-2/


■スマホ対応について

よく「スマホの検索結果に適したSEO対策はありますか」と聞かれますが、前述のとおり基本的にPC版Webページの評価がスマホ版の検索順位にも反映されます。ですので、対策を行うのはあくまでPC版Webページのみということになります。しかし、スマホ版Webページで下記2点の対応ができていないと、検索結果順位がPCに比べて大幅に順位が下がることもあるので注意しましょう。

▼alternate(オルタネート)とcanonical(カノニカル)
PC版Webページとスマホ版Webページを異なるURLで作成した際の対応方法です。Googleは基本的にURL単位でWebページを評価するため、PC版Webページとスマホ版WebページのURLが異なると重複コンテンツとして見られる可能性があります。そこで、スマホ版Webページから対象となるPC版Webページへ、canonicalを設定しましょう。また、PC版Webページからスマホ版Webページへalternateを設定し、各Webページが同じコンテンツのPC版Webページとスマホ版Webページであるとクローラに知らせましょう。

参考ページ:Google推奨のスマホとフィーチャーフォンに最適化したサイトの作り方
https://www.suzukikenichi.com/blog/building-websites-optimized-for-smartphones-and-feature-phones/

▼モバイルフレンドリー
Googleは、2015年4月21日にスマホ対応の有無をスマホ版の検索順位を決める要素に取り入れると公表しています。これによりスマホ対応していないWebサイトは、検索順位が下がってしまうかもしれません。Googleが無償で提供しているモバイルフレンドリーテストでは、モバイルフレンドリーの条件をどれほど満たしているかを確認できますので使ってみてください。実際、どの程度のインパクトがあるのかは2015年4月21日以降にならないとわかりませんが、スマホ版Webページを用意していないのであれば、制作にどれだけの費用・時間がかかるのかを事前に把握しておくとよいでしょう。

参考ページ:Google、スマホ対応サイトをモバイル検索結果で優遇するアルゴリズム変更を発表、4月21日から適用
http://www.seohacks.net/blog/algorithm/mobile_taiou_seo/

参考ページ:Google developer「モバイル フレンドリー テスト」
https://www.google.com/webmasters/tools/mobile-friendly/?hl=ja


まとめ

今回はデザイナー向けに18のSEO内部施策のポイントを紹介しました。SEOの内部施策を行う際の基本的な考え方は「GoogleにきちんとWebページを認識してもらう」「むだなWebページを認識させない」「むだなクロールをなくす」ということです。

今回紹介した施策のみを行ったとしても、検索順位が大きく上がるとは限りませんが、デザイナーとしては押さえておいても損はないと思います。SEO施策を考える立場としては、制作サイドでこういったSEOの施策を考えていただけると非常に心強いです。ぜひ、今回のポイントをチェックしてみてください。



ヴォラーレ株式会社

【著者プロフィール】
ヴォラーレ株式会社
ヴォラーレでは、旧来型の「リンクを使ったSEO」ではなく、技術/マーケティングの両側面からWebサイトを改善していくための本質的なSEOコンサルティングを中心としたWebコンサルティング事業を行っています。

Webコンサルティング、そのなかでもSEOを遂行すべく、WebディレクションやWebデザインに携わる方々に、最新のSEOに関する基本的な考え方・取り組み方をセミナーやメディア寄稿を通して伝える啓蒙活動も行っております。

●ヴォラーレ株式会社:http://www.seohacks.net/

twitter facebook このエントリーをはてなブックマークに追加 RSS
【サイトリニューアル!】新サイトはこちらMdNについて

この連載のすべての記事

アクセスランキング

8.30-9.5

MdN BOOKS|デザインの本

Pick upコンテンツ

現在