タグの正しい使い方をまとめてみた２

当ページのリンクにはPRが含まれています。

2013年11月13日

URLをコピーしました！

タグの正しい使い方は、一概に言えないけど、だからといって俺たちが歩み寄ればいいだけさ

正しく使ってあげると使えるお友達タグ

5. strong・em

strongとemのSEOに対して上記のマブダチなタグに比べてまだまだです。が、要所で正しく使うことで評価に加点されるのも事実です。

キーワードに使う

storngとemは、太くてストロングだぜ！！と言いたいわけではありません。その部分が重要だって事を検索エンジンに伝えるお仕事をしてくれています。つまり、重要なキーワードに使えば、その重要性を検索エンジンに伝える事が出きます。

storngタグとemタグを使い分ける

storngタグは「強い強調」、emタグは「強調」を意味する。strong>em
つまり、strongをつかっておけば間違いない。
ので、最も強調したいキーワードにstrongタグを、強調度合いの低いキーワードにemでFA。

storngとemの使用回数

ルフィが毎回ずっと覇気とか使ってたらつまんないし、悟空も最初からスーパサイヤ人４になってないのと同様に
何度も使っては何がstrongなのかわからない。ここぞというところで使おう。聖闘士星矢で星矢がペガサス彗星拳をやるタイミングと同じくらいの頻度が正しいだろう。ペガサス彗星拳 is justice!
so,ページ内でstorngとemを過剰に使用すると、過度なSEOペナルティのリスクを負うことになる。必殺技はTPOを間違えずに使うから必殺技だ。健闘を祈る。

ビジュアル目的では使わない

間違えがちなのは、これらのタグは装飾のためにあらず。現にstrongをかみじょーも装飾のためにずっとつかっていた経緯がある。だけど、stongとemは、文脈的強調につかいましょう。装飾はまた、web制作～そうだ装飾、しよう～でまとめようと思う。

6. リスト（ol、li、dl）

リストをうまく使うと見た目がきれいで整然としている。んでも、このタグがちょっとめんどくさいからリストやってない人も大勢いる。部分的にリストを活用しよう。そうだ、リストしよう。
あとは、読み手的に考えると、大切なところが整然とリストになっていればわかりやすいと感じます。
正しい文書構造が評価されるということは検索エンジン先生がどう変化していっても変わらない。正しい文書構造にする事で、Google先生の評価を高めるとしよう。

箇条書きには当然ながらリストを使う

例えば、こういうことさ。

でんぱ組

りさちー
みりんちゃん
ねむきゅん
えいちゃん
最上もが
ぴんきー

週刊少年ジャンプの三大原理

・友情
・ライバル
・成長

でんぱ組ではリスト（ul）を使用しているのに対して、週刊少年ジャンプではpタグを使用していることがわかっただろうか。見た目には同じように見えるが、HTML文書構造としてはちょっとちゃうねん。

pタグは段落であって、リストではない。

PTAG is not only list,but also a paragraph.

つまり、これはゲームであっても、遊びではないということだ。

上記の使い方は間違いだ。箇条書きには、リストタグを使おう。

メニューにはリストタグを使う

メニューにpタグを使っているサイトをたまに見かけるが、これも間違った使い方だとわかった。メニューは、リンクのリストなので、リストタグを使うほうが、so good。

olとulを使い分ける

olとulは、どちらも、スタイルシートでlist-style-type:noneと指定すれば、見た目は同じになるんだけど。
HTML文書としての意味合いはどうか？それはまったく異なってしまっている。
olは番号付のリストで並び順に意味がある。
が、ulには並び順に意味はない。並び順に意味があるリストに対しては、olを使うのがライトアンサーですよ。

7. pタグ

段落を意味するpタグは、だいたいページ内で最も多く使われる。これは間違えないでしょ？段落です。大丈夫。君は理解しているはずだ。

トピックの区切りはbrではなくpタグで

ただやみくもにbrbrbrbrbrとすればいいわけではないんだ。
brは改行のためのタグで、トピックの区切りを表すものではない。
お話としての区切りはキチンとpタグで幕をとじようぜ。
ヴィジュアル的体裁を考えると、ヴィジュアルを整えるためだけに、brタグを使うと、HTML文書構造上（検索エンジンにとっては）トピックの切れ目がないと思われてしまう。そんなばかな話はないだろう。エンドレスストーリーにはまだ早すぎる。つつつつまり、検索エンジンにページの内容が正しく伝わらない。
トピックの区切りには、pタグ。先生、大事なんでココ二回言ったよ。

