HTMLもCSSも興味ない人からしたら覚えるの面倒だしどうでもいいですよね。ぶっちゃけ気にしなくてもいいと思います。
ただ、自分のブログをより多くの人に見てもらいたいとか、情報を発信したいとか、なんだかんだPV上がるとテンションあがるという人はHTMLの最低限の知識だけでも知っておいた方が得をすると思ってます。
目次
なぜHTMLの知識が必要なのか
まず下記のような人は今日の話は気にしないでいいです。
- アクセス数が減ってもへこまない
- 検索によるアクセスがゼロでもいい
- SEO対策をしていないしする気もない
- そもそもアクセス数を増やそうと思ってない
- 文章を書いて公開できればそれでいい
これに当てはまらない人はある程度のHTMLの知識を持っておいた方がいいです。
なぜならGoogle先生はHTMLを読んでるからです。Google先生との会話をするための言語がHTMLなんです。
HTMLの知識なしにブログを運営するというのは、日本語とボディーランゲージだけで世界一周旅行に行くくらいのことだと思ってます。
ものすごく良い文章を書いた記事は人間の心に響きますが、Google先生にはまったく響かないということもあるわけです。
もちろんGoogle先生と仲良くなろうと思わなければ無視してもらって結構ですけど、Google先生に気に入られた方がより多くの人の目につくチャンスが与えられるので、情報を発信したい人にとっては無視できない問題ですよね。
下記の記事のSEO対策10項目のうち半分が「論理的に正しいHTML文書構造に変更」という内容です。この記事を見てやはりHTMLの知識は必要だなと実感しました。
ブログで使うHTMLは多くないので覚えちゃいましょう
HTMLという言語をなぜか難しく考えてる人が多いんですが、ブログの本文中に使うHTMLタグって多くないのでそれだけでも覚えちゃったほうがいいと思います。
使いそうなものは
- h
- p
- strong
- a
- img
- ul,ol,li
- table
- blockquote
といったところでしょうか。
もっとたくさんありますけど、必要になったらそのとき覚えましょう。
ちょっとずつですがそれぞれのHTMLタグについて解説します。
h
hは見出しです。h1,h2,h3,h4…と数字とセットになってます。
ブログサービスによって違いますし、WordPressであればテーマの構造にもよりますが、h1は記事のタイトルになってることが多いですね。
数字の順番通りに使っていけば問題ないです。h2のあとにh3がいないのにh4を使うということがないようにしましょう。
▼当ブログのh2,h3,h4はこんなデザインのものです。
p
pは段落という意味です。
だいたいどのブログサービスでも自動で入ると思われるので気にしないで大丈夫です。
strong
strongは強調です。文章的に強調したいときにstrongタグを使います。
bでも太字になりますがこちらは「太字」という意味で強調の意味合いがありません。
人間の目には同じ太字になるタグでも意味合いが違います。
このように「見た目は似てるのに意味が微妙に違う」というタグはちょいちょいあるので気をつけてください。
関連記事：hタグの中にstrongとか入れてる人は気をつけて！h1,h2,h3タグなどの正しい使い方
a
aはリンクです。
こちらの記事で詳しく書かれています。
img
imgは画像です。
altタグは画像を示す言葉を入れる場所ですが、適切な言葉が思いつかない場合は空でもいいから入れておいた方がいいと言われています。
記述例
<img src="画像名.png" width="" height="" alt="" />
関連記事：CSSのwidth(横幅)の正しい読み方を教えてもらった
ul,ol,li
ul,ol,liはリストです。
点だけで箇条書きにしたいときはulを、番号順に並べるときはolを使います。
liはul,olとセットで使うリストの1行分です。
記述例
<ul> <li>りんご</li> <li>みかん</li> <li>ぶどう</li> </ul> <ol> <li>材料を切ります</li> <li>鍋に入れます</li> <li>煮込みます</li> </ol>
table
tableは表です。th,tr,tdとセットで使います。
記述例
<table> <tr> <th>項目1</th> <th>項目2</th> <th>項目3</th> </tr> <tr> <td>内容1</td> <td>内容2</td> <td>内容3</td> </tr> </table>
blockquote
blockquoteは引用です。
他者の言葉を引用したりリンクを引用したりするときに使います。
通常pタグとセットで使います。
記述例
<blockquote> <p> 引用文がここに入ります。 </p> </blockquote>
パンダアップデート、ペンギンアップデートとHTMLの関係
余談ですが、パンダアップデートとペンギンアップデートでアクセス数がガクっと落ちたという経験のある人の中には、HTMLの文書構造が正しくないことが原因の人がいるんじゃないかなと。
すべてとは言いませんが、一因になってるはずです。
HTMLの言語しか読めないGoogle先生が言う「コンテンツの質」とは何かと考えたらHTMLの文書構造のことが含まれてるのは明らかですしね。
参考記事
最後に
僕はSEOに関しては専門家ではないので「多分そうだろうなと思って普段やってること」を書いただけですので、鵜呑みにせずに一意見として受け取ってもらえたらなと思います。
HTMLの文書構造については知ってて損は無いですし、今回紹介したくらいのざっくりしたものであればさほど負担にならないと思いますので、是非この機会にちらっと勉強してみてください。