SEOのためのHTMLタグ

SEOのためのHTMLタグ:WordPressユーザーが知っておくべきこと

SEOにおいてHTMLタグはどれほど重要か?どのタグを学ぶ必要があるか?

HTMLタグは、検索結果でのコンテンツの表示方法やランキングに影響を与える可能性があります。

したがって、SEOのためのHTMLタグは不可欠ですが、コンテンツに自動的に追加することもできます。その方法を見ていきましょう。

SEOのためのHTMLタグとは?

以下にリストされたHTMLタグの中には、複数の用途を持つものもありますが、すべて検索エンジンの結果でコンテンツがどのように表示されるかに影響を与える可能性があります。

例えば、スキーママークアップは目を引く検索表示を作成し、トラフィックを大幅に増加させることができます。

すべてのHTMLタグは、検索エンジンがコンテンツを理解し、検索クエリに一致させるのに役立ちます。

ウェブトラフィックの68%が検索エンジンから始まっていることを考えると、SEOは無視できないマーケティングチャネルです。

以下の各タグセクションでは、関連するSEOへの影響について説明します。

HTMLを学ぶ必要はありますか?

いいえ、SEOを効果的に使用するためにHTMLを学ぶ必要はありません。

WordPressのようなほとんどの最新ウェブサイトプラットフォームでは、記事のタイトルと説明を入力するためのフォームフィールドが用意されています。その後、HTMLタグが自動的に追加されます。

しかし、この記事で説明されている他のHTMLタグについてはどうでしょうか?

All in One SEO (AIOSEO) プラグインをダウンロードする

All in One SEO (AIOSEO) のようなSEOプラグインの使用をお勧めします。

この初心者向けのプラグインは、ウェブページのコンテンツを分析し、改善のための簡単なチェックリストを提供します。

aioseoホームページ

AIOSEOの仕組み

AIOSEOがチェックする項目の多くは、関連するHTMLタグを持っています。そして、プラグインはこれらのタグが追加されるようにします。

AIOSEOが最適化を支援し、HTMLコードに関連するページ要素をいくつか紹介します。

  • タイトルタグ: All in One SEOは、ターゲットキーワードが使用されているかを確認するためにタイトルをチェックします。また、タイトルが60文字を超えている場合、Google検索で切り捨てられる可能性が高いこともわかります。
  • メタディスクリプションタグ:AIOSEOは、ターゲットキーワードがメタディスクリプションに使用されているかどうかも確認します。不足している場合は追加するように促します。説明が160文字を超えている場合も警告されます。
  • 小見出し:小見出しはコンテンツをスキャンしやすくするため、AIOSEOは小見出しのない長い段落をチェックします。プラグインは、ターゲットキーワードが一部の小見出しで使用されているかどうかもチェックします。
  • 画像SEO:AIOSEOを使用すると、altタグを含む画像SEOのサイト全体の設定を作成できます。
  • スキーママークアップスキーママークアップを追加するには、いくつかのボタンをクリックし、いくつかのフォームフィールドに入力します。
  • ソーシャルメディアタグ:FacebookやTwitterでの共有のためにコンテンツを最適化します。これを行うには、いくつかのボタンをクリックします。All in One SEOは、必要なOGタグとTwitterカードタグを追加します。
  • noindexロボットタグ:簡単なクリック操作でコンテンツを検索エンジンから非表示にできます。AIOSEOは、必要なnoindexロボットメタタグをHTMLに自動的に追加します。

ボタンをクリックしてフォームフィールドに入力できるなら、All in One SEO(AIOSEO)を使用できます。

All in One SEO(AIOSEO)は、WordPress.orgで数千件の5つ星レビューを獲得している実績のあるプラグインです。現在、300万人以上が利用しています。

次に、SEOのトップHTMLタグを見てみましょう。

タイトルタグ

ウェブページのタイトルは、検索スニペットの重要な部分です。説明とともに、ユーザーがあなたのウェブサイトをクリックする理由を与えることができます。

SERPでのタイトルタグの例

しかし、Google(または他の検索エンジン)はあなたのタイトルが何であるかを知るにはどうすればよいでしょうか?そこでタイトルタグが登場します。

タイトルタグは、ページタイトルの先頭と末尾に表示される小さなコード片です。これらのタグは検索エンジンに「これがタイトルです」と伝えます。

HTMLコードのタイトルタグ

HTMLでのタイトルタグの外観はこちらです

<title></title>

開始タグと終了タグがあることに注意してください。

その2つのタグの間が、タイトルが入る場所です。

<title>Your Title Goes Here</title>

ウェブページの先頭にタイトルを入力すると、ほとんどのウェブサイトプラットフォームは自動的にタイトルタグを追加します。そのため、気にする必要すらありません。

