岐阜でホームページ制作、マーケティング&デザインを提供しているMWORKSです

お気軽にお問い合わせください

TEL 0573-67-8189

Mブログ

- mblog -

SEO対策で必ず設定するHTMLタグ|SEO対策の基本04

公開日:2015年7月20日 : SEO

SEO対策で必ず設定するHTMLタグ_カバー画像

SEO対策初心者でも、まずはここだけは設定しておけばOKなHTMLのポイントをご紹介。以前の3回では、SEOの基本的な仕組みと、最初の準備を説明してきましたが、今回は実践的な内容です。

SEO対策と聞くとWeb上では様々な情報があり、どこから取り組んだらいいかわからない…と尻込みしてしまう方もいるかと思います。

というわけで、SEO対策はまず最初にココだけ意識して設定しておけば間違いなし!という普遍的かつ、プロでも必ず行っている基本的な部分を説明していきます。

以前の記事では、HTMLの仕組みや使い方などをまとめています。まずはHTMLの基本から知りたい!と言う方は、そちらもどうぞ読んでみてください。
初心者向け_HTMLとは?
初心者向け_HTMLタグ入門

title(タイトル)

title(タイトル)タグ

titleタグとは?

絶対に外せないタグそれが「title(タイトル)」です。webページの1番大きな見出しになります。Webページに表示はされないですが、検索結果に表示されるので、クリックする際に1番ユーザーの目につく部分になります。Googleの検索エンジンもまずは、このtitleタグでページの中身を判断しているので、1番重要なタグと言えます。

titleタグのコード

titleタグは検索結果に表示される

検索画面_タイトル

SEO対策にバッチリなtitleの付け方

  • 文字数は30文字以内

    長いtitleにするとgoogleが自動的に文字数を短くしてしまします。最大で30文字程度表示されるので、なるべくそれ以内におさめましょう。

  • ページの中身とマッチしたキーワードを使う

    titleにはページの中身が分かりやすく伝わる内容にしましょう。狙った検索キーワードは必ず使用しますが、人が読んで不自然に感じる使い方はやめましょう。

  • 見てもらいたいユーザーが検索するキーワードを入れる

    ページの内容について、ユーザーがよく検索に使うキーワードを調べて利用しましょう。ユーザーが使わないキーワードではせっかく作ったページが検索されづらくなり、もったいないです。

  • 人が見てクリックしたい!と思わせるコピーにする

    検索ロボットにページの情報を正確に伝えることは重要ですが、最後にクリックするのは人です。人が見てクリックしたい!この記事を読みたい!と思えるコピーを考えましょう。

ページtitleの設定方法

  • CMS(wordpress、MTなど)を使用している場合

    ホームページにCMS(wordpress、MTなど)を使用している場合は、ページや記事のタイトルがtitleタグに設定されている場合が多いです。しかし、Webページやブログページのタイトル(見出し)に見える部分が、必ずtitleタグに設定しているとは限りません。1度確認してみましょう。

  • htmlページをftpソフトなどでサーバーにアップロードしている場合

    htmlページをftpソフトなどでweb上にアップロードしている場合は、titleタグを自分で書き込む必要あります。ページが多い場合は作業に手間がかかります。SEO対策を積極的に活用していきたい場合は、CMS(wordpress、MTなど)の導入をおすすめします。SEO対策をサポートする機能が充実しているので、運営コストを下げながら成果を上げることが可能になります。

  • フリーブログ(yahoo!ブログ、アメブロなど)を使用している場合

    フリーのブログ(yahoo!ブログ、アメブロなど)は、記事のタイトルが自動でtitleタグに設定されている場合が多いです。1度確認してみましょう

