SEOに効果的なHTMLタグ10種類の書き方を紹介

この記事の監修SEO会社

株式会社NEXER

2005年にSEO事業を開始し、計10,000社以上にSEOコンサルティング実績を持つSEOの専門会社。
自社でSEO研究チームを持ち、「クライアントのサイト分析」「コンテンツ対策」「外部対策」「内部対策」「クライアントサポート」全て自社のみで提供可能なフルオーダーSEOを提供している。
SEOのノウハウを活かして、年間数百万PVの自社メディアを複数運営。

検索エンジンのクローラーは、サイトの情報をHTMLタグを通して読み取ります。そのため、HTMLタグの設定はSEOの観点からも重要であり、SEO内部対策として優先度が高い項目です。正しく使用することで、ユーザーにとってもわかりやすいサイトが構築できるでしょう。

そこで今回は、SEOに効果が期待できるHTMLタグ10種類の書き方をご紹介します。具体的な使用例付きで実践的な内容となっているため、SEO対策にぜひご活用ください。

もしSEO対策の基本から対策方法まで全て詳しく知りたい場合は「SEO対策とは？検索上位表示を狙う方法まとめ！」の記事でSEO対策の情報をまとめているので参考にしてみてください。

『SEOの知恵袋』に無料相談

SEO無料相談

SEO知恵袋なら、まずは無料でSEO相談とサイトのSEO状況診断が可能です。

SEO運用歴18年、合計5000社以上の対策実績のあるSEOの知恵袋にぜひご相談ください。

SEO無料相談はこちらから

『SEOの知恵袋』に無料相談

「SEO対策を検討しているけど、
いきなり業者に依頼するのが不安」

というお悩みはございませんか？

SEO無料相談

SEO知恵袋はなら、まずは無料でSEO相談とサイトのSEO状況診断が可能です。

SEO運用歴18年、合計5000社以上の対策実績のあるSEOの知恵袋にぜひご相談ください。

SEO無料相談は
こちらから

1 SEOに効果的なHTMLタグの書き方
2 まとめ
3 この記事の監修者が手掛けたSEO記事一覧

SEOに効果的なHTMLタグの書き方

使用例も交えて10種類のHTMLタグの書き方やポイントを解説します。

titleタグ

各ページのタイトルを設定するために使用します。検索結果の一覧にも表示されるもので、検索順位を決定する重要な要素のひとつです。<title>～</title>で囲って設定します。タイトルの書き方のポイントを以下にまとめました。

30文字程度を目安にタイトルを決める
ページの内容にマッチしたキーワードを盛り込む
タイトルの前半に対策キーワードを入れる
内容に関係のないキーワードを含めない
他のページと同じタイトルにしない

検索エンジンはタイトル前半のキーワードを重視しているため、対策キーワードは前の方に含めるのがおすすめです。タイトルは左から右に読まれるため、前半に入れたキーワードはユーザーの目に留まりやすいメリットがあります。

文字数の関係でタイトルがすべて表示されないケースもあるため、対策キーワードが表示されなくなるのを防げます。ページの内容とタイトルが一致していないと、ユーザーの離脱につながります。そのページの内容が検索エンジンとユーザーの双方に正確に伝わるようなタイトルを設定しましょう。

▼titleタグの使用例

<title>SEOに効果的なHTMLタグ10種類の書き方を紹介</title>

SEO専門家の見解

titleタグはタグの中でも、最もSEOへの影響が大きいタグです。
titleタグは、そのページの内容を表すものであり、Googleはそのページのテーマを認識するために活用されています。
そのため、titleタグには必ず対策キーワードを入れるようにしましょう。

また、titleタグは直接的なSEO効果だけではなく、検索結果一覧にも表示されるものなので、他のサイトと比べて、クリックしたくなるものにすると良いです。

metaタグ

ページ内容の情報を付加するためのタグです。metaタグにはさまざまなものがありますが、SEOの観点からみて大切なのはmeta keywordとmeta descriptionです。metaタグは<head>～</head>内に囲う形で記述します。

meta keyword

ページ情報を伝える際に重要なキーワードを記述します。基本的に対策キーワードを入れますが、キーワードの入れすぎには注意が必要です。何が重要か伝わりにくくなります。

▼meta keywordの使用例
<head> <meta name="keyword" content="キーワード〇〇,キーワード△△"> </head>

