ユーザーにとって読みやすくSEOにも強いブログを書くためには「HTMLタグ」の基本を理解する必要があります。
しかし、プログラミングの経験がない人にとって、さまざまな種類のタグやコードの書き方などハードルが高いように感じるかもしれません。
そこでまずは初心者でも簡単に使いこなせて利用頻度の高いタグから覚え始めてみるのがおすすめです。
ブログでよく使う「HTMLタグ」って何?
そもそも「HTMLって何?」という人のために、ブログやWEBページにおけるHTMLについて解説します。
HTMLは簡単に言えば「WEBページの土台」になるプログラミング言語で、ページ内に表示したい文章などを、指定された「タグ」で挟むことによって表現していきます。
ブログを書く際には、例えば、ブログタイトルのフォントを大きくして目立つように表示させるためのタグ(h1タグ※後述)や、指定のワードにリンクを貼り付けるタグ(aタグ※後述)などがあります。
これらのタグを使うこなすことによって、ブログ内で多様な表現が可能になり、自分の思い描いたレイアウトをデザインすることもできるでしょう。
HTMLタグの書き方
HTMLの基本的な書き方の法則は「タグで挟む」ことです。
基本的には以下のような形式で書いていきます。
タグに挟まれた中身は、タグの種類によってさまざまな役割が加わっていきます。
では、ブログでよく使用するタグにはどのような意味があるのか詳しく見ていきましょう。
ブログでよく使うタグの意味を解説
ブログでよく使うタグとしては以下の7つがあります。
①「h1~h6」タグ
②「p」タグ
③「img」タグ
④「a」タグ
⑤「ul/ol/li」タグ
⑥「br」タグ
⑦コメントアウト
この8つを覚えるだけでも幅広い表現がブログ内で可能になります。
タグの有無によってブログの見やすさが段違いになるので、ぜひ覚えてみてください。
①「h1~h6」タグ
h1からh6までのタグは見出しを作るために使用します。
「見出し」とは、例えば、ブログのタイトルや章ごとに書かれているタイトルのことです。
hの隣に書かれてある数字は見出しの大きさを表しており、h1が一番大きく順にh2、h3、h4、h5、h6と続いていきます。
視覚的には以下のように表示されます。
<h1>見出し①</h1>
<h2>見出し②</h2>
<h3>見出し③</h3>
<h4>見出し④</h4>
<h5>見出し⑤</h5>
<h6>見出し⑥</h6>
②「p」タグ
「p」タグは文章の中で段落を作るために使われます。(※p→Paragraph(パラグラフ)のp)
表記の仕方は「<p></p>」でタグの中に1つの段落の文章を書いていきます。
ブログがきちんと段落分けされていると見やすくなるので、読んでもらえる可能性がアップするでしょう。
③「img」タグ
「img」タグはブログ内に画像を挿入するために使用します。
文章だけでは視覚的に退屈になってしまいますが、画像を要所に挟むだけでも目線が変わったり、視覚的にわかりやすく内容を理解できたりするので積極的に活用しましょう。
また、HMTLタグは「挟んで書く」のが基本でしたが「img」タグについては終了タグを使いません。
基本的な書き方としては以下のようになります。
④「a」タグ
「a」タグは、タグで挟んだ箇所にリンクを挿入するために使用します。
テキストや画像などにリンクを埋め込むことができ、所定の箇所をクリックするとURL先にアクセスされます。
基本的な書き方としては下記のようになります。
例えば、「<a href=”トップページのURL”>『トップへ戻る』</a>」このように記載すると、ブログ内には以下のように表示されます。
⑤「ul/ol/li」タグ
「ul/ol/li」タグは、ブログ内で箇条書きをするときに使います。
例えば、何らかの手順を説明するとき、文章で書くよりも以下のように表記した方がわかりやすいですよね。
①ーーーー
②〜〜〜〜
③・・・・・
このように表記するために使うのが「ul/ol/li」タグです。
「ul」「ol」は箇条書きの種類を表し「li」は箇条書きの中身に使います。
【ulタグ】
ulタグを使うとシンプルな箇条書きを作ることができます。
<li>1つ目の項目<li>
<li>2つ目の項目<li>
<li>3つ目の項目<li>
</ul>
- 1つ目の項目
- 2つ目の項目
- 3つ目の項目
olタグを使うと箇条書きの「•」部分が数字に置き換わります。
<li>1つ目の項目<li>
<li>2つ目の項目<li>
<li>3つ目の項目<li>
</ol>
- 1つ目の項目
- 2つ目の項目
- 3つ目の項目
⑥「br」タグ
「br」タグは、文章を改行するために使用します。
HTMLコードを使いながら文章を書いていくと、改行しているはずなのにWEBページに表示される文章では改行されていないというケースがよくあります。
そのため、コードとして改行を示すために「br」タグを使ってください。
また、「br」タグを使うときは終了タグは必要なく以下のように表記します。
改行してください」
⑦コメントアウトはメモ用に使う
HTMLコードを書いている際に、どんどん複雑になってわかりづらくなることもあるでしょう。
そのような際は、コード内に「<!–メモ–>」というコメントアウトと呼ばれるコードを使ってください。
こちらのコードを使うとHTML内では表示されるものの、ブログには表示されません。
「メモ」の部分に書き置きを残しておけば、編集する際に迷わず続けることができるでしょう。
複数人でブログを編集する際にも伝言ツールとして活用できます。
見出しタグ(h1~h6)の使い分けを解説
ここまでブログでよく使うタグの意味について解説しましたが、その中でも最も重要となるのが「見出しタグ」の使い分けです。
見出しタグを上手に使い分けることでブログ全体のレイアウトが大きく変わり、見やすく読み進めやすいブログに仕上げることもできるでしょう。
では、そんな見出しタグの使い方の基本について解説していきます。
①順番通り使う
見出しタグは「h1」から順番に「h2」「h3」…と使っていきます。
【例】
<h1>見出し①</h1>
ーーーー文章ーーー
<h2>見出し②</h2>
ーーーー文章ーーー
<h3>見出し③</h3>
ーーーー文章ーーー
<h3>見出し③</h3>
ーーーー文章ーーー
<h3>見出し③</h3>
ーーーー文章ーーー
順番に使うことで視覚的にも読みやすく文章をまとめることができますし、SEO的にも評価されやすくなります。
②h1タグの使用は1回のみ
h1タグは、ブログのタイトルを表すものなので、基本的に使用は1回のみにしてください。
複数回使ってマイナスになることはありませんが、レイアウトとして伝わりづらくなってしまいます。
ブログのトップに記載するタイトルや各記事のタイトルに使用しましょう。
③h2以降は必要に応じて使う
h2以降のタグはブログの内容に応じて使っていきましょう。
上手に見出しタグを活用することで整理された読みやすい記事にすることができます。
例えば、セキュションの「大」「中」「小」に応じて、以下のように見出しタグを使い分けるとわかりやすい構成を作ることができます。
【構成例】
<h1>タイトル</h1>
<h2>大セクション①</h2>
<h3>中セクション①−1</h3>
<h3>中セクション①−1</h3>
<h3>中セクション①−1</h3>
<h2>大セクション②</h2>
<h3>中セクション②−1</h3>
<h3>中セクション②−1</h3>
<h4>小セクション②−2−1</h4>
<h2>大セクション③</h2>
<h2>大セクション④</h2>
全ての見出しタグをもれなく使う必要はありません。
あくまでブログの内容から必要に応じて見出しタグを選んで構成を作成してみましょう。
SEOに強いブログを書くためのポイント
ここまでの内容を踏まえた上でSEOに強いブログを書くためのポイントを解説していきます。
HTMLタグは、ブログの視覚的な部分をデザインするものですが、ここでは主にブログの内容面を中心に見ていきましょう。
①ペルソナの設定
SEOで評価されるブログや記事を書くためには、記載されている内容が「誰にとって役に立つコンテンツなのか」を明確にしなければなりません。
年齢、性別、職業、家族構成、収入、趣味趣向など、どういった人物に対して役に立つ情報やコンテンツを提供するのかを意識するだけでも、内容のクオリティを上げられるでしょう。
そのため、ブログを書く前にブログのターゲットとなる人物像を具体的に決めてみてください。
自分の趣味や身の回りのことをブログに書くのであれば、自分自身をペルソナとして細かく言語化してみるといいですね。
②キーワードの選定
次に、どういった検索ワードで上位に表示させるのかを決めるための「キーワード」を選定していきます。
どんな疑問に答えるのか、知識を共有するのか、何について書くのかから逆算して、どういったキーワードで検索されてブログに行き着くのかを考えてみてください。
その上でキーワードが検索される回数を示す「検索ボリューム」を調べ、需要の高いキーワードを設定してみましょう。
ただし、検索回数の多いキーワードは競合サイトも多くなるため、検索数がそこまで多くないニッチな分野を選ぶという戦略もあります。
検索需要と競合サイトのバランスを考えながらキーワードを選定し、キーワードを中心としたブログを書いてみてください。
③競合調査
キーワードを選んだら実際にそのキーワードで検索をして競合しているサイトを調べてみましょう。
上位に表示されたサイトをチェックして、コンテンツの内容や文字数、構成など、どういった点が評価されているのかを明らかにしてみてください。
その上で上位サイトで満たしている内容をしっかりと抑えた上で、そこにはないオリジナリティを出していくとSEO的に評価されやすくなります。
④検索意図の調査
選定したキーワードをユーザーがどのような目的で検索するのかをイメージしてみましょう。
ユーザーには「知りたい疑問」や「解決したい問題」があった上で検索をしています。
検索した理由を推測し、その疑問に応えるような内容を書くことで、ユーザーに対して最適なコンテンツを作ることができます。
⑤記事のタイトルにキーワードを入れる
ブログや記事のタイトルには、選択したキーワードを入れるようにしてください。
SEO的に評価されやすくなるのはもちろん、タイトルは検索結果に表示される要素でもあるため、ユーザーに対して記事の内容をわかりやすく提示するためのメッセージとしても機能します。
タイトルは、アクセスした先に何が書かれているのかを一言で示すものなので、キーワードを自然に盛り込みながら理解しやすいものを設定してください。
⑥見出しタグの構成から作る
文章を書い始める前に見出しタグの構成から作るようにしてください。
構成を先に作ると全体の方向性も明確になりますし、過不足なく内容を盛り込むことも可能です。
0から文章を書き始めると脱線したり、書き漏れが生じたりしますが、構成を先に作っておけば迷うこともないでしょう。
⑦結論や要点を最初に書く
文章を書くときには「結論」を一番最初に書くようにしましょう。
これはPREP法と呼ばれる文章構成の方法論で「P:結論」「R:理由」「E:具体例」「P:結論」を示しており、伝わりやすい文章を書くことができます。
さらに、結論を最初に示すことでユーザーの離脱を防ぐ効果も期待できます。
前置きが長く結論までダラダラとした文章が続くと読む気がなくなってしまいますよね。
ユーザーに対してスムーズに答えを提示してストレスなく読んでもらうためにも、文章の最初に「結論」を書いてください。
⑧見やすいレイアウトを工夫する
HTMLタグを効果的に使ってレイアウトを工夫するのはもちろん、改行やリスト、画像、グラフなどを駆使して見やすい内容にしましょう。
例えば、改行は2〜3行に1回するとスラスラ読み進められる内容にできます。
文章だと説明しづらい内容を画像で視覚的に示したり、リストやグラフ、表などを使うことで、ユーザーにとって快適に楽しめるコンテンツが作成できます。
WordPressを使えばコードが書けなくてもHTMLタグが使いこなせる!
WordPressを使えばHTMLタグの知識がない初心者の方でも簡単にブログを作成することができます。
SEOに有利なブログを作っていくこともできるので、これからブログを始めるのであればWordPressを利用してみてください。
①GUI(グラフィカルユーザーインターフェース)で直感的な操作が可能
WordPressでは、直感的な操作でHTMLタグの設定ができるGUI(グラフィカルユーザーインターフェース)が利用できます。
例えば、見出しタグを設定する際、コードを書くと「<h2>見出しのタイトル</h2>」と書かなければなりませんが、WordPressであれば見出しの部分を選択して、段落から「見出し2」を選ぶだけで自動的にタグの設定が可能です。
コードの知識が全くなくても見出しの設定や画像の挿入、リンクの設定、文字の装飾など誰でも簡単に行えます。
②SEOに有利な設計になっているのでおすすめ!
WordPressは、SEOに有利な設計になっています。検索エンジンに評価されるためのサイト構造や内部リンク構造を簡単に実現できます。
初心者の方でもWordPressでブログを書くだけで自然とSEOに有利な設定が可能です。
近年重視される傾向にある「スマホ(モバイル)対応」や「表示速度」なども、WordPressなら簡単に対策できます。
まとめ
ブログでよく使うタグの意味やSEOに強いブログの書き方について解説していきました。
利用頻度の高い基本的なタグを知っておくだけでも、ブログのレイアウトが全然異なってくるので、今回の内容を理解した上でブログを書き始めてみましょう。
また、WordPressを使えばコードの知識不要で簡単にSEO対策ができるので、プログラミング未経験の方もぜひチャレンジしてみてください!
コメントを残す