title確認方法

  • ブラウザで確認したいページURLの頭に「site:」をつけて検索する

    ※HTMLコードで確認することもできますが、「site:」を使って検索した方が正確です。なぜかと言うと、記述してあるタイトルがそのまま表示されない場合があるからです。文字数が多すぎたり、ページ内容と関連性の低いキーワードが使用されていると、検索エンジンが自動的にtitleの内容を書き換えてしまいます。正しく表示されているか確認するには、検索画面で「site:」を使いましょう。

ドメインでインデックスを確認

『site:ドメイン名』で検索するとそのサイトでインデックス(登録)されているページが全て表示されます。

site:_インデックス確認

URLでインデックスを確認

『site:ページURL』で検索するとそのページがどのように、検索エンジンに登録されているか?が確認できます。

site:_urlインデックス確認

meta description(メタ ディスクリプション)

meta description(メタ ディスクリプション)タグ

descriptionタグとは?

メタディスクリプションはページの概要を説明します。検索結果のタイトルの下に表示される文章です。検索順位の評価には関係のない要素ですが、検索ユーザーはタイトルとディスクリプションの内容を見てクリックするので、ページを読みたくなる文章にすることで、クリック率が高まります。

descriptionタグのコード

descriptionタグは検索結果に表示される

メタディスクリプション_確認方法画面

meta descriptionのポイント

  • 文字数は、120文字前後。長いと自動的に省略されて表示される
  • 設定していないとgoogleがページの内容を拾って自動で表示する
  • 検索キーワードと一致する部分は「太文字」で表示されるので、クリック率アップの効果があり。狙っているキーワードは1〜3程度使用しましょう
  • ディスクリプションの重複はNG、各ページオリジナルの文章がGOOD。Googleのガイドラインで推奨されている
  • フリーのブログなどは、個別に設定できない場合あり
  • wordpressでは、all in one sep プラグインがおすすめ

description確認方法

  • ブラウザで確認したいページURLの頭に「site:」をつけて検索する

    ※上記titleと同じ方法で確認できます。

meta keyword(メタ キーワード)

meta keyword(メタ キーワード)

keywordタグとは?

ページで使用されている重要なキーワードを設定します。昔は効果があったのですが、現在メタキーワードは、googleでサポートされていないので、SEO対策として効果はありません。必ず設定する項目ではないですが、このサイトでは一応設定していることと、現在は効果がないということを伝えるために、ご紹介しました。

keywordsタグのコード

h1タグを設定する

h1タグ_画像

h1タグとは?

h1タグは、タイトルと同じくページ全体の概要を示す役割をもったタグです。hタグは123456と続いていきます。以前のhtml5からは、artcle要素、section要素でページの構造を明示すれば、ページ内で複数使用できるようになりました。しかし、正しく使用できているか不安な場合は、各ページに1つだけの使用でも問題ありません。MWORKSのホームページでは、今までと同じように各ページにh1タグは1つしか使用していません。(重要度が一目で分かりやすいので)

h1タグのコード

h1タグのポイント

  • ページ全体を示す役割がある1番大きな見出し
  • titleタグと同じ内容でも問題ない
  • 狙っているキーワードを含める
  • html5からは、ページ内で複数使用できるようになったが、各ページに1つだけでも問題ない

本文を見出しタグで区切る(h2、h3)

本文を見出しタグで区切る(h2、h3)図

hタグの使い方とは?

hダグは、123456まで使用できますが、h2、h3は記事内で多く使うタグです。ページの内容を読みやすくするために、大見出しに(h2)、小見出しに(h3)をつけて、まとめていきます。ページを内容毎のかたまりとして、分けることで、読みやすくなりますし、検索エンジンにとっても内容を階層化することで、理解しやすくなります。

h2、h3タグ使用例のコード

h2、h3タグのポイント

  • ページ内容毎のかたまりで区切る部分にh2タグを使う
  • hタグの数字は、大から小へ順番に使用する(h2の次にh1を持ってきたりしない)
  • h12345タグを使ってページの内容を階層化することで、検索エンジンにとっても内容を理解しやすくなる

この記事ではこんな感じで使っています

