ブログ運営

【必見】ブログ執筆で必須のHTMLタグとよくある「失敗例」まとめ

2020-09-09

悩める人
「ブログ運営には、HTMLタグを正しく使うことが大切だと聞きました。しかし、プログラミングなんて全然分からないしなあ・・・」

こういった人向けの記事です。

この記事の内容
  • HTMLタグの重要性とは【結論:全てのブログに関係あり】
  • ブログでよく使うHTMLタグとその「失敗例」を解説【8個ある】
  • ブログに必要なHTMLを勉強する方法【全ブロガーが学習すべき】

こんにちは、tomosan(@Tomo___san_2525)です。

副業ブログ歴は3年目、企業のWebサイト管理を任されて4ヶ月目になりました。
プログラミングも独学しており、HTMLタグをSEOに最適化するのが得意です。

ブログ記事を書くときによく使うHTMLタグと、初心者によくある「間違い」を、すべてまとめます。

ブログは、HTMLの知識がなくても書けます。

しかし、HTMLを正しく使わないと、Googleからの評価を下げられてしまう恐れがあります。

とくに、HTMLタグを使わずに記事を書いている人は、思わぬ形で不適切なタグ配置になっていることもあります。
ビジュアルエディターやブロックエディター派の人こそ、HTMLの基本を押さえておくべきです。

悩める人
我ながら、ステキな文章が書けていると思うんだけどなあ・・・なかなか検索順位が伸びません。
それは、HTMLタグの使い方が間違っているからかもしれません。
この記事をすみずみまで読み、何かミスがあれば修正することをおすすめします!
Tomo

正しいHTML記法を覚えて、SEOに強いブログ記事を作れるようになっていきましょう。

はじめに|HTMLタグの重要性とは【結論:全てのブログに関係あり】

はじめに|HTMLタグの重要性とは【結論:全てのブログに関係あり】

ブログを書くならば、必ずHTMLタグを正しく使えるようにするべき。

なぜなら、あなたのブログの「検索順位」に大きく影響するからです。

HTMLとは?

Hyper Text Markup Language(ハイパーテキストマークアップランゲージ)の略語です。

すべてのWebページは、HTMLでつくられています。

GoogleChromeで、ページのHTMLソースを表示している画面のスクリーンショットです

GoogleChromeで右クリック → 「検証」を押すと、そのページのHTMLコードを見ることができます。

Googleクローラーがあなたのブログをインデックスするときは、このHTMLの構造を評価します。

※「クローラー?はて?」「インデックス?なにそれ?」という人は、まず下記の記事からどうぞ。

あなたのブログが検索上位に表示されるためには、HTMLが正しく記述されていることが必須条件になります!
Tomo

HTMLタグには「意味」と「使いどころ」が決まっている【セマンティック】

※HTMLタグの持つ「意味」を、セマンティック(日本語で"意味合い")と呼んだりします。

HTMLタグが正しく書けないと、Googleから嫌われます。

なぜなら、そのページの"意味"が正しく伝わらないから。

あなたがどれだけ素晴らしい文章を書いたとしても、HTMLタグでその"意味"を伝えられなければ、Googleはあなたのサイトを上位表示してくれません。

そこにあるのが「見出し」なのか、「段落」なのか、あるいは「箇条書き」なのか。

Googleに"意味"を伝える唯一の方法が、HTMLタグです。

というわけで、HTMLの最適化はSEOの面でもとても重要!
本文中によく出てくるタグの、正しい使い方を覚えておきましょう!
Tomo

ブログでよく使うHTMLタグとその「失敗例」を解説【8個ある】

ブログでよく使うHTMLタグとその「失敗例」を解説【8個ある】

先に、まとめてリストアップしておきます。

悩める人
うわあ・・・わけわからん・・・
大丈夫です。
分かりやすく解説しますよ!
Tomo

その①|見出しタグ

