セマンティックスなマークアップ HTML4編

この記事が良ければ、ぜひシェアお願いします

HTMLでのセマンティックスに関連する要素を紹介します。

HTMLのセマンティックスとは、文書の各部に対して「意味」を与えることになります。みなさんが見出しのために良く使うタグであるh1~h6要素、箇条書きにli要素など、それが何を意味しているのか分かりやすくするための、HTMLのセマンティックなマークアップといえます。

HTMLのセマンティックなマークアップを使うのは、ブログを書く人間からするとちょっと面倒くさいと思ってしまうのですが、コンピュータにとっては処理しやすいデータになります。アクセス数を増やすための施策は色々とありますが、サーチエンジンのそのサイトのページがどのような内容を載せているのかをHTMLで7なるべく正確に理解させるためには必要なことだと考えます。

HTML5では、セマンティックスへの対応が強化されていて、そのための新たな要素が追加されています。これまでの代表的なHTMLタグとHTML5向けのタグをご紹介したいと思います。

スポンサーリンク

HTML4編 (before HTML5)

 
HTML4での代表的なコードについては、こちらに一覧で載っています。(但し英語です)

【titleタグ】

『タイトル名 | コンテンツ名 | サイト名』など、titleを設定することはHTMLを使う上では必須と言えましょう。どこまでtitleに含めるかは、その人のさじ加減で良いと思いますが、サイト名とタイトル名はどちらも出るようにすることがSEO的にも一般的です。但し、コンテンツの内容と全く関係のないタイトルにすることは止めましょう。スパムと判断されてしまうかもしれませんよ。

WordPressでは標準でHTMLにtitleタグを入れてくれるので、その点はそんなに意識しなくても良いかもしれませんが、サイト運営後にSEO効果を目的にtitleタグの内容を変更すると、反って逆効果を起こすことがあるようです。

“グーグルは、タイトルを変えることに対して、最近ものすごく不機嫌になる。”
”サイトが立ち上がり、インデックスされて、ランキングに登場した6ヵ月後に、タイトルタグやaltタグなどを変更を加えるのは、SEOをする人くらいなものだろう”

titleタグではないですが、『記事タイトルはキャッチーで内容を表すものにちゃんとしておく』にしておくことですね。どうキャッチにするかは文章力になりますので、こちらのサイトなどを参考にすると良いでしょう。
参考サイト : http://web-tan.forum.impressrd.jp/e/2007/08/07/1756
参考サイト : http://creamo.jp/diary/title_chage/

【hxタグ(h1,h2,h3,h4,h5,h6タグ)】

 
h1~h6のタグは、HTMLの『見出しタグ』と言われていて、通称【hxタグ】と呼ばれることもあります。数字の順番の通り、数字1~重要度が高い言葉だと検索エンジンに認識されると言われています。

WordPressでサイトを作ってくれると、テーマにもよるのですが、サイトタイトルがh1、投稿記事のタイトルがh2になるなど、自動でHTMLのhxタグを入れてくれるものもあります。

HTMLの見出しタグは、1~始まるので、途中で歯抜けになってしようすることは推奨されていません。せっかく見出しタグを入れたのに、構造的に文書が理解されなくなってしまい、SEO的な効果がなくなってしまう可能性があります。

一般的には、記事の中でh1タグは記事タイトルで使い、そこから大事な見出し毎にh2,h3タグを使うのが良いと考えられています。人によっては、h1タグのみ、h2タグのみ使えば良いということもありますが、検索エンジンの解析アルゴリズムは公開されていない&改良が日々加えられているので、それぞれどうするか、HTMLマークアップガイドラインを自分で決めるのがいいでしょう。

【pタグ】

 
pタグのpとは、”paragraph(パラグラフ)”、つまり「段落=文章ひとかたまり」のことであり、p要素を利用します。HTMLでは、段落も検索エンジンが重要視するタグです。HTML論理構造が正しい文章にはこの段落タグで囲むようにしましょう。ただし、単発的な言葉に段落を付けても、その部分は検索エンジンには重視されない可能性もあります。実務的には、数行に渡る文章ばかりではなく、特定の言葉らをまとめるときに使うときもあります。

では、SEO的にも効果があるstrongタグを多用すれば良いのか?というと、そういう訳でもないようで、straongタグを使いすぎるとペナルティーをウケ、反って効果が下がる場合もあるようです。あくまで強調するという意味ですので、相対的な重みを付けるという感じで使用するのがよいと思います。

