Webサイトのタグ内で有効・無効なHTML要素とは？

2022.07.28　Posted by takahashi.r

Webプログラミング

HTMLの構成上、またSEO対策の上でも重要な<head>タグですが、記述上明確なルールがあることをご存知でしょうか？特に、検索エンジンからのアクセスが増えず、思うように検索順位が上がっていないと感じているWeb担当者は、<head>タグについて改めて理解を深めることが大切です。

<head>タグへの理解を深めれば、検索エンジンに対して、自社サイトにあるのはどのようなコンテンツなのか、どのような価値を有しているのか、SEO対策上、有利になるようにアピールできます。

内部を見ない限り、閲覧することはほとんどなく、難しいという印象や触ってはいけないというイメージを持っている方もいらっしゃるかと思います。基本を理解すれば、<head>タグは格段に扱いやすくなるため、ぜひ参考にしてください。

<head>タグとは？

<head>タグとは、<html>、<body>タグと並んでWebサイトを構成する重要な要素の一つで検索エンジンにそのページの言語などの基本となる情報を伝えるための役割を持っています。そのため、<head>タグは、文章を読んでくれるユーザーのために準備しておくものではありません。

<head>タグは、Googleなどの検索エンジンに対して「このページは、このようなことが記載されたページだよ！こういったことを評価してね！」とアピールする役割があります。

<head>タグ内で有効なHTML要素

<head>タグは、何を記載しても良いわけではなく、<head>タグ内で有効なものと、そうでないものがあります。下記は有効な要素となります。

title
meta
link
script
style
base
noscript
template

それぞれの特徴や役割について説明していきます。

titleとは

titleタグとは、Webサイトのタイトルを表示するためのHTMLタグです。titleタグは、さまざまな場所で利用されます。たとえば、SNSで情報が共有される場合は、titleタグが利用されるケースが多いです。

metaとは

metaタグとは、記事コンテンツの内容を検索エンジンやブラウザへ伝えるためのHTMLタグです。

linkとは

linkタグとは、Webサイトのページと別ファイルを関連づけるためのHTMLタグのことです。

scriptとは

scriptタグとは、VBScriptやJavaScriptなどのスクリプトを文章内に埋め込んだり、読み込んだりといったことを実行するためのHTMLタグです。

styleとは

styleタグとは、<head>タグ内にスタイルシートを記述するためのHTMLタグのことです。

baseとは

baseタグとは、相対パスの基準URLを指定するためのHTMLタグのことです。baseタグを利用すれば、文書内に存在している相対パスの基準URLを簡単に変更することができます

noscriptとは

noscriptタグには、スクリプトが動かないブラウザのために表示させる内容を指定するために使用するHTMLタグです。

templateとは

templateとは、同じ内容のコンテンツを毎回作り直す必要がない場合、その内容を省略するためのHTMLタグです。

<head>タグ内で無効なHTML要素

基本的に上記の要素以外は、<head>タグ内に記述してはいけません。特に、以下の2点については記述されてしまっていることが多いので注意しましょう。

img
ifreme

それぞれの特徴や役割は以下の通りです。

imgとは

imgタグとは、画像を表示するためのHTMLタグです。

iframeとは

iframeタグとは、Webページ内に領域を設けて、src属性で指定したURLを読み込み、その内容を表示させるためのHTMLタグです。

Googleは<head>タグ内で無効な要素を検出すると、その箇所で<head>タグが終了したと見なし、それより先の記述を読み込みません。したがって使用しなければならない場合は、Googleに認識させたい要素の後に置く必要があります。

まとめ

<head>タグは、検索エンジンに向けた情報を記述する場所であり、検索順位とも関連性のある重要なエリアです。<head>タグは、どのようなものでもたくさん記述しておけばよいというわけではありません。そのため、書いて良いものだけを選んで厳選して期待していくことで、SEOにおける効果を高めることができます。

関連記事こちらの記事も合わせてどうぞ。