SEO対策にHTMLの知識は欠かせません。
最近ではMozやSEMRushなどのSEOツールを使うとSEO対策のためにサイト内の何を変えたほうが良いかある程度教えてくれますが、HTMLを知っていたほうがより良い最適化ができると思います。
SEOコンサルタントとして成功したいのであれば、ベーシックなHTMLを知っている事は、必ず役に立つはずです。
ちなみに自分は面接する側なので、HTMLタグの質問やHTMLのコードだけを見せて何を修正したほうが良いかなどテストで出します。
今回はSEO対策するなら知っておきたいHTMLタグを紹介します。
まず簡単にHTMLとは
HTMLはウェブページを作成するために開発されたマークアップ言語です。
Google ChromeなどのブラウザはHTMLを読み込んで解釈し、ブラウザにページを表示します。
このデジタルブログのページもHTMLで作られています。
SEO対策にはHTMLの知識は欠かせない
グーグルなどの検索エンジンはHTMLタグを読み込み、サイトのタイトルや見出しや画像などの情報を読み込みます。
HTMLが間違って書かれていると、検索エンジンがサイトを読み込めなかったり、サイトの内容を間違って解釈してしまうことがあります。
数あるHTMLタグの中でも、この記事で紹介するHTMLタグはSEO対策にとても重要なモノです。ぜひすべて覚えましょう。
１．title – タイトル
titleタグはウェブページのタイトルを指定するもので、グーグルの検索結果に表示されるタグです。
最近ではユーザーの検索クエリによって表示されるタイトルが変わる事もありますが、デフォルトはこのタイトルタグに使用されているテキストが使用されます。
ページタイトルは、SEO対策で重要な要素なので、キーワードを入れ、ユーザーにも検索エンジンにもすぐに内容が分かるものを書くのことをおすすめします。
titleタグの記述例
titleタグはHTMLのhead部分に記述します。
<title>ABC会社</title>titleタグの設定のポイント
・ページ毎に違うタイトルを書く事
・ページの内容がすぐに分かるタイトルにする
・検索結果に表示される文字数、３２文字以内にする
・なるべくユーザーがクリックしそうなタイトルを考える
・狙っているキーワードを入れる
２．meta description – メタ・ディスクリプション
Metaタグには何種類もの属性(Attribute)があります。
Meta Descriptionはページの概要のようなもので、検索結果では以下のようにページタイトルとともに表示されます。
titleタグのように、ユーザーの検索クエリによって勝手に書き換えられてしまうこともあります。
Meta Descriptionは直接SEOには影響がないと言われていますが、検索結果でのクリック率に影響するので、SEOのRank Brainというアルゴリズムに影響すると言われています。
検索結果でユーザーはサイトにアクセスするかどうかタイトルとメタディスクリプションに書かれている説明文を見て判断するので、しっかりと時間を掛けて良い説明文を書きましょう。
Meta Descriptionの記述例
titleタグと同じくHTMLのhead部分に記述します。
<meta name="description" content="このページはSEOに役立つHTMLタグを紹介します。" />Meta Descriptionの設定のポイント
・ページ毎に違うMeta Descriptionを書く事
・なるべくユーザーがクリックしそうなテキストを入れる
・狙っているキーワードを入れる
３．meta robots – メタ・ロボッツ
Meta Descriptionと同じく、Metaタグの一つ。
Meta Robotsはウェブページに表示されるものではなく、検索エンジンのクローラーを制御するためのタグです。
Contentタイプが数種類ありますが、以下の4つのタイプがよく使われます。
noindex – noindexは指定したページのインデックスを拒否するようにクローラーに指示します。
index – indexはnoindexの逆で、指定したページのインデックスするようにクローラーに指示します。
nofollow – nofollowは指定したページのリンク先に評価を受け渡すことを拒否します。
＊評価とはPageRankのことで、検索エンジンはページにリンクがあると、そのページのSEO評価をリンク先に渡してしまいます。
follow – followはnofollowの逆で、指定したページのリンク先に評価を受け渡してオッケーと指示します。
noindexかindexとnofollowかfollowを同時に記述しても大丈夫です。
Meta Robotsは記述されていなくても良く、ウェブページはデフォルトで index, followとして扱われます。
Meta Robotsの記述例
titleタグと同じくHTMLのhead部分に記述します。
<meta name="robots" content="index" />複数のMeta Robotsタイプを記述する場合はこうなります。
<meta name="robots" content="index, nofollow" />
<meta name="robots" content="nofollow, noindex" />Meta Robotsの設定のポイント
・ 記述していなくてもオッケー
・ 間違って記述してしまうと、検索エンジンをブロックしてしまうので要注意
４．heading – 見出しタグ
ヘディングは見出しタグで、H1からH6まで６種類があります。
SEO対策で特に重要なのはH1タグです。なのでH1タグはページに必ず一回記述する事をおすすめします。
H2からH6まではH1と比べてあまりSEO対策に重要ではないので、ページに複数記述しても問題ありません。
H1タグの記述例
headingタグはページに表示されるので、HTMLのbody部分に記述します。
<h1>タイトルは重要</h1>複数のMeta Robotsタイプを記述する場合はこうなります。
headingタグの設定のポイント
・可能であればH1は各ページ一回のみ
・キーワードを入れる
・ページタイトルと同じ、または似たようなH1を入れる
・ H2からH6の見出しはページに数回記述しても問題ない
５．a href – リンク
aタグはアンカータグと言われ、hrefはアンカータグの属性です。
a hrefはリンクを作るときに使われます。
リンクタグの記述例
アンカータグはページに表示されるので、HTMLのbody部分に記述します。
リンクは絶対パスと相対パスがあります。
絶対パス
絶対パスは外部サイトやサイト内のページにリンクする時に使用します。
<a href="https://www.yahoo.co.jp">ヤフー</a>相対パス
相対パスはサイト内のページにリンクする時に使用します。現在表示されているURLを起点にURLを指定します。
以下の例では同じディレクトリにあるindex.phpにリンクしています。
<a href="index.php">ホーム</a>以下の例では同じディレクトリにあるindex.phpにリンクしています。
<a href="index.php">ホーム</a>リンクタグの設定のポイント
・リンクを作成したら必ずリンクが正確に設定されているかチェックしよう
・外部リンクが多いとSEO評価をたくさん外部サイトに渡してしまいます。この場合はnofollowを設定しよう
６．画像のAltタグ
alt属性は画像に情報を記述するタグです。
検索エンジンは画像の内容を理解することができないので、altタグを読み込みます。
またaltタグは、Webアクセシビリティでとても重要なタグです。
例えば目の不自由な人はスクリーンリーダーを利用するのですが、検索エンジンと同じく、スクリーンリーダーは画像を読みこむことができず、altタグを読み上げます。
Altタグの記述例
altタグは画像タグの属性です。HTMLのbody部分に記述します。
<img src="sample.jpg" alt="コアラの写真" />Altタグの設定のポイント
・画像にあったテキストを入れる
・画像全てにAltタグを入れる