Headline(見出し)」の頭文字を取り、h1、h2・・・のように書きます。

重要度が高い順に、h1からh6までが用意されています。

h1タグが最も重要性が高く、h6タグが最も重要性が低い見出しであることを示す、WordPressエディターのスクリーンショットです

HTMLコードで見ると、下記のとおりです。

見出しタグ(h1~h6)のHTML記述をしている画面のスクリーンショットです

見出しにしたい文字列を、<h1>~</h1>で囲ってあげます。

見出しタグのよくある失敗例

2つあります。

  1. h1タグをタイトル以外に入れる
  2. 順序を守らずに使用する

まず、h1タグは、1つの記事で1回までしか使えません。

なぜなら、h1タグは「1番重要な見出し」という"意味"なので、2つ、3つ存在することはあり得ないからです。

そしてブログの場合、「記事のタイトル = h1」と決まっています。

たまに、本文にもh1タグを使用している人がいますが、NGです。

記事タイトルと、本文のどちらにもh1タグを使用している悪い例のスクリーンショットです

本文中は、h2タグからh6タグまでの"5種類"だけ使いましょう。

また、順序も守る必要があります。

Webページには、重要度が高い順に見出しを書いていく、という決まりがあるからです。

正しいhタグの使用例を解説した画像です

このように、正しい順序でタグを使いましょう

※ここについては、»【WordPress向け】SEO内部対策でやるべきこと12個【今すぐ確認です】の記事中でも解説しています。

その②|段落タグ

Paragraph(段落)」の頭文字を取り、pタグとして使います。

文章を、pタグで囲ってあげればOKです。

段落タグ(pタグ)の正しい使い方を示したエディタ画面のスクリーンショットです

なおよくあるミスとして、"余白"のために、「中身がないpタグ」を設置するのはNGです。

下記の画像をご覧ください。

余白を取るために、空のpタグを差し込んでいる間違った例のスクリーンショットです

ビジュアルエディタでは、自動的にカラのpタグが入ってしまう場合があるので注意です

上記のように、改行のためにカラのpタグを設置してはいけません。

Pタグの持つ「段落」という"意味"を満たさないからです。

余白は、cssというコードを使って設定するのが基本です!
Tomo

その③|改行タグ

Break(改行)」の先頭2文字をとり、brタグを入れると改行できます。

改行タグ(brタグ)を使い、1つの文章を3つの行に改行しているエディタ画面のスクリーンショットです

ここ、かなり重要。

ブロックエディター・ビジュアルエディターをお使いのほとんどの方が、ミスしているはずです。

改行タグのよくある失敗例
  • brタグではなく、pタグで改行している
  • "余白"のために、brタグを使用している

まず、ブロックエディターで普通に[Enter]を押して改行している人。

その文章は、brタグではなくpタグで強引に改行されてしまっていますよ。

WordPressのビジュアルエディタで改行するためにエンターキーを押すと、brタグではなくpタグが差し込まれてしまうことを示すスクリーンショットです

ブロックエディターでエンターキーを押すと、次のブロックへ移動してしまい、新しい段落になります

悩める人
・・・?なにか、問題でも?
カラのpタグはダメだけど、文章が入っているからOKなのでは?
問題、大アリ。
思い出してください。pタグの持つ"意味"は「1つの段落」ですよ!
Tomo

これだと、1つの"意味のある文章"ではなく、3つの"意味がよく分からない文章"になってしまい、Googleがうまく理解できません。

これは、あなたのコンテンツに何が書いてあるかを伝えられない1番の原因になります!
文章を改行するならば、1つのpタグの"中"に、brタグを差し込んでください!
Tomo

WordPressのエディターをお使いの方は、[Shift]+[Enter]で正しい改行ができます。

Shiftキー+Enterキーで、段落内改行ができることを解説するスクリーンショットです

さらにもう1つ。

"余白"のために、あえてbrタグを連続して使っている人もいますが、これもNG。

