⛳

seoに強いhtmlタグ

2022/12/12に公開

SEO

htmlタグ

tech

titleタグ

該当するwebページのHTMLのheadタグ内に専用タグでマークアップする。

これらのポイントを抑えた文言にして適切にtitleタグを使えば、良いSEO効果が期待できる。

使用例

<title>ダンスを上手くなるためのコツ</title>

ポイント
・前方にキーワードを含めて、検索クエリとの関連性を強調する
・検索意図を考慮する
・コンテンツの内容と整合をとる
・簡潔にする

リストタグ

基礎体力、コミュニケーション能力、楽しむ気持ちこれら箇条書きの部分を該当のwebページのHTMLのbody内から探して専用タグでマークアップします。

「<ul><li>～</li></ul>」がリストタグです。
リストタグは、箇条書きの項目を検索エンジンに明治するためのHTMLタグのことです。

使用例

<ul>
<li>基礎体力</li>
<li>コミュニケーション能力</li>
<li>楽しむ気持ち</li>
</ul>

ポイント
・ul（項目の順序なしリスト）とol（項目の順序ありリスト）、dl（用語の定義リスト）を使い分ける

tableタグ

tableタグを使う目的としては、「表を作成するための要素」です。
基本はtrタグやthタグ、tdタグと組み合わせて表を作成します。それぞれのタグは上記のような役割をもっており、すべて組み合わせることで1つのtable（表）ができるのです。ただし、見出しがない表も表としては成り立つのでthタグは必ず必要というわけではないです。

まず箇条書きの項目とその項目の簡潔な概要文のセットが4つあるとします。

使用例

<table>
<tbody>
<tr>
<td>基礎体力の付け方</td>
<td>ジムなど使うと効果的</td>
</tr>
<tr>
<td>向上心のあげ方</td>
<td>同じ事で努力している仲間を見つけましょう</td>
</tr>
<tr>
<td>コミュニケーションの場を得る方法</td>
<td>SNSなどコミュニティに参加する</td>
</tr>
</tbody>
</table>

ポイント
・tbodyタグ、trタグ、tdタグ（thタグ）を併用する

strongタグ

strongタグは、内容の重要性、または緊急性が高いテキストを検索エンジンに明示するためのHTMLタグのことです。そういった重要性の高い文章を該当のwebページのHTMLタグ内から探して、テキスト文章全体を専用タグでマークアップします。

使用例

<strong>重要：ダンスには楽しむ気持ちが大事です。</strong>

ポイント
・段落の一部のテキスト（適切な箇所）だけに使う

aタグ

例えば、「ダンスには楽しむ気持ち、向上心、人とのコミュニケーションが大事」という文章を書いたとします。この「ダンス」という単語をアンカーテキスト（リンク付きのテキスト）にしたい場合、該当のWebページのHTMLのbodyタグ内から探した先程の文章の「ダンス」という単語を、専用のタグでマークアップします。

<p><a href="リンク先のページURL">ダンス</a> には楽しむ気持ち、向上心、人とのコミュニケーションが大事</p>
この専用のタグ「<a href=”リンク先のページURL”>～</a>」がaタグ（アンカータグ）というわけです。
aタグは、リンクを貼るためのHTMLタグのことです。

使用例

<p><a href="リンク先のページURL">ダンス</a> には楽しむ気持ち、向上心、人とのコミュニケーションが大事</p>

ポイント
・href属性が指定されたaタグを使う
・href属性にGooglebot（クローラー）がリクエストを送信できる形式でURLを記載する
・リンク先ページのターゲットキーワードを含めたアンカーテキストにする

canonical タグ

まず、「https://.jp」と「https://.jp」「https://.php」のURLにそれぞれアクセスすると、全て同じコンテンツ内容のWebページが表示されるとします。
これらのURLのうち「https://.jp」が正規URLだとします。
この場合、全てのURLのWebページのHTMLのheadタグ内に「https://.jp」の正規URLを含めて専用のタグでマークアップします。

canonicalタグは、コンテンツが重複したり類似してるページのうち、最も評価してほしいページURL（正規URL）を検索エンジンに伝えるためのHTMLタグです。

使用例

この専用のタグ「<link rel=”canonical”～⁄>」がcanonicalタグです。

ポイント
・代表的であると考えるページのURLを選択する（1つを正規URLとして選択する）
・HTTPよりHTTPSを優先して使用する
・絶対パスを使用する

altタグ

画像に適切な alt を設定する。
支援技術を利用して訪れているユーザーに「その画像がどういった画像なのか？」という画像の意図を伝え、何かしらの事情で画像が読み込めなかった場合には alt 属性に指定した代替テキストが表示されるということを意識してコードを書くとよい。
「イメージ 1」「画像」のような alt 属性だったら無いほうが良い。
「〜の写真」「〜の様子」といった具体的な説明をする。
alt 属性自体は省略しないようにする。
alt 属性が無いと支援技術は画像パスを読み上げてしまうため、支援技術を利用しているユーザーにとっては非常に使いにくいサイトになります。

使い方
<img src="tennis.jpg" alt="テニスラケットの画像">

ポイント
・コンテンツ全体の文脈において意味が通るような代替テキストにする
・短くてわかりやすい代替テキストにする
・装飾的な画像の代替テキストは空のままにする

hタグ

ユーザーと検索エンジン双方の利便性を高めるために、hタグは重要な役割を担っています。

使い方

<h1>テニス上達に効果的なことを徹底解説</h1>
　　<h2>テニス上達にはまずはフォーム、基礎体力が重要</h2>
　　　　<h3>基礎が身につけば応用がきく</h3>
　　<h2>テニス上達に効果的なスクール5選</h2>

ポイント
・ページの内容の階層構造を考慮する
・タイトルのテキストをh1要素に配置する
・主要な見出しの前方にキーワードを含めて、検索クエリとの関連性を強調する
・簡潔にする

metaタグ

metaタグの使用方法は、
meta要素の属性と属性値の種類に合わせて適宜content属性を付与しながら書くこと。

meta要素を指定したうえで、name属性なら「description」や「robots」「keywords」「viewport」「charset」などの属性値をマークアップする。

property属性なら「og:title」「og:description」「og:type」などのOGPタグの属性値をマークアップする。

これらの属性や属性値の内容をcontent属性で追記して明示します。

使用例

metaタグとセットで使うタグなど
・meta description（メタディスクリプション）
・文字エンコーディング（文字コード）
・OGPタグ
・viewportタグ
・noindexとnofollow

Discussion