numb_designer_seo

head編!WEBデザイナーが覚えて損無しのSEOタグ

Pocket

こんにちは!太偲@WEB屋です。本日は、WEBデザイナー(WEB制作担当者)向けの覚えて損のないSEO対策(headタグ)をお送りします!僕もWEBデザインからはじめて、SEOを学び、またWEBデザイナーを経てSEOの世界へ戻りといった経歴です。

少なからず制作サイド(デザイン・プログラム・サーバー)の苦労もわかっているつもり?です!

僕もSEOをやっていると、HTMLタグの話でデザイナーやコーダーの方へソースコードをこんな形に変えてほしいというような提案をする事があります。

ただ、それを聞いてもらって説明するのも良いのですが、やっぱり最終的に「SEO担当者がこう言ってたからやった。」というだけの流れで終わってしまう事が多いです。。。

なので、この記事を通じてデザイナーやコーダー含むWEB制作関係者で、これからSEOを理解しなければならない方も簡単にできる基礎SEO部分(headタグ)を理解してもらえたらと思います。

WEBデザイナーはSEOを覚えるべきなのか?

まず、WEBデザインを担当する方やコーディング・マークアップを担当する方が、流れの速いSEO業界の知識を得るべきなのか?という点ですが、得て損する事ではないので出来る限りの情報収集と基本は理解しておくべきでしょう。

外注でSEO業者が別になっている場合に限らず、SEO担当者が社内に居る様なインハウスSEO体制においても、WEBデザイナーとは完全分業になっている場合が多いかと思います。

その際、WEBデザイナーやコーディング担当者から「SEOはSEO担当者の仕事じゃないのか?」という状態になりがちですよね。

確かに、SEOの為にSEO担当者が居るのですが、制作着手段階マークアップ(ソースコーディング)時からもSEOは取り組まなければならない事項が多くあります。

プロジェクトが立ち上がる時点での、サイト構成等に関してはSEO担当者が中に入りすり合わせを行っていく事はできます。

しかし、制作後にコーディングしたhtmlソースを後からチェックし、細かいところまで指摘して修正を重ねるのでは非効率です。

とはいえ、古く腐ってしまう様な情報を得てしまわない様に、基本の考え方や検索エンジンの描く未来は理解しておかなければなりません。

WEBデザイナーがそんな事を経てSEOを覚えるというきっかけもあったりします↓

デザイン時ではなく、コーディングの時に調整すれば良い

デザインからサイトのレイアウトは始まっているので、その時点からマークアップも考慮したものを作って行く方がスムーズですよね。

ディレクターがワイヤーフレームの時点で、マークアップまで構成していれば骨が決まっているので、ここにSEOを考慮した形で組み込めば大きな問題が出る事はないと思いますが、その様な形は身近ではあまり聞いた事がありません。

優先的に覚えておきたいhead内のSEO metaタグ

SEOをする上でソースを上から行くと、まずはじめにhead内の記述があります。

ここで必要になってくる物として、基本は以下のタグがあります。

<!DOCTYPE html>
<html lang=”ja”>
 <head>
  <meta charset=”utf-8″>
  <meta name="google-site-verification" content="asdfasdfasdfasdfsdf">
  <meta name="robots" content="noindex,nofollow">
  <title>もんげータイトル</title>
  <meta name="description" content="ほげほげについてもんげー書いているページずら。">
  <meta name="keywords" content="ほげ,もげ,もんげー">
 <link rel="canonical" href="http://hogehoge.com/hoge/">
meta name google-site-verification Googleのサーチコンソール認証用コード。他にも認証方法はあるので、head内にこのタグを必ずいれる必要は無い。
meta name robots クローラーへのページ読み込み指示に使うタグ。googlebotと指定する事も出来る。
title タイトルタグ。検索結果の基本タイトル表示に使われる。Googleの気分で書き換えられる事もある。
meta name description ディスクリプションタグ。検索結果の説明文表示に使われる。Googleの気分で書き換えられる事もある。
meta name keywords キーワードタグ。Googlebotはサポートしていない。タグ程度の感覚で使うのが適切。
link rel canonical URLを正規化するためのタグ。このページはこのURLで表示する(検索結果の表示URL)のが正しいですという使い方。