現在はGoogleが「Web検索のランキングにメタタグをGoogle のウェブ検索結果に関する限り、現時点（2009 年 9 月）で問題視する必要はありません。Google は、ウェブ検索のランキングで keywords メタタグを使用しません。」と明言していることから、メタキーワードを設定する意味はなくなっています。（参考：Google 検索セントラルブログ）

コンテンツごとに設定したメタキーワードはchromeの「検証」またはツールを用いると一目でわかってしまうため、類似コンテンツの制作を容易にしてしまうというデメリットもあります。そのため、WeiVでは現在、新規記事の作成時にメタキーワードは設定していません。

meta description

サイトの紹介文を記載します。必ず表示されるとは限りませんが、検索結果一覧の画面でタイトルの下に表示されることが多く、紹介文を工夫することでクリックを促します。紹介文の作成ポイントは以下のとおりです。

対策キーワードを含ませる
各ページの内容を分かりやすく伝える文章にする
120文字程度を目安にまとめる
紹介文の使い回しはNGで、各ページに最適な紹介文を作成する
ユーザーの興味を引くための工夫をする

クリックを促すために、具体的な数値や読むことで解決できる疑問、得られるメリットなどを含めるとよいでしょう。

▼meta descriptionの使用例



<head>

<meta name="description" content="サイトの紹介文">

</head>

メタディスクリプションもまた、Googleの検索ランキング指標には含まれていません。

また、Googleがコンテンツの内容を自動取得し、meta descriptionを生成して検索結果に表示する場合もあり、記述した内容が反映されないこともあります。

ただしメタディスクリプションは、ユーザーが検索した際にサイトを開くか開かないかの判断（クリック率）に影響するため、ユーザビリティの視点から設定する意味は大きいといえます。

SEO専門家の見解

数年前まではMeta descriptionに対策キーワードを含めることは、効果的なSEO対策とされていましたが、近年では直接的なSEO効果はほとんど無いとされています。
しかし、検索結果一覧のサイト紹介に表示される文章なので、サイトのクリック率を上げるためにも、しっかりと指定しましょう。

hタグ

「h」は「heading」の略で、ページの見出しを設定するタグです。<h1>から<h6>まであり、階層構造で使用します。<h2>の中に<h3>、<h3>の中に<h4>というように、数値の小さいものから大きいものの順に使うのがポイントです。

見出しには重要なキーワードを含めて、そこに書かれている内容を簡潔にまとめます。検索エンジンは、hタグの中でも<h1>を重要視しています。<h1>はタイトルタグとほとんど同じものとして扱われており、ページの全体像を伝える役割があります。

対策キーワードを必ず入れて、ユーザーや検索エンジンに情報を正しく伝えましょう。<h1>はひとつのページ内に1つ程度使用します。使用回数は制限されていませんが、ページの概略を伝える大見出しが何個もあると、検索エンジンやユーザーの混乱を招いてしまうからです。

▼hタグの使用例
<h1>大見出し</h1>
～h1のコンテンツ～
<h2>中見出し</h2>
～h2のコンテンツ～
<h3>小見出し</h3>
～h3のコンテンツ～
<h3>小見出し</h3>
～h3のコンテンツ～

SEO専門家の見解

hタグは、SEO効果が高いタグの一つです。
GoogleはSEOの公式ガイドラインにて「タイトルと見出しはそのページの内容を示すものであるべき」と発信しています。
Googleは見出しだけではなく、コンテンツの中身を見て総合的にそのページを判断しますが、もし見出しに対策キーワードが入っていない場合は、対策キーワードと関連性が高いページなのか迷ってしまい、評価が上がりづらい可能性があります。

aタグ

「a」は「anchor」の略で、リンクの出発点および到達点を指定する役割があります。クローラーがリンク先を巡回できるのは、href属性が指定されたaタグのみです。aタグには、情報を加えるためのさまざまな属性を指定できます。主な属性の概要や使用例を以下でご紹介します。

href属性

ほかのページへのリンクを貼るときに使用します。サイト内の別のページにリンクさせると、内部リンクの集約化に役立ちます。アンカーテキストをクリックすると、指定したURLに遷移します。

アンカーテキストには対策キーワードを適度に含め、ユーザーや検索エンジンがリンク先のページの内容を理解しやすいように簡潔に記載しましょう。