しかし、心に留めておくべき良い実践方法がいくつかあります。

タイトルタグのベストプラクティス

  • タイトルを正確にし、フォーカスキーワードを含めてください。
  • 検索エンジンは約60文字でタイトルを切り取ります。そのため、その60文字を有効活用してください。
  • 60文字を超えることもできますが、タイトルの表示部分が記事の内容を伝えていることを確認してください。
  • タイトルが不明確または不正確な場合、Googleはそれを書き換える可能性があります。

All in One SEOを使用してタイトルを最適化する方法を学びましょう。

タイトルタグのSEOバリュー

タイトル説明は検索エンジン結果ページ(SERP)に表示されるため、検索者がクリックするように説得する2つの重要な機会となります。

タイトルにフォーカスキーワードを含めることは、Googleがページを理解するのに役立ちますが、ランキング要因ではありません。

しかし、よく作成されたタイトルは、高品質なコンテンツの側面です。そしてコンテンツの質は最も重要なランキング要因です。

メタディスクリプションタグ

検索スニペットには、ウェブページの短い説明が含まれていることがわかりました。

SEOでは、この説明をメタディスクリプションと呼びます。

タイトルと同様に、ほとんどのウェブサイトプラットフォームは、説明を追加するためのフォームフィールドを提供しており、メタディスクリプションタグを自動的に追加します。

HTMLコードのメタディスクリプションタグ

メタディスクリプションタグがHTMLでどのように表示されるかを示します。

<meta name="description" content="Your description goes here." />

これはセルフクロージングタグと呼ばれるものです。(タイトルタグとは異なり、開始タグと終了タグはありません。)

メタディスクリプションのベストプラクティス

  • 説明文は正確にし、記事のユニークな点を強調するために使用してください。
  • 検索エンジンはウェブページの説明文に使用できるスペースを制限しているため、一般的には160文字に制限されています。
  • ターゲットキーワードと1〜2個の関連キーワードを含めます。

メタディスクリプションについてさらに詳しく学ぶ。

メタディスクリプションのSEO価値

元のメタディスクリプションはターゲットキーワードの検索に表示される場合とされない場合がありますが、Googleは検索クエリに合わせて説明文を書き換えることがよくあります。

「書き換える」とは、ページ内の別のテキストをメタディスクリプションとして表示するために引き出すことを意味します。

以下の例では、Googleは私たちが記述したものとは異なるメタディスクリプションを引き出しています。しかし、その説明文は「多言語SEOとは?」という検索クエリに一致しています。

SERPでのメタディスクリプションの例

したがって、メタディスクリプションを1つ記述しても、記事は複数のキーワードの検索に表示される可能性があり、それぞれGoogleが引き出した異なる説明文が表示されます。

見出しタグ

コンテンツを論理的に整理し、さまざまなセクションに見出し(または小見出し)を使用することで、検索エンジンとユーザーはコンテンツをすばやく把握できます。

WordPressの編集パネルには、h1〜h6の見出しオプションが用意されています。

  • H1はページタイトルに使用され、通常は最も大きなフォントで表示されます。
  • その他のh2〜h6はそれよりも小さく、論理的で階層的な順序でコンテンツを整理するために使用されます。

たとえば、記事にはh2見出しを持ついくつかのセクションがあり、それらのセクション内ではh3またはh4見出しを使用します。

バックグラウンドでは、WordPressはHTMLヘッダータグを追加し、検索エンジンがコンテンツの形式を理解するのに役立ちます。

HTMLコードの見出しタグ

HTMLでは、ヘッダータグは次のようになります。

<h1></h1>

h1タグは通常、タイトル用に予約されています。したがって、HTMLでは、ページのタイトルはh1タグで囲まれて表示されます。

<h1>This is My Page Title</h1>

なぜタイトルタグがここに含まれていないのか疑問に思うかもしれません。ページタイトルはHTMLコードに2回表示されます。

  • タイトルタグで囲まれている(これは検索エンジン専用です)
  • h1タグで囲まれている。(これは読者に表示されるタイトルです。)

他のhタグも同じ構文を使用します。たとえば、これは記事セクションに使用されるh2タグです。

<h2>Introduction to Sales</h2>

見出しのベストプラクティス

  • 見出しを役立つものにし、具体的にしてください。
  • スキャンできるように、簡潔にしてください。
  • 最も重要な用語を最初に配置します。

見出しのSEO価値

見出しタグは、検索エンジンがコンテンツのセクションを見つけ、関連するクエリに一致させるのに役立ちます。

このため、コンテンツが複数の検索キーワードでランク付けされるのに役立ちます。

しかし、スキャン可能なコンテンツを作成するためにも重要です。

明確で論理的な構造とセクションごとの小見出しを使用することで、読者のエンゲージメントを維持し、再訪問を促すことができます。

