読者にも検索エンジンにも好かれるブログの作り方【番外編】 HTMLタグ

こんにちは、IT+（アイティプラス）からECコンサルを受けたネットショップ店長のミキです。

前回まででご紹介してきた、「ブログを更新していく上で是非実践していただきたい8つのポイント」について、「HTMLタグ」というものが何度か登場しました。前回までの記事ではご説明しきれなかった部分もありますので、今日はこの「HTMLタグ」について、はじめての方でもわかりやすくご紹介してみたいと思います。

タグとは？

初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑥～キーワードの強調～や、初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑧～見出しタグの活用～でも少しタグについて触れましたが、タグとは<（タグ名）>の記号で囲まれた半角の英数字のことで、このタグを使ってWebページは作られています。使い方はとてもシンプルで、 <●>吾輩は猫である</●> 上記のように開始タグと終了タグで任意の文字を挟むことで、その文字に対してタグの効果が表れます。命令分（●の部分）を<>で囲んだものが開始タグ、命令分の前に”/（スラッシュ）”を入れて<>で囲んだものが終了タグとなり、必ずこの2つが1セットとなります。（一部のタグは終了タグを必要としないものもあります。）

タグを理解するメリット

今回いくつかのタグをご紹介しますが、実際にタグを入力しながらブログを書くことをお勧めしているのではなく、このタグにはどのような意味・効果があるのかを知っていただければと思います。最近の無料ブログサービスではHTMLタグが全くわからなくても、タグ入力と同じような効果が手軽にボタン一つで反映できるようになり、とても便利になりました。ですがブログを書いていると時々、下書きでは問題ないのに記事を公開すると改行が崩れていたり、意図していない部分が全て太字になってしまったりと、表示が崩れてしまうことも実は多々あるのです。そんな時にタグやHTMLの知識が少しでもあると、どこを修正すればよいかをいとも簡単に見つけて対処することが可能になります。

特にアメブロで多いのが、終了タグの位置の間違いです。例えば、 吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。このように「吾輩は猫である」だけを太字にしたつもりが、吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。このように全てが太字になってしまっているとします。こんな時には記事の編集画面を「HTML表示」に切り替えて問題の箇所を見てみると、 <srtong>吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。 このように、終了タグの位置が間違っている場合があります。 HTMLの知識が少しあれば、 <srtong>吾輩は猫である。名前はまだない。どこで生まれたか頓と見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。このようにをカット＆ペーストで簡単に正しい位置に戻すことができるようになります。

このようなエラーはHTMLを書式に自動で反映する仕組みに限界があり、全てを正確に反映できるわけではないことが原因で起こります。ですがタグについて最低限のルールや意味を知っておくことでいとも簡単に修正できますので、嫌悪感をもたずに徐々にタグに慣れていってほしいと思います。またブログサービスによっては設定できないタグも、HTML画面で直接入力することでタグの設定が可能になります。（例えばアメブロではなどのタグは利用できませんが、直接入力は可能です）さらには適切なタグを用いることでブログを正しく構成することができ、検索エンジンもより正確にブログの内容を読み取れるようになります。

初心者でも使えるタグの種類

ここではブログを書いていて、HTML表示にするとよく見かけるであろうタグをいくつかご紹介します。実際にこれらを入力することはなくても、各書式を設定したあとにHTML表示画面でタグを確認したり、修正の際などに是非役立てて下さい。 ※については初心者必見！読者にも検索エンジンにも好かれるブログの作り方⑥～キーワードの強調～でご紹介しています。

1、

段落を意味する文字列に使用します。【使用例】 ここからここまでが1つの段落です。ここから次の段落です。 【表示例】ここからここまでが1つの段落です。ここから次の段落です。

2、

テキストに下線を引く際に使用します。【使用例】テキストに下線を引く際に使用します。【表示例】テキストに下線を引く際に使用します。

3、<hr>

段落の意味上の区切りを意味します。見た目上は水平線がひかれ、終了タグは必要ありません。【使用例】昨日新宿でとてもおいしいイタリアンの店を見つけた。是非次回は友人を誘って行ってみよう。 <hr> 先日、夏目漱石の「吾輩は猫である」を久しぶりに読んた。【表示例】昨日新宿でとてもおいしいイタリアンの店を見つけた。是非次回は友人を誘って行ってみよう。

先日、夏目漱石の「吾輩は猫である」を久しぶりに読んた。

4、

改行するために使うタグです。こちらも終了タグは必要ありません。 タグと混同しやすいのですが、 は画面表示上で改行したい時に使用します。【使用例】 段落とは一つの意味をもつかたまりですので、 このように途中で改行しても上の行と同じグループとして認識されます。 【表示例】段落とは一つの意味をもつかたまりですので、このように途中で改行しても上の行と同じグループとして認識されます。 ※現在は同じブログでもPCやスマートフォン、タブレットなど様々な機器から閲覧ができるようになり、機器により表示される文字数などが変わってきます。 を多用することで逆に見にくくなる恐れもありますので、使用には注意が必要です。 ※一部ブログサービスでは改行キーを押すと自動的に が挿入される場合があります。

5、<blockqoute>

文章を引用・転載するときに使用します。【使用例】 <blockquote> 吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。 </blockquote> 【表示例】

吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。吾輩はここで始めて人間というものを見た。

6、<a></a>

リンクを指定する際に使用します。実際には<a href="（リンク先URL）">リンクを設定するテキスト</a>という組み合わせで表示されます。【使用例】 <a href="http://www.yahoo.co.jp/">Yahoo! JAPAN</a> 【表示例】 Yahoo! JAPAN

7、<img>

画像を表示するときに使用するタグです。終了タグは不要です。基本的には<img src=”（場所＋画像ファイル名）” alt=”画像代替文字” >という構成で使われます。【使用例】 <img src="https://farm4.staticflickr.com/3837/14707140359e15a2233d2n.jpg" alt="サブちゃん" />

【表示例】
サブちゃん

まとめ

はじめてタグを見た方は「？？？」という感じだとは思いますが、日々ブログを書く中で少しずつでもタグに触れていくことで自然と理解できるようになると思います。私自身ブログを書き始めた2年前はタグやHTMLの知識は皆無でしたが、今ではこの記事を書けるまでになりました。慣れないうちは大変かと思いますが、理解できるようになるとより読みやすいブログが書けるだけでなく、HTML上もきちんとした構成のブログが出来上がります。またSEOのための施策を行うなど、HTMLの知識があればできる幅もグンと広がります。

覚えておいて損はありませんので、少しずつでも覚えていくことをお勧めします。

この記事を書いた人

ミキ

初心者EC一覧に戻る