▼aタグ、href属性の使用例

<a href="リンク先のURL">アンカーテキスト</a>

target属性

リンクを開く方法を指定します。別タブでリンク先のページを開くように指定すると、元のページを表示させたままにできるため、ユーザーに再びサイトに戻ってきてほしい際にも有効です。

▼aタグ、target属性の使用例

<a href="リンク先のURL" target="_blank">アンカーテキスト</a>

→リンク先のページを別タブで開きます。

<a href="リンク先のURL" target="_self">アンカーテキスト</a>

→現在表示しているタブでリンク先のページを開きます。「_self」ではなく空欄でもOKです。

SEO専門家の見解

aタグを記述する場合は、「rel属性」の指定を適切なものにしましょう。
rel属性は、そのリンク先が自サイトとどういう関係なのかを大まかに伝えるべくGoogleにヒントを出すためのものです。
例えば、サイトの繋がりを示さない「nofollow」、広告を表す「sponsored」などを指定できます。
このタグを使わずにアフィリエイト広告をたくさん張った場合、GoogleはそのリンクはSEO対策のためのリンクプログラムとして、あなたのサイトの評価が落ちてしまう可能性があります。

pタグ

「p」は「paragraph」の略で、段落を作るときに使います。使用頻度が高いHTMLタグのひとつです。<p>～</p>で囲まれた部分がひとつの段落です。HTMLとして段落があることをクローラーに示します。

改行させるタグにbrタグがありますが、こちらは文章中での改行に使用するため意味合いが異なります。段落間で1行分の改行をするならpタグを使用し、しっかりと使い分けて、正確な文章構造をクローラーに伝えましょう。

正しい文章構造を伝えることは、SEO評価にも影響します。段落や改行を適切に行うことで、ユーザーにとっても読みやすくなります。

▼pタグの使用例

<p>テキストテキストテキスト</p>

liタグ

「li」とは「list item」の略で、リスト形式、つまり箇条書きを表示する際に使用します。箇条書きはポイントをまとめるときなどにも便利で、ユーザーにとっても読みやすいコンテンツ作りに役立ちます。

どのような箇条書きのタイプであるかを示す、ulタグまたはolタグとセットで使います。順番のないリストを作る際に使用するのがulタグです。それぞれの項目に順番や序列はありません。順番のあるリストを作るなら、olタグを使用します。

▼ulタグとセットの使用例



<ul>

<li>テキスト</li>

<li>テキスト</li>

</ul>

↓以下のように表示されます。

テキスト
テキスト

▼olタグとセットの使用例



<ol>

<li>テキスト</li>

<li>テキスト</li>

</ol>

↓以下のように表示されます。

テキスト
テキスト

altタグ

画像の内容を検索エンジンやユーザーに説明する役割をもちます。検索エンジンが画像だけでその内容を認識するのは難しく、画像を理解してもらうためにaltタグが役立つのです。画像検索における上位表示にも効果的です。

また、何らかの原因で画像が表示できない場合、alt属性の内容が説明文として表示されるため、ユーザーにとってもメリットがあります。

altタグを設置する際は、SEO対策だからといってキーワードを不必要に詰め込むのは避けましょう。画像に関係のないキーワードは入れずに、画像内容を簡潔に表します。装飾目的の画像などは、空のaltタグを設定します。

▼altタグの使用例

<img src="画像URL" alt="画像の説明">

SEO専門家の見解

altタグは、Googleに画像の内容を伝えるのに役立ちます。
altタグにも対策キーワードを入れることで、その画像が対策キーワードに関連する画像ということで、評価が高まる可能性があります。
しかし、過剰にキーワードを詰め込むと、ペナルティの対象になるので、注意が必要です。

strongタグ

テキストを強調する際に使用するタグです。<strong>～</strong>で囲った部分が太文字で強調されます。強調によってメリハリが生まれ、どこに重要な情報が書かれているかをユーザーに伝えやすいため、ユーザビリティの向上に役立ちます。

strongタグをページ内に多用すると、本当に重要なポイントが分かりにくくなるため注意が必要です。ユーザーはもちろん、検索エンジンにとっても分かりにくく、SEOの観点からも好ましくありません。<h1>や<h2>などの見出しはすでに重要であることを示しているため、見出しにstrongタグを使用するのも避けましょう。