段落以外ではpタグを使わない

例。

ご連絡先

電話：02-xxxx-xxxxx
FAX：02-xxxx-xxxxx
メール：fockin@xxxx.com

お問合せ先

・電話：02-xxxx-xxxxx
・FAX：02-xxxx-xxxxx
・メール：feckin@xxxx.com

上はリストタグ（ul）、下のはpタグを使用している。さっきのおさらいさ。
HTML文書構造としての本質を知ってほしいとおれはここで思うよ。

pタグは段落を表すもの、リストを表すものではない。んで、上の使い方はノーだ。ありがちな間違いなので気をつけるべし。

8. table

tableを使うとSEOに不利だと勘違いしている人がいるが答えはノーだ。tableは表に使用するタグなので、ページのレイアウトに使うのは間違いだけど、コンテンツ内で表を使う場合には、結局そこまでの影響を伴わないから平気というわけ。tableを使って問題ないが、しかしタグの使い方次第で、HTML文書としての意味が変わってくるので、注意が必要だ。あとは、レイアウト的に汚くなったり短調になるのは確認済みだよ。

summary属性を指定する

summary属性には、表が、んじゃ何なの？っていうのを説明するために記載しよう。
そうするが、君の表の情報がどういうものなのかを検査エンジンに正確に伝わる。

thとtdを使い分ける

表は本来、項目とデータ（内容）で成り立つ。項目にはthタグを、データ（内容）にはtdを使おう。
これはつかっていて意外にどっちでもいい感満載だし、こだわっていなかったところはある。しかし、thの存在しない表をつくったとしよう。検索先生は、
「ここに表？あるけど、なんや？いったいなんについてか明記されてへんで！」検索エンジンはお怒りだ。

9. description

そもそも、今回の記事を書こうと思ったのはdescriptionってなに？っていうのが発端だ。
ずっとキーワードと同じ内容をコピペしてきたが、はたしてそれでいいのか？
という迷いが生じた。
調べた結果によるとdescriptionはSEO順位に直接影響しない。
しかし、クリック率に影響する重要なタグだ。
descriptionの内容は検索したあとの検索結果のスニペット（ウェブページの概要を説明する文章）に使われる。
つまり説明。ここをうまく釣れるかどうかでクリックするか、しないかの境目となる。
ユーザーにとって分かり易くクリックしたくなるようなdescriptionを書く事、かつ事実やそのウェブの表記内容にそっていることが肝心である。

キーワードを含める

descriptionに含まれる検索キーワードは太字になる。従って、ユーザーは安易にページ内容を理解するためには視覚的に太字がキーワードだと示すことが必要。descriptionにはキーワードを内包するように記載。SEO順位には直接影響しないけど、アクセス数の要となるクリック率に大きく影響する。

推奨しませんということ

タグの中には、HTML文書としての特別な意味はなくヴィジュアルを整える目的のものが存在する。
しかし、現Google先生は、タグはHTML文書構造を表すために使用し、ビジュアルの調整はスタイルシートで行う事を推奨している。
つまり、以下のbrにしてもbにしてもhrにしても、使わないでスタイルシートの代用が有効。
ヴィジュアル調整の目的で使いがちなタグということ。ヴィジュアルの調整はスタイルシートで行えるようにかみじょーも勉強中である。

10. br

brは改行。まぁみんな知ってると思うけど、トピックの区切りであればpタグという話は先ほどしたばかりだ。ヴィジュアル的に改行をするときは、span、スタイルシートにdisplay:blockを指定すれば、spanの中身はきちんと開業するから安心してほしい。

11. bタグ

bタグは見た目を太字にする。ここで覚えておきたいことは太字にしたいのであれば、スタイルシートでfont-weight:boldを指定。もしも、文章中の特定の語句を太字にしたいのであれば、spanにスタイルシートでfont-weight:boldを指定すれば、spanで内包した中身はこれも太字になります。これです。