アフィリエイト初心者が大金を稼ぐブログ

ブラック企業を退職した管理人がアフィリエイトで四苦八苦している様子を公開します

*

アフィリエイトをする上で知っていると役立つHTMLタグの使い方

      2015/08/14

4055e2b2b8c49a0291231d7d2fb88c20_s

アフィリエイトで必要となる知識

アフィリエイトを始める上で避けては通れない道が、HTMLタグに関する知識の習得です。インターネットが発展し、PCやスマホを使う人口が増えた結果、世間一般的にITに対する抵抗感が減ってきていることは確かです。しかし、それでも情報学科の学校にでも進学しない限り、HTMLタグについて基礎からきちんと学ぶ機会は少ないでしょう。私も情報学科に通っていませんでしたので、HTMLタグについて学校で教えてもらった経験は皆無に近いです。

私は以前IT企業に勤めており、SEとして大規模なWebシステムを構築していました。そのおかげで、それほど抵抗感なくアフィリエイトを始めることができました。しかし、そうでない人も心配する必要はありません。むしろ、そんな心配をしてアフィリエイトを始めることを躊躇しているのであれば、それは大変な機会損失です。

実際にアフィリエイトサイトを構築する上で必要なITの知識はあまり多くはありせん。なぜなら、現在はツール類が発達し、ボタン一つで直感的に操作ができてしまうからです。例えば、自分のサイトにリンクを貼るにはどうすれば良いでしょうか?WordPressを使用しているのであれば、記事投稿画面にある「link」というボタンをクリックすれば、HTMLタグについて何も知らなくてもリンクを貼ることができます。

20150605125142

今回は、普段私がサイトの記事を書くときに使っているHTMLタグについて説明していきます。ここでは、HTMLタグ全般の説明をするつもりはありません。そんなものはシステム開発に携わっている人間でなければ必要ありません。ポイントは、あくまでアフィリエイト記事を書く際に役立つ用語に限定している点です。先ほど話したように、知らなくても何とかなるかもしれませんが、基礎知識として持っているだけで何かの役に立つかもしれません。

aタグ

ソース

<a href=”http://XXXXXXXXXX”>○○ホームページ</a>

表示イメージ

アフィリエイトをするためには絶対に知っておかなければならないHTMLタグは「aタグ」です。読み方は「アンカータグ」になります。これは「href」という属性で指定されたページを表示する機能を持ちます。これまで意識したことがない人もいるかもしれませんが、アフィリエイトでASPから発行されるタグは、このaタグのことです。

例えば、自分のブログで他のサイトにあるオススメの商品を紹介しようと思ったら、href属性の箇所にその商品の販売ページのURLを入れてあげれば、ユーザへ誘導させる仕組みが完成します。また、ランディングページで離脱せずに、自分のサイトの他のページも含めて読んでもらえるようにするためには、内部リンクを張ることが重要です。特に、売りたいアフィリエイト商品を宣伝しているページにリンクを集めることができれば、売上も伸びていきます。当サイトでも、関連して読んでもらいたい記事があれば、上記のaタグを使ってリンクを張っています。

また、外部サイトからの被リンクだけではなく、自分のサイトからの内部リンクを多く集めるページもGoogleからの評価が高くなります。そのため、検索結果の上位に表示したいと考えているページには、各ページからこのaタグを使ってリンクを張り、内部SEO対策をすることも重要です

そして、リンクをクリックしたときに、新たなタブを開いてページを表示させたい場合、以下のように「target=”_blank”」を付けることで、それを実現することができます。

ブラウザタブ

<a href=”http://XXXXXXXXXX” target=”_blank”>○○ホームページ</a>

このように、リンク先を同一タブで開くことも新規タブで開くこともできるわけですが、その判断基準は何でしょうか?私の場合、原則自分のサイトへリンクを張るときは同一タブで遷移させ、外部サイトへリンクを張るときは新規タブを開いています。なぜなら、外部サイトへリンクを張った際に同一タブで表示してしまうと、リンクをクリックした後に再度自分のサイトを表示してもらおうと思ったら、ブラウザの戻るボタンをクリックしてもらわなければいけないからです。もし仮に外部サイトに気になるページがあれば、あなたのサイトのことなど忘れてしまうかもしれません。

アフィリエイトで商品を売るためには、自分のサイトの記事を隅々まで読んでもらって、ファンになってもらう必要があります。それなのに、外部サイトを同一タブで開いて自分のサイトが消えてしまうのは、非常に勿体ないことです。しかし、新規タブで開けば、あなたのサイトは別のタブで表示されたままですから、外部サイトのページを見た後に再度戻ってきてくれる可能性が高くなります。

strongタグ

ソース

アフィリエイトで成功するためには、<strong>SEO対策</strong>が重要です

表示イメージ

アフィリエイトで成功するためには、SEO対策が重要です

「strongタグ」は、テキストを強調したいときに使うタグです。IEなどの一般的なブラウザでは、strongタグで囲ったテキストは上記の例のように太字で表示されます。最近では、良質なコンテンツがSEO的に有利になっているため、一つのページに占める文字数が多くなる傾向にあります。ユーザに伝えられる情報量が増えたことは良いことですが、その中でどこが重要な点なのか分かりにくくなるという弊害も発生しています。

対策方法としては、画像を使ったり、色を変えたりする方法など様々ありますが、最も簡単な方法がこのstrongタグを使うことです。特に強調したい部分をstrongタグで囲えば、それだけでデザインを変えることができますし、検索エンジンに対しても重要な箇所であることを教えることができます