目安としては、1つの記事に2~3つくらいまでが良いのではないかと考えます。ただ、記事は人が見るものなので、視覚的に強調したこともあると思うので、bタグはhタグなどと使い分けるのが良いと思います。

【aタグ】

 
aタグは、サイト運営をしている人なら当然のようにご存じかと思いますが、テキストにリンクの要素を付加するためのものです。

一般的にリンク要素が不可されたテキストには、行き先ページに関連する情報が含まれ、リンクを貼るからには相手のページと関連が深いという推測が成り立ちます。

検索エンジンは、このaタグを非常に重要視するようです。

SEOを考えるときは、内部リンク/外部リンクがどのくらいの数があり、関連性が適切かどうかが非常に重要視します。外部リンクがやたら多ければ良いと言うわけでもなく、内部リンクもやたらとあれば良いという訳でもありません。

但し、内部リンクを上手く構築することで、検索エンジンからの評価が高まるとともに、来訪者が他のページを見てくれたりと良い効果もあります。

>SEO内部施策だけで検索エンジンからの来訪が3億PV増加、社内にSEOノウハウも蓄積/pixivのSEO事例

サイト運営者がaタグを使う時には、下記のようなケースが考えられます。

  • 内部リンクにもキーワードを含める
  • 「詳細はこちら」や「HOME」といった記述よりも「Webデザインレシピ 窶骭€ HOME」や「SEO対策についての詳細はこちら」といった、具体的なテキストにする
  • 含ませるキーワードを統一しない
  • 関連性の高いサイトにリンクを貼る。関連性の高いサイトからの被リンクを心がける。
  • 内部リンクのURLを統一する
  • 記事の本文からリンクを張る(フッターやサイドバーからのリンクよりも、よりSEO効果が望める
  • ユーザビリティを無視したリンクは控える

また、このような内部リンクを貼るための効果的な使い方もあります。

  • パンくずリストを作成する
  • 関連記事リストを作成する
  • 人気記事リストを作成する

【METAタグ】

 
METAタグとは、ページの~内に記述される、ページの各種不可情報を定義するタグです。Googleに代表されるロボット型検索エンジンでスパイダーと呼ばれるプログラムにホームページの情報を拾わせるためことで有名ですが、その用途は多彩で、文字コードの指定や、ページのキャッシュ無効化の指定、Javascript使用の宣言、ロボットに対しての命令など、さまざまな目的に使用されます。

具体的にはこのような物があります。

  • <meta name=”robots” content=”xxx”>
  • <meta name=”description” content=”xxx”>
  • <meta name=”keywords” content=”xxx”>
  • <meta http-equiv=”content-Type” content=”xxx”; charset=”UTF-8″>
  • <meta name=”robots” content=”xxx”>
  • <meta name=”revisit_after” content=”xxdays”>

その中でも、WordPressでサイト運営されている方には、”keywords”と”description”は適切に設定して頂くことを推奨します。サイトの内容やキーワードが強調できます。

ちなみに、まとめて全てのページに同じ内容を設定するよりも、ページ毎に設定することがSEOでは一般的に推奨されています。metaタグは、「直接的にページの順位を押し上げるため」のテクニックというより、「検索エンジンにページのテーマをより的確に伝えるため」にある補助的な本文と考えましょう。ここで欲張ってコンテンツ内容と違うキーワードをたくさん埋め込んでしまうと、ページのテーマが曖昧になり、全てが台無しになってしまうため要注意です。

HTML4編だけでかなりのボリュームになってしまったので、HTML5編については別途投稿したいと思います!

参考サイト : HTMLタグボード

スポンサーリンク

この記事が良ければ、ぜひシェアお願いします

もぐ
年齢 : 30代半ばの1児の新米パパ。ITネットワークから始まり、WEBディレクター、WEBシステム系のプロマネ、データ分析など色々やってるエンジニアです。WordPress、Webサービス構築、BIツール、IoTなどがトレンド。新しくて面白い仕事募集中。
スポンサーリンク

コメント

  1. […] 『セマンティックスなマークアップ HTML4編』でも書かさせてもらいましたが、記事タイトルや見出しはhxタグを使う方が構造的に理解してもらいやすいです。ですので、divタグを使って […]