brタグを、余白などの「見た目」の理由で連続使用している不適切な例を解説するスクリーンショットです

繰り返しですが、余白など"見た目"のために、HTMLタグを本来の意味とは違うかたちで使ってはいけません!
Tomo

その④|リストタグ

いわゆる「箇条書き」をしたいときに使います。

使い方は、下記の画像のとおり。

ulタグを使い、箇条書きをしているエディタ画面のスクリーンショットです

ulを使えば、各リストの先頭に「・」が付きます

olタグを使い、数字つきの箇条書きを書いているエディタ画面のスクリーンショットです

olを使えば、各リストの先頭に「1,2,3・・・」と付きます

なお、Ulタグとolタグには、明確な「使い分け」が存在します。

  • ul・・・順序の"ない"リスト
  • ol・・・順序の"ある"リスト

上記のとおりです。

例えば、何かの"手順"を箇条書きで示すときは、数字があった方がいいのでolタグを使うべき。
いっぽう、"好きなものリスト"など、単純に箇条書きを使いたい場合は、ulタグを使うべきでしょう。
たまに「先頭に数字をつけたい」という"見た目"の理由で、意味もなくolタグを使う人がいますが、これはNGです!
Tomo

その⑤|太字タグ

Bold(太い)」を表すbタグ、「Strong(強調)」を表すstrongタグを使うと、文字を太くできます。

おそらく、ほとんどのブロガーさんが太字を使っていると思います。

WordPressのブロックエディターで、太字を指定し、strongタグが挿入されていることを示すスクリーンショットですGutenbergでは、自動的にstrongタグが挿入されます。

しかし実は、「太字タグ」は使わないでおくべき。

なぜなら、strongタグには"強調"という意味があるからです。

例えば、本文の中にstrong(=強調したい文章)タグがいくつも存在する場合。
Googleは、「え?この記事は、どの文章が本当に重要な部分なんだ・・・?」と、混乱してしまいます。

最大でも、strongタグは本文中に1つまでにしましょう。

"見た目"の理由で太字にしたい部分は、スタイルシート(CSS)で設定してあげるべきです。

HTML
<div class="bold">ここに文章を書く</div>
CSS
.bold{
font-weight:600;
}
WordPressユーザーの方は、「追加CSS」にこのCSSコードを入れつつ、上記のHTMLコードを使ってみるといいですよ!
Tomo

※また、太字タグと同様に、ブログで使うべきではないものに「斜体タグ(i・em)」があります。

その⑥|リンクタグ

Anchor(アンカー)」の頭文字であるaタグ。

他のページ・サイトにリンクを貼りたいときに使います。

リンクタグ(aタグ)を使用しているエディタ画面のスクリーンショットです

ここについては、特に問題はないですかね。

しかし、ブログにアフィリエイトリンクを貼る場合には、注意が必要です。

↑上記の記事で、アフィリエイト用のaタグの正しい使い方を解説しました。

アフィリエイトリンクは、あなたのブログ収益の「生命線」です。
正しい貼り方を覚えておきましょう!
Tomo

その⑦|引用タグ

他のサイト・他のブログ・書籍など、何か外部のコンテンツを使用したいときに使います。

タグの名前は、「Quote(引用)」からきています。

引用タグについても、注意が必要です。
Gutenbergなどのブロックエディターで引用をすると、正しいHTML記法になりません!

WordPressのブロックエディタで引用をすると、不適切なHTMLタグ記述になることを示すスクリーンショットです

Gutenbergで引用を使用すると、このようなHTMLタグの構造になるんですが・・・正しくありません

下記の画像のとおりに記載するべき。

引用タグ(blockquoteタグ)の正しい書き方を示すエディタ画面のスクリーンショットです

これが正しい引用タグの記法です

引用するときは、blockquoteタグに「cite属性」として、引用元のURLを記載してあげるべき。