h2,h3タグ使用例

aタグはリンク先が分かるように書く

リンクのaタグはリンク先を設定_図

aタグとは?

aタグとは、Anchor(アンカー)の略です。アンカータグとも呼ばれます。テキストや画像をクリックしたときに、ページを移動させる役割があります。aタグを使用する際は、リンク先を明示しましょう。例えば、aタグの説明ページにリンクさせたい場合、「詳しくはこちら」よりも「aタグ解説ページはこちら」とします。

なぜリンク先を明示する理由は2つあります。1点目は利便性です。ユーザーにとってはクリックするまで、リンク先の内容がわかりません。リンクをクリックすることで、その先になにがあるのか?を明示することで、利便性が高くなります。

もう2点が、検索エンジンがサイトの構造を理解するために、aタグに使用しているキーワードを使用しているからです。どんなキーワードで、どのページが多くリンクされているかなどの情報を、検索エンジンは集めています。そのサイトやページにとって重要なキーワードを適切にアンカーリンクに含むことで、そのキーワードをページの関連性を伝えることができます。

aタグ使用例のコード

aタグ(アンカータグ)の使い方ポイント

  • リンク先のページの内容、サイト名を入れる
  • 自サイトやページにとって重要なキーワードを自然な形で入れる

画像にalt属性を設定

画像にalt属性を設定_図

imgタグの使い方とalt属性とは?

検索エンジンは、テキスト情報でしかページを理解できません。alt属性は、そんな検索エンジンに画像の内容を理解させる役割があります。ここに画像の内容を書くことで、検索エンジンに画像の内容を伝えることができます。

ちなみに上記ですこし説明したように、検索エンジンの仕組み上、画像データの使用には注意が必要です。画像ばかりのページは、人は見た目で理解できても検索エンジンは理解できません。SEO対策的に考えると、なるべく文字情報は画像よりもテキストにすることが好ましいです。

alt属性の使用例コード

imgタグ、alt属性の使い方ポイント

  • ページの内容や、使用する前後文章と関係のあるキーワードを使う
  • 中身は具体的で分かりやすく。(例:りんごの画像→木になる赤いりんごの画像)
  • 文字数は多くて30文字程度、不自然にキーワードを詰め込まない

本文はpタグを使用

本文はpタグを使用_図

本文(段落)には、pタグを使用します。フリーのブログやwordpressなどは、初期設定でテキストを入力して改行すると、自動的にpタグが入るようになっていることが多いです。知っている人にとっては、かなり当たり前の内容ですが、『何事も基本が大事!!』ということで紹介しました。

今回のhtmlタグ5つのポイント、全体図

この記事で紹介した、すべてのタグを設定した記事のコード例です。どのような内容のWebページでも、この基本形を使って情報を当てはめていきます。

このコードをブラウザ確認したい方はこちら>>

このコードは以前の記事、HTMLタグ入門【初心者向け_ホームページ作成の基本】から流用しています。HTMLの基本については、詳しく知りたい方は参考にしてみてください。

まとめ、全体の流れ

このように、htmlタグを使用して情報を階層化することによって、ページ内容を正確に検索エンジンに伝えることができます。また、訪問者にとっても階層化で内容をまとめることで、ページが見やすく、読みやすくなります。

seo対策の基本として、今回紹介したhtmlタグは、プロでも実践している基本的で効果的な設定方法です。それ程むずかしいことではないので、まず今回のポイントをおさえたページを作れば、バッチリです。

あとは、なんと言っても内容が1番大事です。オリジナリティがあって、訪問者にとって価値の高いページ制作をめざしましょう(これが1番むずかしいかも…)

という訳で、よいコンテンツ制作をめざして、お互いがんばりましょう。

それではまた!


スポンサーリンク

Mblog

新着記事

- new articles -

ホームページ制作やマーケティングの他にも、日々の仕事での考えや気付きなどを記事にしています