他社広告運用 PR

headとbodyって何?広告タグを埋め込む際に知っておきたい前提知識

記事内に商品プロモーションを含む場合があります

ブログやホームページを運営しているとよく耳にする、headやbody。

特に、ネット広告を掲載する際に目にする機会も多いことと思います。

「正直、よくわからーーーん!」と思いながらも、なんとなく広告を運用できてしまっている方も多いのではないでしょうか?

ユミ
ユミ
昔の私は完全にそうでした・・・

でも、いちブログ運営者としてやはり理解しておくに越したことはありません。

そこで今回は、それぞれの違いや広告の掲載方法についてご紹介をしていきます。

\アドセンス以外のクリック型広告を紹介/他社広告 >>無料で受け取る

ホームページ(html)の構造

ブログの構造

あなたが普段WordPressで運営しているブログは、htmlで作られています。

HTMLとは「ハイパーテキスト・マークアップ・ランゲージ(Hyper Text Markup Language)」の略で、WEBページを作成するための言語です。

その構造をすごぉ~く簡単に表すと、このようになっています↓

<html>
 <head>
 </head>
 <body>
 </body>
</html>

< >という記号は始まりを意味し、</ >というのは、終わりを意味しています。

 

つまり、

<html> …ここからhtmlタグ始まり
 <head> …ここからheadタグ始まり
 </head> …headタグ終わり
 <body> …ここからbodyタグ始まり
 </body> …bodyタグ終わり
</html> …htmlタグ終わり

ユミ
ユミ
それぞれ、このような意味があります

 

ブログに広告タグを掲載する場合に、

「head内にタグを設置してください」
「body内にタグを設置してください」

ということを広告会社から指定されますが、その場合は「始まり」から「終わり」の間である以下の箇所に入れたらOK!

<html> 
 <head> ★headタグはここ
 </head> 
 <body> ★bodyタグはここ
 </body> 
</html>

 

ただ、一言で<head>~</head>の間と言っても、その間にはたくさんのコードが記述されています↓

 <head> 

~~~~~ここに色んなコード(何十~何百行)~~~~~

 </head> 

head内にと指定された場合、基本的にはその間に入れておけばどこでもOKです。

ただし一つ注意点があります。

headタグを挿入する際、中途半端な箇所(真ん中の方)に入れてしまうと他のコード内に記述されてしまい、該当のコードにエラーが起きてしまう可能性があります。

ユミ
ユミ
おかしなところにタグを入れると、ブログが真っ白…!なんてことも。

 

そのため、

<head>の直後 …head内の他のコードが始まる前
</head>の直前 …他のコードが終わった後

どちらかに入れておくようにすると確実でしょう。

 

ちなみに、SWELLやJINをお使いの方であれば、何百行のコードの中から設置箇所を探さなくても、テーマ固有の機能で簡単に設置することができますよ。

【SWELL】headタグとbodyタグ内にコードを設置する方法人気のテーマ『SWELL』ユーザーの方であれば、テーマ固有の機能を使えば簡単にheadやbodyタグ内にコードを記載することが可能です。...
【JIN】headタグとbodyタグ内にコードを設置する方法人気のテーマ『JIN』ユーザーの方であれば、テーマ固有の機能を使えば簡単にheadやbodyタグ内にコードを記載することが可能です。 ...

次は、headとbodyの意味を解説していきます。

head(ヘッド)とは?

「head」とは、ページが読み込まれてもウェブブラウザには表示されない部分のことです。

基本的にこの中に入れた情報はコンピューターが読み取るため、私たちが記事ページを見る中でコードの情報を目にすることはありません。(※title要素は別)

そして、この部分はヘッダ情報を記述する場所ですので、ここに広告タグを入れることでサイト内の全てのページに広告を反映させることができますよ。

広告を掲載する場合、システム(プログラム)を読み込むタグがこちらになります。

ブログ記事をクリックした時にどのように表示させるかを指定するため、

・オーバーレイ広告
・ポップアップ広告(インスタースティシャル)

などはこちらに記載することが多いです。

※一部、広告会社によってbodyに記載する場合もあります。

body(ボディ)とは?

対してbodyとは、文章や画像など、実際にブラウザの画面上に表示される内容を指定するタグです。

bodyタグの中に書かれたテキストや画像などがブラウザの画面上に表示され、実際に私たちが目にすることができる部分となります。

見出しタグや段落タグをここに記載することで、サイト上に文章を表示させることができますよ。

広告を掲載する場合、こちらのタグは”実際に掲載する箇所”に貼り付けるようにしていきます。

ディスプレイ広告やレコメンド広告など、「この場所に設置したい」というところにタグを順番に並べていけばいいでしょう。

body内に記載する広告タグの役割は、広告の大きさを指定したり、どの広告を表示するのかを指定するために使われることが多いです。

記事上部や記事下など、特定の箇所に広告を掲載する場合はこちらになります。

 

headとheaderの違い

headとheaderの違い

また、ややこしいのがhead(ヘッド)とheader(ヘッダー)の違い。

ユミ
ユミ
この2つって同じもの?

 

head内に広告タグを記載する場合は、<head></head>の間に入れるのが正しいですが、似たものに<header></header>があります。

この2つは混同されがちですが、全く別物なので注意が必要です。

headとheaderの違い

  • 【head】
    ページ内には表示されない情報を記載する
  • 【header】
    そのページのヘッダー(上部)に当たるもので、画面に表示される。ブログのロゴや検索バーなどを設置することが多い

 

ブログの構造としても、header部分はこちらにあります↓

<html>
 <head>
 </head>
 <body>
 <header>
 </header>

 </body>
</html>

 

