更新日:2016年10月1日TweetPocketこんにちは!太偲@WEB屋です。本日は、WEBデザイナー(WEB制作担当者)向けの覚えて損のないSEO対策(headタグ)をお送りします!僕もWEBデザインからはじめて、SEOを学び、またWEBデザイナーを経てSEOの世界へ戻りといった経歴です。少なからず制作サイド(デザイン・プログラム・サーバー)の苦労もわかっているつもり?です!僕もSEOをやっていると、HTMLタグの話でデザイナーやコーダーの方へソースコードをこんな形に変えてほしいというような提案をする事があります。それを聞いてもらって説明するのも良いのですが、やっぱり最終的に「SEO担当者がこう言ってたからやった。」というだけの流れで終わってしまう事が多いです。この記事を通じてデザイナーやコーダー含むWEB制作関係者で、これからSEOを理解しなければならない方も簡単にできる基礎SEO部分(headタグ)を理解してもらえたらと思います。headタグのSEOまとめSEOは一つずつやりながら覚えて行くのをオススメします最後まで読んで頂きありがとうございます。WEBデザイナーはSEOを覚えるべきなのか?まず、WEBデザインを担当する方やコーディング・マークアップを担当する方が、流れの速いSEO業界の知識を得るべきなのか?という点ですが、得て損する事ではないので出来る限りの情報収集と基本は理解しておくべきでしょう。外注でSEO業者が別になっている場合に限らず、SEO担当者が社内に居る様なインハウスSEO体制においても、WEBデザイナーとは完全分業になっている場合が多いかと思います。その際、WEBデザイナーやコーディング担当者から「SEOはSEO担当者の仕事じゃないのか?」という状態になりがちですよね。確かに、SEOの為にSEO担当者が居るのですが、制作着手段階マークアップ(ソースコーディング)時からもSEOは取り組まなければならない事項が多くあります。プロジェクトが立ち上がる時点での、サイト構成等に関してはSEO担当者が中に入りすり合わせを行っていく事はできます。制作後にコーディングしたhtmlソースを後からチェックし、細かいところまで指摘して修正を重ねるのでは非効率です。いえ、古く腐ってしまう様な情報を得てしまわない様に、基本の考え方や検索エンジンの描く未来は理解しておかなければなりません。WEBデザイナーがそんな事を経てSEOを覚えるというきっかけもあったりします↓WEBデザイナーがSEOを覚えるきっかけベスト3デザイン時ではなく、コーディングの時に調整すれば良いデザインからサイトのレイアウトは始まっているので、その時点からマークアップも考慮したものを作って行く方がスムーズですよね。ディレクターがワイヤーフレームの時点で、マークアップまで構成していれば骨が決まっているので、ここにSEOを考慮した形で組み込めば大きな問題が出る事はないと思いますが、その様な形は身近ではあまり聞いた事がありません。metaタグSEOをする上でソースを上から行くと、まずはじめにhead内の記述があります。ここで必要になってくる物として、基本は以下のタグがあります。content="ほげほげについてもんげー書いているページずら。google-site-verificationGoogleのサーチコンソール認証用コード。他にも認証方法はあるので、head内にこのタグを必ずいれる必要は無い。robotsクローラーへのページ読み込み指示に使うタグ。googlebotと指定する事も出来る。titleタイトルタグ。検索結果の基本タイトル表示に使われる。Googleの気分で書き換えられる事もある。descriptionディスクリプションタグ。検索結果の説明文表示に使われる。Googleの気分で書き換えられる事もある。keywordsキーワードタグ。Googlebotはサポートしていない。タグ程度の感覚で使うのが適切。canonicalURLを正規化するためのタグ。このページはこのURLで表示する(検索結果の表示URL)のが正しいですという使い方。head内metaタグ等のSEO項目においては、ご存知の方も多いと思うのですが、ここでももうちょっと深堀りしておきましょう。robotsの使い方と種類についてmetaのロボッツタグについては、理解している方も多いのではないかと思います。noindexとnofollowについては認知度が高いのではないかと。noindexは検索結果へ出したくないページへ入れるタグで、nofollowは、このページ内のリンクを全てフォロー(評価)しないためのタグです。WordPressでも表示設定にて、「検索エンジンがサイトをインデックスしないようにする」のチェックを入れる事で、このmetaタグが自動的に入る仕様ですね。その他にもrobots用のタグは以下の様なものがあります。※Googlebotがサポートしている物のみで、実用性のあるもののみ紹介します。nosnippet検索結果にてdescriptionの表示にあたる部分(説明文・スニペット)を出力しない。noarchiveGoogle検索のキャッシュと表示されるリンクを表示させない。アーカイブしないでほしい時。unavailable_after:[date]使いどころはまだ掴めてませんが、ページのクロールとインデックス登録を止める日時を指定できるそうです。noimageindexGoogle検索で画像の参照元ページとして表示されない様にする。参照元として表示される事が不都合?な場合。noneこれあまり使っているサイトを見た事が無いのですが、noindex,nofollowと同じ意味になるとの事。タイトルタグ(title)は長いとダメなの?titleタグに関しては、入っているのが当たり前で言わずともページ名とサイト名くらいは皆さん入れているかと思います。質問を頂く事が多いのが「長い」タイトルになってしまっても大丈夫なのか?という点です。これに関しては、Googleはちゃんと理解しているという認識です。古い記事ですが、以前にWEB担の鈴木さん記事でも書かれています。検索結果にすべてが表示されずに省略されていたとしても、titleタグが何であるかをGoogleは認識している。よって極端に長いのでなければ、ランキングという点においてはさほど問題はないだろう。参照:http://web-tan.forum.impressrd.jp/e/2015/01/16/19090/page/1上記記事でも書かれていますが、結局のところ文頭に内容を考察させる様な物が含まれていなかったり、スニペット(説明文)にて内容が見えない状態になってしまうとスルーされてしまう事も多くなります。クリックされやすい最適化されたタイトルがわかりやすいだろうという事です。canonicalの使い方と種類についてcanonical(カノニカル)URLですが、これ最初広まり始めた時に使い方間違っているサイトがかなりありました。実際に自分の周りでも間違っているデザイナーの方が居て、説明した事があります。ページ毎のURLを正規化、つまりこのURLで表示してくれという意味を持つタグなので、全ページをhogehoge.comにしてしまうと検索結果にはその1ページのみ表示してほしいという事になります。あとは、内容が同じようなページが2つあってそれを検索結果では1つだけ表示したい場合は、同じURLを指定するのも問題ないのですが、使い方を認知していない方がテクニカルな使用をするのはちょっとリスクがあるかなと思います。その他で言うと、自分で持っている別サイトのブログにて元サイトと同様の記事をあげる場合、別サイトにてcanonicalで元サイトのページURLを指定する事も可能です。この場合は、別サイトではなく元サイトのページが正規のURLとして検索結果にも表示されます。canonicalで別ドメインURLを指定する意味はあるのか?重複防止対策という事で実装する場合があります。間違ったcanonicalの使い方をしているサイトにおいては、Googleのクローラーがcanonicalを軽視してしまい、正しくURLを正規化してくれなくなってしまう様なので、注意が必要です。他にどんな場合に統一の使い方をするのか?色違いの製品ページ等では、その中の一つへcanonicalを指定する様な使い方もあると思います。ECサイトで似たような商品がページ単位で作られたりする場合、うまく活用する事が出来ますね。オリジナル文章がそれぞれにあるのであれば、統一した表記を使う必要はありません。非正規化したページは検索結果に出ないここは、押さえておかなければならないポイントです。canonicalの冒頭で述べましたが、サイト全てにhogehoge.comでcanonicalを指定した場合、site:(コロン)で検索してもhogehoge.com以外のページは出てこなくなります。使い方をミスしてしまうとインデックスに影響が出るので、しっかりと覚えておきましょう。headタグのSEOまとめ今日は、head内ソース(metaタグなど)でSEO要素となる部分について説明しました。WEBデザイナーだけに限らず、プログラマーの方も基本のこのあたりは覚えておいて間違いないかと思います。CMSやフレームワークの様な仕組みになると、システム要件として満たさなければならない事も多いかもしれないので。head内にあるタグはmetaを含めSEOでも基本的な部分が多いので、この記事を通じて少しでも理解して頂ければ嬉しいです。CSSのSEO対策(スパム含む)については以下でまとめました。お時間ある際に読んで頂きたい!CSS編!WEBデザイナーが覚えて損なしのSEOタグSEOは一つずつやりながら覚えて行くのをオススメしますWEBデザイナーの方がSEOの知識を付けて行くには、どこから覚えて行ってどこから理解していけばいいのか?最初は難しく考えすぎてわからないと思います。以下の書籍を僕はkindleで読みましたが、これからSEOをはじめてみたい方にとっても順序良く教科書の様に書いているので、読みやすいかなと思います。考え方しか書いていない様な書籍とは違い、こうやってやってみましょうというような感じで、本を読みながらWEBサイトのSEO対策を自分でも進めて行けると思います。WEBデザイナーだけでなく、プログラマーやこれからSEO覚えたい方も、気楽に入り込みやすい内容なのでオススメです。最後まで読んで頂きありがとうございます。当サイトでは、訪問して頂いた皆様へWEBアンケートのご協力をお願いしています。すこ~しだけでも参考になりましたら、いいねやブックマークして頂くと個人的に喜びます。