私の場合、一度記事全体を書き終えたら、その文章を最初から最後まで数回読み直して、重要だと思うポイントをstrongタグで囲うようにしています。ただし、strongタグを乱用し過ぎるとスパム判定を受けるという意見もありますので、本来の使い方通り、重要だと思う箇所だけに使うようにしましょう。

文字を太字にするという意味では、「bタグ」というものがあります。こちらも文字を太字にすることができますが、強調する意味合いはありませんので、検索エンジンには重要な文章であることを教えられません。重要な箇所なのか、それとも単に文字を太くしたいのかに応じて、strongタグとbタグを使い分けると良いと思います。

hタグ

ソース

<h1>見出しh1</h1>
<h2>見出しh2</h2>
<h3>見出しh3</h3>
<h4>見出しh4</h4>
<h5>見出しh5</h5>
<h6>見出しh6</h6>

表示イメージ

見出しh1
見出しh2
見出しh3
見出しh4
見出しh5
見出しh6

「hタグ」は、見出しを意味するタグです。日本語で文章を書く時も見出しや小見出しを使いますが、HTMLで文章を書く時も同じように見出しを意味するタグがあります。見出しの大きさによって6段階の数値が存在しますが、通常は各ページに一つだけh1タグを使い、h2~h6までは必要に応じて複数回使用します。hタグを使うことで、検索エンジンのクローラに対してもページの文章構造を教えることができます。

このページで言えば、h1タグをタイトルに使い、h2タグとh3タグを見出しに使用しています。また、hタグごとにデザインを変えると、文章の構造が分かりやすくなって読みやすくなります。当ページでは以下のようにデザインを使い分けています。

hタグの使用例

また、hタグは大きい数値から小さい数値を使用するという順序があります。例えば、h2タグの後にh3タグを使うのは正しい順序ですが、いきなりh3タグから始めて次にh2タグが来るのは、厳密には間違った使い方です。完璧に順序を守らなければいけないわけではありませんが、特に理由がない限りは順序にも気をつけましょう。

style属性

最後に、タグではありませんが、デザインを変更する際に大変役立つ方法を説明します。

ソース

<div style=”プロパティ:値;”>○○</div>

使い方は簡単で、デザインを変更したい部分を「divタグ」で囲い、divタグの中にstyle属性を指定します。style属性は「プロパティ+コロン+値+セミコロン」という形式になっており、プロパティが文字色や文字サイズなどの変更したい項目、値が赤色や20pxといった数値になります。style属性はデザインを変更する上で大変役立つ万能な属性です。これを知っておくだけでデザインの幅が大きく広がります。

それでは、具体的な使い方を見ていきます。

文字色を変える

ソース

<div style=”color: red;”>赤色の文字</div>
<div style=”color: blue;”>青色の文字</div>

表示イメージ

赤色の文字
青色の文字

他にも、値の部分をgreenやwhiteなどに変更すれば、好きな色に変えることができます。

背景色を変える

ソース

<div style=”background-color: red;”>背景色が赤色の文字</div>
<div style=”background-color: blue;”>背景色が青色の文字</div>

表示イメージ

背景色が赤色の文字
背景色が青色の文字

今度は文字の色ではなく、文字の背景の色を指定する方法です。プロパティの箇所に「background-color」を指定し、値の箇所に好きな色を書けば背景色を変えられます。

文字サイズを変える

ソース

<div style=”font-size: 20px;”>小さ目の文字</div>
<div style=”font-size: 30px;”>大き目の文字</div>

表示イメージ

小さ目の文字
大き目の文字

pxは「ピクセル」と呼ばれ、コンピュータで使われる単位のことです。この数値が大きい程、文字サイズも大きくなります。

中央寄せ

ソース

<div style=”text-align: left;”>左寄せの文字</div>
<div style=”text-align: center;”>中央寄せの文字</div>
<div style=”text-align: right;”>右寄せの文字</div>

表示イメージ

左寄せの文字
中央寄せの文字
右寄せの文字

画像や文字を横幅のどこかに寄せたいときは、「text-align」というプロパティを指定します。私の場合、画像は中央寄せの方が見やすいと考えていますので、私が運営しているアダルトサイトでは画像を中央寄せにしています。

複数指定

ソース

<div style=”color: white;background-color: red;text-align: center;”>複数指定の文字</div>

表示イメージ

複数指定の文字

上記の例のように、style属性に複数の値を指定すれば、それらが全て反映されます。

まとめ

ここで説明したものは、あくまでほんの一例に過ぎません。実際にはとても覚えきれない程、HTMLタグやデザインの変更方法は存在します。しかし、それらを全て覚えていたらアフィリエイトで稼ぐ時間が足りなくなりますし、覚える必要もありません。ここに説明したものを知っておくだけでも、十分できることの選択肢が広がり、普段書いている味気ない記事が一気に見やすくなるはずです。

アダルトアフィリエイトマニュアル
1,000万円以上稼いだ独自の実践的ノウハウを公開
主にブログでは言及していないコアな情報に関してマニュアルを作成しました。ブログでも様々な情報を無料で公開していますが、管理人のアフィリエイト手法についてさらに詳しく知りたい方は、是非参考にしていただけると幸いです。マニュアルには以下の内容が書かれています。
・ブログでは公開していないジャンル選びのポイント
・効果的なサイト作りの方針からレビュー文の書き方
・クリック率&成約率を共に高めるリンクの設置方法
・比較サイトを制作してみた実験結果
・一番稼いでいるメインサイトのアフィリエイト手法やジャンル
上記の内容はマニュアルの一部になります。詳細な内容に関しては、以下のリンク先をご覧ください。

 - アフィリエイトの稼ぎ方