アクセストレードのWebデザイナーが解説するアフィリエイトサイトに役立つ講座第二弾！
ブログやサイトを運営する際には、差はあれども触れることのあるHTML。 独学でなんとなく触っているけれど「使いかたは合っているのかな？」と不安になることはありませんか？
実は、HTMLをきちんと理解して使用するだけでSEOにプラスの効果を得られたり、サイトの見栄えもよくなるんですよ。今回はアフィリエイトサイトを運用する上で覚えておくと役立つHTMLの知識を解説します。
「無料ブログでアフィリエイトを始めたばかりだから、タグ？とかよくわからない」かたも「ちゃんとHTMLについて勉強したいと思っていたからナイスタイミング♪」というかたも、こちらの記事を読んでもらえれば明日から自信をもってHTMLソースを触れるようになること間違いありません！
WordPressを使っているからHTMLのお勉強は優先順位低めだし関係なさそう…と思ったそこの皆さん。 今回のHTML基礎はWordPressを利用しているかたも活用可能な情報です！ ぜひ軽い気持ちで読んでみてくださいね。
HTMLとは
ズバリひと言で表すと、Webページを作るための言語のことです。 今、皆さんが見ているこのページもHTMLで作られています。
HTMLは、HyperText Markup Language（ハイパーテキスト マークアップ ランゲージ）を略した言葉。Webページのテキストや画像などをどのように表示させるかをコンピューターに伝える役割を担っています。
コンピューターに伝える役割って、どういうこと？
Webページにはテキスト（見出し・本文）・リンク・画像etc…様々な要素があります。 それぞれの要素に対して「これは見出しです」「これはリンクです」といった指示を記載していくイメージです。
例えば、このような文章をWebページに載せるとします。
アフィリエイトの仕組み
アフィリエイトとは、インターネットで表示する広告から成果報酬型の収入を得る仕組みのことです。
アフィリエイターは、アフィリエイト広告を自分のサイトやブログに貼り、商品やサービスを紹介します。その対価としてサイトを訪れた人が広告経由で商品やサービスを購入した場合に、広告収入（報酬）を得ることができます。
アクセストレードに登録してアフィリエイトを始めよう！
https://www.accesstrade.ne.jp/pregist/mail
このままだとコンピューターはこの文章のどこが重要で、どこがリンクなのか判別できません。なので、意味や構造が伝わるよう、HTMLタグを用いて以下のようにマークアップ（意味付け）をしてあげます。
- ※HTMLタグとは？
文章の構造や意味を伝えるための目印。例文でいうと「<」と「>」で囲まれた英文字部分がHTMLタグです。
<h1>アフィリエイトの仕組み</h1> <p>アフィリエイトとは、インターネットで表示する広告から成果報酬型の収入を得る仕組みのことです。</p> <p>アフィリエイターは、アフィリエイト広告を自分のサイトやブログに貼り、商品やサービスを紹介します。その対価としてサイトを訪れた人が広告経由で商品やサービスを購入した場合に、広告収入（報酬）を得ることができます。</p> <p>アクセストレードに登録してアフィリエイトを始めよう！ <a href="https://www.accesstrade.ne.jp/pregist/mail">https://www.accesstrade.ne.jp/pregist/mail</a></p>
マークアップしたWebページをブラウザで見てみると、下記のように表示にメリハリがつきます。
- ※CSSを設定していない場合のデフォルト表示となります。
どうですか？タイトルと説明文との差が明確になり、リンクしている箇所もわかりやすくなりましたよね。 このように、HTMLには見出しやリンクなどそれぞれの要素が何を表しているのかを伝える役割があります。
アフィリエイトサイトで適切なHTMLマークアップをするメリット
HTMLで文書をマークアップすると、ブラウザで見やすくなることをお伝えしました。
でも実は、アフィリエイトサイトで適切なHTMLマークアップをすると見た目が整うだけではなく、アフィリエイターにとってもっと大きなメリットがあるんです！
早速大きなメリットを２つご紹介しますね。
１．検索エンジンに理解してもらいやすいページになる
見出しや本文など、各要素を適切にHTMLでマークアップすることで、Googleの検索エンジンもWebページの内容を理解しやすくなります。そして、理解しやすいページのほうが上位表示を狙うことができます。
ちなみに、HTMLはちょっとしたミスでエラーが出ることもありますが、エラーがあるからと言ってGoogleはペナルティを与えるといったことはありません。
ただ、タグの閉じ忘れなどでWebページの表示が崩れると、ユーザビリティ（サイトの使いやすさ）は悪くなり、後々のメンテナンスも大変になるため、エラーはなるべく起こさないようにしましょう。
ただ、大きく崩れたりしていないようならば、血眼になってエラーを潰さなくてもSEO的には問題がないということです。
SEO対策のためだけにHTMLを正しく書くのではなく、検索エンジンに理解してもらいやすくなるように、ページの情報にあった正しいHTMLを書くことが大切です。後述する「見出しの構造」でも詳しくお話していきます。
２．アクセシビリティが良くなる
アクセシビリティとは、wikipediaによると「高齢者や障害者、また異なる情報端末やソフトウェアにおいても、情報を取得あるいは発信できる柔軟性に富んでいること（あるいはその度合い）を意味する」とのこと。
適切なマークアップにより、音声読み上げソフトでの利便性も向上します。
つまりアクセシビリティの良いサイトになると、目の不自由なかたなどより多くの人にあなたの作ったWebページを楽しんでもらえるということですね。
よく使うタグの紹介
記事コンテンツを作成する際に、よく使われるHTMLタグをいくつか紹介します。
HTMLタグには、<h1>〜</h1>のように開始タグ（<h1>）と閉じタグ（</h1>）を一組として扱うタグと、閉じタグが不要なタグ（imgタグなど）があります。
閉じタグが必要なタグで閉じタグを忘れるとレイアウト崩れやエラーの原因にもなるので注意しましょう。
見出しタグ
文章の見出しを意味するタグ。hタグとも呼ばれるもので、hはheading(見出し)を指しています。
hタグには、h1〜h6までの見出しタグがあります。
h1タグはそのページの主題を表す見出しとして、1ページ内にはひとつだけにしましょう。
▼見出しタグ一覧
| <h1>見出し1</h1> | そのページの主題（タイトル）を表す一番大きな見出し 1ページに1つとし、複数個の使用は避ける |
|---|---|
| <h2>見出し2</h2> | 2番目のレベルの見出し |
| <h3>見出し3</h3> | 3番目のレベルの見出し |
| <h4>見出し4</h4> | 4番目のレベルの見出し |
| <h5>見出し5</h5> | 5番目のレベルの見出し |
| <h6>見出し6</h6> | 6番目のレベルの見出し |
｜見出しタグ使用上の注意
h2以下の見出しはページ内で何度使用してもOKですが、見出しの構造を意識して使用することが大切です。 構造を意識した見出しの付けかたの例を紹介します。
★hタグのポイント
- h1はページにひとつ
- 構造に合ったレベルの見出しを使用
わかりやすくすると、下記のようなイメージです。
ページの主題（h1）の「セルフアフィリエイトのABM」の直下に、レベル2（h2）の見出しが3つあり、「どんな風に活用すればいい？」の中にはさらにレベル3（h3）の見出しが含まれる構造です。
レベル2（h2）の3つはそれぞれ同列の内容であること、そして「どんな風に活用すればいい？」の中の3つ（h3）は、同列であることがわかります。構造を意識した見出しを付けるためにも、記事を書く前に文章の流れ、重要度を考えておきましょう。
やってはいけないNGパターン（構造を意識していない例）も紹介します。
×NG例1
- h1を複数使っている
- 文章の構造に関係なく、上から順に見出し2,3,4…としている
×NG例2
- 文章の構造を無視した見出しレベルを使っている
- ※この場合は、構造的にh4を使用している箇所にh2を使用すると良い
2つのNG例を挙げてみました。
共通するNGポイントは、内容の正しい重みづけがされていないということです。正しい順番でマークアップし、コンピューターにきちんと判別してもらえる構造にしておくことが重要です。
画像タグ
画像を挿入したい時に使用するタグ。imgタグともいいます。
imgタグは見出しタグ（hタグ）のような閉じタグ（</img>）は必要ありません。
<img src=”画像のパス(URL)” alt=”画像の説明” width=”画像の幅” height=”画像の高さ” loading="lazy">
altには画像の説明文を入れることで、アクセシビリティが良くなります。
altは「代替えテキスト」とも言われ、画像を表示できないときに代わりに表示されるテキストです。スクリーンリーダーを利用したときにも画像の意味が伝わるようになります。
また、適切な画像の説明文を入れることでGoogleの検索エンジンもWebページの内容をより理解しやすくなり、Google画像検索での表示を狙えます。ぜひ画像に合った説明文を入れましょう。
widthとheightには「width=”120” height=”60”」のように画像のサイズを入れましょう。 大きさを入れることで画像の比率をコンピューターが理解できるようになり、レイアウトシフト対策(※)になります。
- ※レイアウトシフトとは？
Webページを読み込む際に画像などの比較的ファイルサイズの重いものが後から読み込まれることで、ページのレイアウトが崩れることを指します。このズレはWebページの質を下げるものとされていて、Googleが掲げるCore Web Vitalsの指標のひとつとなっています。
loading="lazy"は画面の外にある画像は読み込まず、画面内に入りそうになったら画像を読み込むようにする設定です。記述しておくと、Webページの読み込みが早くなるので入れておくと良いでしょう。
pタグ
段落を指定するタグ。「Paragraph」の「p」から来ています。
<p>〜</p>で囲まれた文章がひとつの段落であることを示します。
<p>〜</p>
<p>〜</p>の直後は改行されます。ただし、改行のために空のpタグを入れることはNGです。改行には後述する<br>タグを使用しましょう。
改行タグ
改行のタグ。brタグとも呼ばれています。brは「Break」の略です。
brタグは見出しタグ（hタグ）のような閉じタグ（</br>）は必要ありません。
<br>
リンクタグ
リンクを設定するタグ。閉じタグ（</a>）は絶対に必要です。
ノーマルなaタグは表示しているページと同じウィンドウ（タブ）で開きます。
<a href=”リンク先”>リンクテキスト</a>
別ウィンドウでリンクを開きたい時はtarget=”_blank”を付けます。
<a href=”リンク先” target=”_blank”>リンクテキスト</a>
リストタグ
箇条書きをしたい時に便利なリストタグ。
ユーザーにとっても箇条書きは読みやすくなりますし、内容によっては強調スニペットというGoogle検索の一番上に表示される機能の対象となることもあります。
箇条書きをしたい場合は、ぜひリストタグの使用を検討しましょう。
| <ul> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ul> |
番号無しの箇条書きリスト
|
|---|---|
| <ol> <li>項目1</li> <li>項目2</li> <li>項目3</li> </ol> |
番号付きの箇条書きリスト
|
おわりに
いかがでしたか？
普段Wordpressで記事を書いているかたは、エディタが自動でHTMLタグを入力してくれるため、あまりHTMLの構造を意識したことがなかったかたもいるかもしれません。しかし利用するタグによって検索エンジンが理解する内容や重みに差が出ます。
<p>タグの紹介で説明した見出しタグ（hタグ）のように、順番によって重み付けに違いが出ることもあります。
<p>タグでも<ol>タグでも見た目は同じように表現できますが、中身に順位付けがあるのか同列の内容なのか、検索エンジンの判別方法は変わってきます。
せっかくWebサイトを作って発信するのですから、意図した情報のまま伝わってほしいですよね。
マークアップに即したタグを使用することによって、コンピューターはWebサイトの構造や意味をきちんと解釈できるようになり、結果的にSEOの効果も見込めるとされています。
普段Wordpressのエディタを使っているけどあまり意識してタグを使ってなかったなというかたは、ぜひ記事を書く際に思い出してみてください。
HTMLの基礎を正しく理解し、ユーザーにとってより一層見やすいアフィリエイトサイトを目指しましょう！
ご注意ください
- 本記事の内容は、2022/09/15更新時点の情報です。更新日より期間が経過している場合など、状況により現在の情報とは異なる可能性があります。
- 一部、体験談などの執筆者の個人的な意見、株式会社インタースペース(アクセストレード)以外が提供するサービスの紹介が含まれる場合もあります。情報の内容には十分に注意しておりますが、万が一、損害やトラブルが生じた場合も責任を負いかねますので、内容をご確認の上ご自身の判断のもとでご利用ください。
- 掲載の記事・写真・イラストなど、すべてのコンテンツの無断複写・転載等を禁じます。
関連記事
カテゴリーから探す
タグから探す
- アフィリエイトをはじめよう！
- 無料新規パートナー登録
- 広告出稿を希望のかたはこちら
- 無料資料請求はこちら