画像のalt属性

altテキストとは、画像を説明するテキストのことです。WordPressを含むほとんどのウェブサイトプラットフォームでは、altテキストを追加するためのフォームフィールドが用意されています。

このaltテキストには2つの目的があります。

  • 検索エンジンは画像altテキストを読み取り、インデックス化します。これにより、画像の内容を理解するのに役立ちます。
  • スクリーンリーダーは、視覚障がい者が使用するデバイスで、altテキストを読み上げます。
更新可能な点字リーダー
この「リフレッシュ可能な点字リーダー」のピンは、画面上のテキストに応じて上下します。

altテキストを追加すると、WordPressは自動的にそれを画像alt属性で囲みます。

HTMLコードの画像alt属性

alt属性は、画像要素中に表示されるHTML属性です。

画像タグ(「img」)は、URL形式の画像のオンラインソース(「src」)を指します。

<img src="https://upload.wikimedia.org/wikipedia/commons/c/c0/Yury_Pen_-_Portrait_of_Marc_Chagall.jpg" alt="marc chagall portrait">

画像alt属性のベストプラクティス

  • 装飾的な画像でない限り、常に画像のaltテキストを含めてください。
  • 句読点、ダッシュ、特殊記号は省略してください。
  • 画像とそのコンテキストを説明してください。

たとえば、画像がノルウェー、オスロの犯罪率の傾向を示すグラフである場合は、読者に何を示しているかを説明してください。

alt="crime trends in oslo norway"

画像alt属性のSEO価値

alt属性は、画像や図が画像検索に表示されるのに役立ちます。

SEOだけでなく、ウェブサイトのアクセシビリティも向上します。

スキーママークアップ(リッチスニペット用)

ウェブページにスキーママークアップを追加すると、検索結果でリッチスニペットとして表示される資格が得られます。

リッチスニペットは、超デラックスな検索エンジンの表示と考えることができます。

これは標準の検索スニペットです。

標準検索スニペットの例

そして、これはリッチスニペットです。

リッチスニペットの例

この種のマークアップを追加するのは簡単です。All in One SEO(AIOSEO)を使用すると、いくつかのボタンをクリックし、いくつかのフォームフィールドに入力するだけです。

30種類以上のリッチスニペットから選択でき、以下が含まれます:

  • 書籍
  • コース
  • よくある質問
  • イベント
  • ソフトウェアアプリケーション
  • 人物。

スキーママークアップはタグよりも複雑ですが、いくつかの類似点があります。このコードは、Googleがそのページをリッチスニペットに変換できるように、ウェブページの一部をタグ付けします。

HTMLでのスキーママークアップ

スキーママークアップのコードは長くなることがあります。

どのようなものかを確認したい場合は、Schema.orgのコードサンプルを参照することをお勧めします。

スキーママークアップのベストプラクティス

可能な限り、ウェブページにスキーママークアップを追加してください。

そして、AIOSEOで利用可能なスキーマタイプを探索してください。

スキーママークアップのSEO価値

リッチスニペットは、標準スニペットよりもクリック率が高くなります。

リッチスニペットの詳細をご覧ください。

正規化タグ

正規化タグは、Googleが重複ページを検索結果に表示したいページを特定するのに役立ちます。

正規化タグの一般的な用途は、同じコンテンツがサイトの複数の領域に表示される可能性がある製品ページです。

ベストプラクティス

内部リンクを貼る際は、正規化URLにリンクしてください。これにより、Googleに優先順位が伝わります。

HTMLコードでの正規化タグ

正規化タグ(または属性)の構文は次のとおりです。

rel="canonical"

正規化タグを追加したリンクの例を次に示します。

<link rel="canonical" href="https://example.com/sneakers/green-sneakers" />

このリンクは、HTMLのheadセクションに配置されます。

正規化タグは技術的なSEOのトピックです。Googleの開発者向けガイドラインで正規化URLを指定する方法を確認してください。

その他の重要なHTMLタグ

SEOのための主要なHTMLタグを説明しました。ここでは、用途とともにいくつかの特殊なタグを紹介します。

Open Graphタグ

Facebookで共有されたときに、ウェブページの一部が欠けているように見えることがあるのはなぜか疑問に思ったことはありませんか?

ユーザーがあなたのページをFacebookで共有すると、ソーシャルメディアプラットフォームはOpen Graphタグをコードから検索します。

これらのHTMLタグは、Facebookに表示する画像、タイトル、説明を伝えます。あなたのページにこれらのOGタグがない場合、共有されたときに平凡に見えます。

All in One SEO (AIOSEO) は、コンテンツが Facebook でどのように表示されるかを簡単に制御できる方法を提供します。(コードを気にする必要はありません。)