こちらを見ていただくとわかる通り、head内とheader内は、場所が全く別。

<html>
 <head> ★head内はここ
 </head>
 <body>
 <header> ★header内はここ
 </header>
 </body>
</html>

広告タグを記載する場合は<head>内に入れることになるので、<header>内と間違えないように注意しましょう。

 

ユミ
ユミ
ちなみに、ブログの上部をheaderというのに対して、下部のことをfooter(フッター)といいますよ

<html>
 <head>
 </head>
 <body>
 <header>
 </header>
 <footer>
 </footer>
 </body>
</html>

htmlの構造を図解すると・・・

ここまで文章で書いてきましたが、これらを図解すると以下のような構造になります。

htmlの構造

ホームページ (html) の中に、画面に表示されないheadと、表示されるbodyが一つずつあるイメージです。

そして、bodyの中にheaderや本文、footerがあると理解いただければOK!

 

広告タグを設置する場合も、「ここに設定したい」と記事上部や記事下にピンポイントで指定する場合はbodyタグへ。

場所を指定するのではなく、記事をクリックした時に作動するような広告(ポップアップ)などはheadタグへ掲載するようにしていきましょう!

※一部クリック作動する広告でも、body内へ掲載する場合もあります。

 

ちなみに、WordPressで「外観」▶「ウィジェット」で広告タグを設置する場合、

・記事上部
・記事下
・サイドバー

などピンポイントで指定することになるため、広告タグを設定すると自動的にbody内へ記載されます。

テーマエディターから広告タグを設置する【WordPressユーザー向け】

最近のテーマ(SWELLやJIN)を使用されている方であれば、このような細かな構造を知らなくてもテーマ固有の箇所にタグを掲載すればOK!

テーマエディターを使って操作することはリスクも大きいので、テーマ固有の機能で掲載できる場合は、こちらは使わない方が賢明です。

ユミ
ユミ
間違った箇所にタグを入れてしまうと、その途端にブログが真っ白!ということにもなるので…

 

しかし、使用テーマにそのような機能が付帯されていなければ、「外観」▶「テーマエディター」から直接タグを書き込む必要があります。

テーマエディター

 

その場合、ご自身でheadタグやbodyタグがどこにあるのかを探す必要があります。

そこで、そのような方向けにそれぞれのタグがどこにあるのかをまとめておきますね。

※ただし、テーマによって若干違うので注意

 

header.php

<html>
 <head>
 </head>
 <body>
 <header>
 </header>

headタグを入れる場合、header.phpファイルから<head>タグの直後、もしくは</head>の直前にタグを挿入するといいでしょう。

body内にタグを入れる場合も、<body>タグ直後に書き込むことができます。

head.php

 <head> 
 </head>

テーマによっては、こちらでheadタグを記載する必要があることも。(header.php内にheadタグが見つかれなければこちら)

head.phpで指定したタグを、「header.phpに取り込め!」というプログラムが組まれているテーマの場合、headタグはこちらに入れていきましょう。

※テーマによっては、このファイルがない場合もあります。

footer.php

<footer>
</footer>

広告タグを掲載する際、こちらを使うことはありませんが参考までに。

 

テーマエディターに直接書き込む場合、テーマを更新した際にタグが消えてしまうため、子テーマでの編集をおすすめします。

WordPressのテーマをインストールする
10分で完了!WordPressにテーマをインストールする方法と手順使用するテーマが決まったら、WordPressにテーマをインストールしていきます。 手順通りに進めればものの10分程度で完了しますので...

あとがき

今回は、headとbody、ホームページ(html)の構造についてでした。

少し難解に感じられたかもしれませんが、ブログで広告タグを掲載する際は本記事の知識だけあればひとまずOKです!

わかりづらかったところは何度も見返していただき、普段の学習に役立ててください。

 


メルマガのバックナンバーを読む>>



【期間限定】ブログで月100万を叶えたノウハウを受取る

他にも…
◆ 本当に稼げる他社広告5選
◆ 図解付き!ブログの
開設マニュアル


これらを無料でプレゼント中!

つい数年前まで普通のOLだった私が、たった一つのブログを始めたことで人生が変わりました。

初心者から始めたブログで、4ヶ月で月100万円の収入を叶え、今では時間や場所に縛られない自由なフリーランスとして働いています。

  • 好きな場所、好きな時に働きたい
  • 自宅やカフェで、PC一台で仕事をすることに憧れがある
  • 文章を書く仕事で、月20万円以上を稼ぎたい
  • お金を気にせずに旅行したり、経済的な不安から解放されたい

そんなあなたらしい人生を叶えるために、未経験からブログで収入を得る方法を解説したマニュアルを無料で配布しています。

初めて挑戦される方でも、安心してブログを開設できるよう、図解付きの手順書も併せてプレゼント中!

メルマガ登録者さん限定で、期間限定で配布していますが、いつ有料化するかわかりませんので、今のうちにお受け取りください。

ボタンをクリックして、登録フォームに「名前」と「メールアドレス」を入力したら、プレゼントが手に入ります。


今すぐ無料プレゼントを受け取る

ABOUT ME
ユミ
初心者向けのブログ術&アドセンスの収益化をメインに発信中/2019年に複数のクリック型広告を組み合わせる「他社広告戦略」を開発/これまでに約50種類の広告を試し、同じアクセス数でもブログの収益性を2倍以上に改善した事例多数/月収10~420万円の収入を得るコンサル生さんを輩出中/ブログで収入を得たい初心者の方へ、無料のメールマガジンを配信しています
未経験からブログで月収10万円を叶える方法▶
見てみる
未経験からブログで月収10万円を叶える方法▶
見てみる