head内metaタグ等のSEO項目においては、ご存知の方も多いと思うのですが、ここでももうちょっと深堀りしておきましょう。

meta name robotsの使い方と種類について

metaのロボッツタグについては、理解している方も多いのではないかと思います。

特にnoindexとnofollowについては認知度が高いのではないかと。noindexは検索結果へ出したくないページへ入れるタグで、nofollowは、このページ内のリンクを全てフォロー(評価)しないためのタグです。

WordPressでも表示設定にて、「検索エンジンがサイトをインデックスしないようにする」のチェックを入れる事で、このmetaタグが自動的に入る仕様ですね。

その他にもrobots用のタグは以下の様なものがあります。
※Googlebotがサポートしている物のみで、実用性のあるもののみ紹介します。

nosnippet 検索結果にてdescriptionの表示にあたる部分(説明文・スニペット)を出力しない。
noarchive Google検索のキャッシュと表示されるリンクを表示させない。アーカイブしないでほしい時。
unavailable_after:[date] 使いどころはまだ掴めてませんが、ページのクロールとインデックス登録を止める日時を指定できるそうです。
noimageindex Google検索で画像の参照元ページとして表示されない様にする。参照元として表示される事が不都合?な場合。
none これあまり使っているサイトを見た事が無いのですが、noindex,nofollowと同じ意味になるとの事。

タイトルタグ(title)は長いとダメなの?

titleタグに関しては、入っているのが当たり前で言わずともページ名とサイト名くらいは皆さん入れているかと思います。

ただ、質問を頂く事が多いのが「長い」タイトルになってしまっても大丈夫なのか?という点です。

これに関しては、Googleはちゃんと理解しているという認識です。少し古い記事ですが、以前にWEB担の鈴木さん記事でも書かれています。

検索結果にすべてが表示されずに省略されていたとしても、titleタグが何であるかをGoogleは認識している。よって極端に長いのでなければ、ランキングという点においてはさほど問題はないだろう。

上記記事でも書かれていますが、結局のところ文頭に内容を考察させる様な物が含まれていなかったり、スニペット(説明文)にて内容が見えない状態になってしまうとスルーされてしまう事も多くなります。

なので、クリックされやすい最適化されたタイトルがわかりやすいだろうという事です。

link rel 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以外のページは出てこなくなります。

使い方をミスしてしまうとインデックスに影響が出るので、しっかりと覚えておきましょう。

html headタグのSEOまとめ

今日は、head内ソース(metaタグなど)でSEO要素となる部分について説明しました。

WEBデザイナーだけに限らず、プログラマーの方も基本のこのあたりは覚えておいて間違いないかと思います。

CMSやフレームワークの様な仕組みになると、システム要件として満たさなければならない事も多いかもしれないので。

head内にあるタグはmetaを含めSEOでも基本的な部分が多いので、この記事を通じて少しでも理解して頂ければ嬉しいです。

また、CSSのSEO対策(スパム含む)については以下でまとめました。お時間ある際に読んで頂きたい!

SEOは一つずつやりながら覚えて行くのをオススメします

WEBデザイナーの方がSEOの知識を付けて行くには、どこから覚えて行ってどこから理解していけばいいのか?最初は難しく考えすぎてわからないと思います。

以下の書籍を僕はkindleで読みましたが、これからSEOをはじめてみたい方にとっても順序良く教科書の様に書いているので、読みやすいかなと思います。

いちばんやさしい新しいSEOの教本 人気講師が教える検索に強いサイトの作り方

考え方しか書いていない様な書籍とは違い、こうやってやってみましょうというような感じで、本を読みながらWEBサイトのSEO対策を自分でも進めて行けると思います。

WEBデザイナーだけでなく、プログラマーやこれからSEO覚えたい方も、気楽に入り込みやすい内容なのでオススメです。

最後まで読んで頂きありがとうございます。

当サイトでは、訪問して頂いた皆様へWEBアンケートのご協力をお願いしています。

また、すこ~しだけでも参考になりましたら、いいねやブックマークして頂くと個人的に喜びます。

Pocket

Comments