Facebookのためのページのaioseo最適化
上:AIOSEO はコンテンツの Facebook プレビューを提供します。ページが Facebook で意図したとおりに正確に表示されるように、設定を簡単に調整できます。バックグラウンドでは、AIOSEO が必要な Open Graph タグを追加します。

Twitterカードタグ

Twitter カードタグは OG タグと同様に機能します。ここでも、All in One SEO (AIOSEO) を使用して、Twitter で共有されたときにページがどのように表示されるかを制御できます。

ボタンを 1 回クリックするだけで、Facebook の設定を Twitter 共有用にコピーできます。

aioseo最適化されたTwitterカード

バックリンクは重要なランキング要因です。(バックリンクとは、他のサイトからあなたのサイトへのリンクのことです。)

評判の良い質の高いウェブサイトからのリンクは、あなたのサイトのランキングを向上させることができます。

しかし、リンクには属性が含まれる場合があり、その一部は SEO の価値を無効にする可能性があります。

たとえば、“nofollow” 属性は、検索エンジンにリンクを無視するように指示します。

この属性がリンクのコードでどのように見えるかを示します。

<a href="https://www.example.com" rel="nofollow">linked text</a>

nofollow、ugc、および sponsored 属性について学び、それらを回避する方法を理解しましょう。

Noindexロボットタグ

noindex タグは、コンテンツが検索結果に表示されるのを防ぎます。

スタッフログインページや「成功ページ」は、検索エンジンにスキップさせたいコンテンツの例です。

ここに、meta robots タグに含まれる noindex 属性を示します。

<meta name="robots" content="noindex" />

以前は、noindex ディレクティブがサイトの robots.txt ファイルに追加されることがありましたが、このアプローチは 2019 年に Google によって非推奨となりました。

HTML 5 セマンティックタグ

セマンティックタグは、検索エンジンがページの各部分が互いにどのように関連しているかを理解するのに役立ちます。

これらは、2008 年の HTML 5 リリースにおける主要な機能でした。

セマンティックタグの例をいくつか示します。

  • <main>
  • <aside>
  • <form>
  • <table>
  • <time>

WordPress のコードベースとテーマにはセマンティックタグが含まれています。

SEO に関する HTML タグの Q&A

SEO のための主要な HTML タグについて理解したところで、まだ疑問が残っているかもしれません。

SEO のために HTML を知る必要がありますか?

いいえ、良い SEO を行うために HTML を知る必要はありません。WordPress のようなコンテンツ管理システムや All in One SEO (AIOSEO) のような関連プラグインの進歩のおかげで、コードを知らなくても効果的な SEO を行うことが可能です。

SEO向上のためにHTMLをどのように構造化していますか?

HTML は、ブラウザと検索エンジンにページのフォーマットに関する情報を提供します。より良い結果を得るために、ページを論理的に構造化し、コンテンツが整理され、明確になるようにしてください。

WordPressやDrupalのようなトッププラットフォームが提供するWYSIWIGエディターでこれを行うことができます。

さらに、ページをスキャンしやすいようにフォーマットする方法を学びます。また、関連する場合は、ページにスキーママークアップを適用します。

SEOのためのHTMLタグの後 . . .

この投稿が、SEOのためのトップHTMLタグをいくつか特定し、それらを適用するためにコードを学ぶ必要がない理由を理解するのに役立ったことを願っています。

All in One SEOは、サイトがメタデータを正しく使用していることを保証します。

次に、ウェブサイトにHTMLサイトマップを追加する方法を学びます。オンページSEOツールをチェックしてください。そして、良いアンカーテキストを作成する方法を探ります。

検索エンジン最適化についてさらに詳しく知るには、YouTubeチャンネルを購読してください。そこには素晴らしいステップバイステップのチュートリアルがあります。また、X(Twitter)LinkedIn、またはFacebookでフォローして、最新情報を入手することもできます。

AIOSEO を無料で試してみませんか?

AIOSEO Lite をインストールするには、WordPress ウェブサイトの URL を入力してください。

開示:当社のコンテンツは読者によってサポートされています。これは、当社のリンクの一部をクリックすると、手数料が発生する可能性があることを意味します。当社は、読者に価値をもたらすと信じる製品のみをお勧めします。

著者アバター
シェリー・ゴセット コンテンツライター
シェリーは、アメリカ合衆国ニューハンプシャー州在住のSEOアナリストです。新しいSEOの動向について調査、実装、執筆に忙しくないときは、ハイキングやギターを弾いて過ごしています。

コメントを追加

コメントをお寄せいただきありがとうございます。すべてのコメントはプライバシーポリシーに従ってモデレーションされ、すべてのリンクはnofollowであることをご了承ください。名前フィールドにキーワードを使用しないでください。個人的で有意義な会話をしましょう。