なぜなら、そうしないとGoogleが「ん?これはどのサイトから引用したんだ?」ということが分からないからです。

引用をする場合は、ぜひHTMLモードで正しいタグを書いてください。

なお、同じ引用タグに「qタグ」もありますが、「短い文章を抜き出して引用するとき」のみ使えばOKです。

短文を引用する際には、qタグを使用すべきことを示すエディタ画面のスクリーンショットです

そろそろお気づきかと思いますが・・・

ビジュアルエディタやブロックエディタは、とても便利ですよね。

しかし、HTMLタグへの変換が上手にできず、最適なものになっていないことが多いので注意しましょう。

その⑧|画像タグ

その名のとおり「Image(画像)」ですね。

記事中に写真やイラストを挿入したいときに使います。

こちらについては、詳しい解説が必要なので、別記事にてまとめました。

ブロガーにとって、画像は"命"です。

正しいタグの書き方をしないと、Googleからの評価が一気に下がるので、不安な方はぜひチェックしておいてください!

【結論】ブログは、HTMLモードで書くべき

お疲れ様でした。

ひとまず、主要なHTMLタグについての解説はこれで終わりです。

そして結論ですが、ブログはできるだけ"HTMLモード"で書くべきです。

ビジュアルエディタやGutenbergなどのブロックエディタは、確かに便利です。
しかし、"見た目" → "HTMLへ変換" という流れなので、どうしてもGoogleの求める記述方法とズレてしまいます。

特に、「太字」や「改行」あたりは注意が必要です。
Googleクローラの評価を大きく下げることにつながり、めちゃくちゃ損します。
"太字・改行の部分だけ"でもいいので、HTMLで直接書くなどの工夫をするのがいいでしょう。

プログラミング未経験の方は、「ムズカシイ」「面倒くさい」と感じるかもです。

しかし、ブログを伸ばすためには、この記事で紹介したHTMLタグの書き方は、"必須"です。

少しずつでいいので、HTMLタグに慣れておくことをおすすめします!
Tomo

ブログに必要なHTMLを勉強する方法【全ブロガーが学習すべき】

ブログに必要なHTMLを勉強する方法【全ブロガーが学習すべき】

待てよ・・・?
じゃあ、ブログをきっちり伸ばすには、プログラミングの知識が必要ってこと?
そのとおり。
とはいえ、エンジニアほどの高度なスキルは要りません。
サクッと学べる知識だけでも、かなり有利にブログ運営ができるようになりますよ!
Tomo

まずは、HTML・CSSという言語を学ぶところから始めましょう。

これらの言語は「マークアップ言語」と呼ばれ、Webサイトの構造・見た目を決める基本的なコードです。

おすすめの学習方法まとめ

下記のとおり。

※完全なるゼロベースの人におすすめの方法です。
少し自信がある人は、YouTubeあたりの動画でも学べると思います。

なお僕は、本での学習からスタートしました。

これ1冊で、かんたんなWeb制作案件が取れるくらいまで成長できます。

本を1冊持っておくと「あれ?どうだったっけ?」というときにすぐに確認できるのでおすすめです!
Tomo

"無料のプログラミングスクール"という選択肢

また、オンライン(自宅)で学習できるプログラミングスクールの中には、「無料体験アリ」のものがあります。

無料体験だけで、ブログ運営に必要なHTML・CSSのスキルは充分学べます。
ぶっちゃけ、この方法でプロから基礎を教わるのが、1番早いですね。

ブログ × プログラミングというスキルセットに魅力を感じるならば、試してみるのがいいでしょう。

»TechAcademy [テックアカデミー]の無料体験はこちらから

ブロガーには、HTMLの知識が必須です。

SEO対策のキホンなので、ぜひ押さえておきましょう。

それでは、この記事は以上で終わりです。

-ブログ運営
-

© 2021 こころのともブログ Powered by AFFINGER5