同じく太字表示や強調のタグにbタグやemタグがありますが、それぞれ定義が異なります。bタグは太字で表示させますが、強調の意味合いはありません。emタグは強調の役割があるものの、出力の際に斜体に変換されます。strongタグほど強く強調せず、該当箇所のニュアンスを変更したい場合に、emタグを使用するのが一般的です。

▼strongタグの使用例

<p>テキスト<strong>強調したい部分</strong>テキスト</p>

canonicalタグ

サイト内で重複したページがある場合、どのページが最重要かをクローラーに伝えるタグです。無駄なクロールを減らし、サイトの品質向上に役立ちます。

たとえばパソコン用とスマートフォン用でURLが異なるページが存在している、ECサイトで同じ商品の色違いを別のページに掲載しているなどといったケースで効果的です。

重複コンテンツがあるとみなされると、SEOの評価にも悪影響を与えてしまいます。また、URLを正規化するとSEO評価がばらけるのを防げます。なお、canonicalタグは<head>内に記載します。URLの記述ミスには注意しましょう。

▼canonicalタグの使用例

重複ページの<head>タグ内に正規URLを記述します。
<head> <link rel="canonical" href="正規ページとして認識させたいページのURL"> </head>

SEO専門家の見解

2023年4月にcanonicalタグについて、Googleが新たな見解を示しました。
簡単に紹介すると、今まではオリジナルではない他サイトから引用した記事にはcanonicalタグを指定するのが一般的でしたが、
他記事のニュースを引用した記事などを作成する「コンテンツシンジケーション」記事では、canonicalタグではなく「noindex」を使用するべきとのことです。

blockquoteタグ

外部のサイトで掲載されている内容を自分のサイトに掲載するときに、引用したものであることを示すタグです。同じく引用する際に使用するタグにqタグがありますが、qタグは短い文章の引用で使います。長い文章を引用するなら、blockquoteタグを使用しましょう。

書き方としては、引用したい部分を<blockquote>～</blockquote>で囲みます。引用したコンテンツにもかかわらずblockquoteタグを使っていないと、ほかのサイトをコピーしていると認識されて検索エンジンの評価が下がるリスクがあります。

また、blockquoteタグの多用も控えましょう。引用コンテンツが多いとオリジナリティが低いと判断され、検索上位の表示が難しくなります。コンテンツのメインとして使うのではなく、根拠を示す際や補足説明で使用するのが基本です。

▼blockquoteタグの使用例
<blockquote cite="引用元URL"> <p>引用したテキストなど</p> 引用元：<cite><a href="引用元URL">引用元のページタイトル</a></cite> </blockquote>

SEO専門家の見解

最近のSEOでは、情報の信頼性がとても重要視されています。
その中でblockquoteタグは、引用元を明確に示すことができるため、できる限り使用すべきタグの一つと言えます。

まとめ

たくさんあるHTMLタグをすべて覚えるのは容易ではありません。今回ご紹介したようなSEOに効果的なHTMLタグを中心に理解し、サイトに取り入れて検索上位表示を狙いましょう。

SEO対策においては、そのページのキーワードや内容、文章構造などを検索エンジンに正確に伝えることが重要です。タイトルや見出しタグを適切に設定して正確に内容を伝えることはもちろん、強調表現や箇条書き、段落なども取り入れて分かりやすくします。

URLの正規化や内部リンクの設置なども効果的です。ユーザーにとって見やすく価値のあるサイトは、検索エンジンからの評価も高まります。タグを正しく使用して、SEO対策を行いましょう。

この記事の監修者が手掛けたSEO記事一覧

