これからHTMLを始める方に知ってもらいたい「検索エンジン最適化」。

これからHTMLを始める方に知ってもらいたい「検索エンジン最適化」。

これからHTMLを始める方に向けて、
SEOに適した8つのHTMLタグや構造についてまとめました。

 

Titleタグ

webページのタイトルをこちらで作成します。
下記のようなtitleタグを使って記述をします。

<title>株式会社ABC</title>

下記が作成のポイントになります。

・文字数は35字程度
・サイトの特徴が分かるキーワードを入れる
・ページのファーストビューにtitleタグでいれた
内容と相違が無いようにする。
 
 

Metaタグ

Metaタグとは制作したサイトの情報を記述する専用の
タグになります。

下記のようなtitleタグを使って記述をします。

<meta name=”description” content=”会社の説明”>
<meta name=”keywords” itemprop=”keywords” content=”キーワードをカンマ区切り”>

ディスクリプションにはサイトの紹介文を記載して、
キーワードはカンマ区切りで作成するのが、ポイントです。
 
 

hタグ

hタグとはページの見出しを設定するタグになります。
h1~h6まであります。

下記のようなtitleタグを使って記述をします。

<h1>タイトル</h1>

また作成ポイントは下記です。

・h1タグは1ページに1~2個にとどめる
・hタグは順番に使用します。(例:h1→h2→h3)
・hタグにフォントサイズの変更を直接指定しない。
・見出しは簡潔に、重要なキーワードを入れる。
 
 

Canonical

hタグとはページの見出しを設定するタグになります。
h1~h6まであります。

canonicalタグは、サイト内で重複したページがあるときに
どのページが最も重要なページなのかを検索エンジンクローラー
教えるために記載します。検索インデックスに複数のURLが登録されると
SEO評価がばらけてしまうので、SEO評価をまとめるために
canonicalタグが重要な役割を果たします。

<link rel=”canonical” href=”https://adc.co.jp/”>

また使用ポイントは下記です。

・1つのサイトでhttpとhttps「wwwありとなし」が混在している場合
(htaccessを使って301リダイレクトを使用していれば問題ないです)
https://www.cloud9works.net/seo/how-to-301-redirect-with-htaccess/

・同じ商品でも違いがありURLが分かれている場合。
・PCサイトとスマホサイトでURLが違う場合。

 
 

リストタグ

liタグですが、「li」はList Itemの略です。
リスト形式の中のアイテム、箇条書きの中身を表現できます。

ですが、中身を表現するだけなのでどのような箇条書きの
タイプであるかを表すHTMLとセットで使う必要があります。

箇条書きのタイプには2つありますので、ご紹介します。

ulタグとセット
数字無しの箇条書きで記載する場合に使用します。
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

olタグとセット
数字ありの箇条書きで記載する場合に使用します。
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>

 
 

altタグ

画像の「alt属性」は検索エンジンやユーザーにわかりやすいように簡潔な内容で記述し、
「title属性」はユーザービリティを考慮しながら画像の情報を補足するような文言を
記述しておくと良い思います。

 
 

aタグ

aタグは、一般的には指定した部分の要素を
ハイパーリンクとして扱うことができるタグです。

ハイパーリンクと聞くとあまり聞き馴染みが無いかもしれませんが、
クリックするとページが切り替わるようなリンクの事です。

このaタグでは文章だけではなく、画像などの要素になるものを
リンクにさせることができます。

使用例:
文章の場合
<a href=”https://adc.co.jp/”>ここに文字</a>

画像の場合
<a href=”https://adc.co.jp/”><img src=”../img/common/logo.png” alt=”株式会社ABC”></a>

 
 

pタグ

Pタグは、”paragraph”の略で、「段落」を意味します。

改行するために使用するのは、正しい使い方ではないので注意しましょう。
<p>コンテンツの内容</p>

また下記2つのタグは段落とは意味合いが違います。
間違って使用するとクローラーに間違った文書構造が伝わってしまうので、
使用には注意しましょう。
・リストタグ
・brタグ(改行に使われるタグ)

 

最後に

今回ご紹介した8つのタグを見直して
クローラー(yahooやgoogle)に最適な情報を伝えて、
検索エンジン最適化を目指しましょう。

 

参考

SEO対策に適した8個のHTMLと構造・title、meta、hなど基本タグを解説