記事タイトル	記事の内容
・SEO対策とは？検索上位表示を狙う方法まとめ！	SEOの基本から、おこなうべきSEO対策など、SEOについて総合的に解説しています。
・いきなりGoogleの検索順位が下がったのは何故！原因と対策方法をご紹介	検索順位が下がってしまった原因とその対処法を紹介しています。
・【メディア運営者が教える】ChatGPTでSEOに強い記事を作成する方法！	ChatGPTでSEOに強い記事を作成する方法を、実際に利用している経験からアドバイス。
・SEOライティングのコツ10選！SEO初心者が意識すべきポイントもご紹介	初心者でも読むだけでSEOに強い記事をかける、ライティングのコツを解説しています。
・【2024年最新版】SEO外部対策とは？ポイントや注意点を解説！	SEO外部対策の効果や、おすすめの外部対策方法を解説しています。
・上位表示されやすいロングテールキーワードのSEO対策方法をご紹介！	ロングテールキーワードでのSEO対策方法や、ロングテールSEOの成功事例を解説しています。
・内部リンクとは？SEO効果と設置の際のポイントを解説	内部リンクのSEO効果と、正しい設置方法を解説しています。
・Googleペナルティのチェック方法！対策法も詳しく解説	SEOでGoogleペナルティの対象になる原因と、ペナルティ解除方法を解説しています。
・記事外注で後悔しない！おすすめの記事代行サービス12選と発注前の準備	失敗しない記事外注のコツと、記事代行サービスをご紹介しています。
・コンテンツSEOとは？メリットやデメリット、成功事例など	コンテンツSEOの方法と、成功事例などをご紹介しています。
・ローカルSEOとは？ローカルSEOの種類や対策方法などを解説	ローカルSEOの対策方法を詳しく解説しています。
・【2024年最新版】SEOの内部対策は何をするべき？対策方法を解説	おこなうべきSEO内部対策を解説！内部対策チェックリストも有ります。
・SEO対策にかかる費用は？依頼先の選び方も紹介	SEO対策を業者に依頼する場合の費用を対策内容別に解説しています。
・相互リンクにSEO効果はある？相互リンクのやり方と注意点を徹底解説	危険な相互リンク・安全な相互リンクを解説しています。
・被リンクのSEO効果は？良質な被リンクの獲得方法や悪質な被リンクの防ぎ方	被リンクのSEO効果や、おすすめの被リンク対策をご紹介しています。
・ホワイトハットSEOのやり方を解説！ブラックハットSEOとの違いは？	ホワイトハットSEOの内容とやり方を解説しています。
・11サイトのSEO成功事例とSEOを成功させるための大切なポイント	SEOで成功しているサイトの事例を紹介！SEOで成功するポイントも解説しています。
・SEOコンサルとは？実績のあるSEOコンサルティング会社15選を紹介	SEOコンサルティングの内容と、依頼した場合の費用などを解説しています。
・SEOに強いディレクトリ構造の作り方！正しい階層の設定方法	SEOに効果的なディレクトリ構造の整え方を解説しています。
・失敗しないSEO会社の選び方や注意点・悪質業者を見分けるコツ	失敗しないSEO会社の選び方や、悪質なSEO会社の見分け方を解説しています。
・競合分析がSEOで重要な理由は？競合調査する方法やコツをご紹介	SEO専門会社が実際におこなっているSEOの競合分析方法をご紹介しています。
・コーポレートサイトのSEO対策のコツを紹介！自社サイトの検索順位の上げ方	コーポレートサイトのSEO対策方法を詳しく解説しています。
・【Google公式情報あり】SEOのE-E-A-Tとは？重要性と対策を解説	E-E-A-T評価についてGoogleのガイドラインを基に詳しく解説しています。
・Googleが推奨するSEO対策とは？Google公式の見解をご紹介！	Google公式が発表しているSEOのガイドラインを基に、Googleが推奨しているSEO対策を解説しています。
・コンテンツマーケティングとは？内容と取り組み方、成功事例を紹介	コンテンツマーケティングのやり方や実例をご紹介します。
・逆SEOとは？利用目的と手法・被害に遭った際の対処法も解説	正しい逆SEOのやり方、攻撃的逆SEOを受けた際の対処法などをご紹介します。

監修者プロフィール

NEXER 工藤6つのオウンドメディアの運営責任者

詳細プロフィールはこちら

2017年NEXERに入社。前職はスマートフォンの販売員。
NEXER入社後はSEOコンサルティング営業部、クライアントマーケティング事業部を経て、現在はオウンドメディアを6つ運営&管理の責任者を任されている。
新規で1から立ち上げた2つのサイトは年間100万PV以上のメディアに成長。
既存のオウンドメディアと、サイト買収をおこなった3つのサイトは、運用当初に比べて3倍～5倍の収益を出すメディアに成長。
さらに、2022年12月より新規でもう1サイトに挑戦中。

NEXERは各社の課題に合わせた
専用SEOプランをご提案いたします！