HTMLタグとSEOについて学ぶ

HTMLタグとSEOについて学ぶ
html

HTML?SEO?って方はぜひ読んでください。メディア運営をしていく過程で必ず必要となってくる知識です。

損をしないリンクの使い方

まずはHTML(ハイパーテキスト・マークアップ・ランゲージ)から説明していきます。

ハイパーテキストというのは、ハイパーリンクを埋め込むことの出来る高機能なテキストのことを指します。

ハイパーリンクとは、クリックすると別ウェブページに飛ぶことの出来るリンクのことです。

普通にリンクを貼るときのコードは

<a href=”URL”>アンカーテキスト</a>

というようにします。

『アンカーテキスト』と書かれた部分だけ表示され、クリックするとそのURLのページに飛ばすことができます。

このアンカーテキストはSEO上非常に重要な役割を果たします。

※SEOというのはsearch engine optimizationの頭文字をとったもので、日本語訳は『検索エンジン最適化』という意味です

どーゆーことかというと、例えばあなたが「北海道」に旅行に行きたいとします。そこで、PCやスマホのインターネットを使って

「北海道 旅行」とか「北海道 ホテル」

というように情報を探すとします。その時に一番最初のページに出てくるようなサイトや情報は、一般的に「SEOが強い」とか「SEOが良い」と言われます。

SEOについては別記事でも詳しく説明しているので、色々見てみてください。話し出すとキリがないので…w

ただメディア運営をする上で、SEOは切っても切れない関係だということは覚えておいてください。

話を戻します。

先ほどの”アンカーテキスト”の部分を見て、Googleの検索ロボットはこのURLをクリックすると、何の情報が得られるのかを判断します。

例:

「北海道」なら北海道について

「北海道 ホテル」なら北海道のホテルについて

リンク先に適した適切な『ワード』を 使うことを意識しておいてください。

そして、ここが注意点なんですが、 先ほどの

<a href=”URL”>アンカーテキスト</a>

のように記述したままだと、同一タブのまま他のページに飛んでしまいます。

場合によってはあえてそうするケースもあるのですが、もしもユーザーがあなたの記事の閲覧中に、途中のリンクによって別サイトの記事に行ってしまった場合、わざわざ元の記事に戻ってくることは「ほぼない」ということです。

人が心理的に何かを探している時は、後戻りするよりどんどん歩みを進めていく傾向があります。

だから戻るボタンをわざわざ押して戻ることは「ほぼない」のです。

しかし、リンクを工夫して『別タブ』でページが開くように設定しておけば、リンク先のページを読み終えたあとに戻ってきてくれる可能性があります。別タブなので、「後戻り」という感覚はないのでしょう。このような細かいことにも気を配り、対策をかけていきます。

別タブでリンクが開くように、リンクを貼る方法は、

<a href=”URL”target=”_blank”>アンカーテキスト</a>

というふうにhtmlで書きます。すると、別タブでリンクが開くようになります。これをうまく利用して、自身の記事の滞在時間を伸ばします。基本的に同一ドメイン以外は、全て別タブで開くようにしておいたほうが良いです。そうでないと外部リンクにいったっきり「さよなら~」になりかねないです。

「それなら、外部サイトのリンクを使わなければいいんじゃない?」

と思ったあなたは理解力がありますね。ただ、時と場合によっては外部サイトを使ったほうが便利なケースも多々あります。

また、悪質なサイトを敢えてユーザーに見せるといった場合にも、本当は貼りたくないリンクを貼ることになります。悪質なサイトは当然Googleからの評価が悪いです。評価が悪いサイトURLを貼っていると、どんなに貼った人が良質なサイトを作っていようが、そのサイトまで悪影響を受けてしまいます。

それを回避する唯一の方法は、「rel=”nofollow」を使います。 rel=”nofollowをhtmlで、

<a href=”URL”rel=”nofollow”>アンカーテキスト</a>

と書きます。すると、『私はこのリンク先を評価していません』という意味になり、Googleもそのように解釈します。

なのでたとえrel=”nofollowの後のURLが悪質なサイトであろうが、関係なくなります。

また、悪質なサイトでないとしても発リンクが多すぎると、その記事のSEOが悪くなる問題点もあるので、このような対策は大事になってきます。

ただし、実際に参考にしているサイトや相互リンクを送り合いましょうと約束したのにnofollowをつけてしまうのは、人としてどうなのかなという感じです。

どうなのかというよりダメですね。まあ考え方は人それぞれですが……。

さて、毎回nofollowと入力するのが面倒だと思う方は、ワードプレスのプラグインで『WP Nofollow Post』を活用してください。インストール→有効化で、全ての外部リンクがnofollow属性になります。

ただ、中には自分のサイト内のURLや相互リンク相手のサイトだったり、評価してあげたいサイトもありますよね。そんな時はそのURLだけ抜き出して、nofollow属性を解除することも出来ます。

管理画面→設定→WP Nofollow Postから

Exclude nofollow on these domains

という枠内に、nofollowにしたくないドメインを入力すればOKです。

ドメインのみなので、http://やhttps://は省きます。コンマで区切れば、複数ドメインも入力可能です。

画像の使用と著作権に関して

今現在、画像が一切ないサイトはほぼありません。適切な画像のあるなしで、クリック率やサイト滞在時間が変わってきます。ですが、オリジナル以外の画像を使う時は、十分に注意して行う必要があります。

よく見かけるのは、トレンドサイトなどで、芸能人の画像をそのまま使用しているものなどです。本当は許可なく使っている時点で、著作権違反です。ただ、インターネットやSNSが普及した今、全て取り締まることは富士山にある小石を全て拾うような途方もない作業なので、黙認されているのが現状です。

しかし、利用方法によっては訴えられる可能性もあります。ということで、ここからは、人様の画像や動画の扱い方についてお伝えします。

画像や動画の取り扱いについて

基本的にはオリジナル画像以外は、許可なく他人の画像を使用することはNGだと覚えておいてください。しかし、様々なサイトアフィリエイターの知恵袋には次のように記述されています。

販売促進のために画像を使用するのは暗黙の了解

モデルの画像を利用するのは危険を伴う

画像に対して批判や侮辱の記述があるのはNG

一般人の画像を利用してはダメ

などです。簡単にいうと、画像を使わせてもらう代わりにその画像、もしくは画像に関連している人や物に対してメリットがあれば

「ホントはダメだけどまあいーよ。」

批判されて、営業妨害になるようでは

「もともとダメだから訴えます」

となってしまうんですね。

また、個人所有の画像も出来れば使わないほうが良いです。わざわざ他人の画像を使って批判するようなことは絶対しないほうが良いです。

万が一画像や動画に苦情がきた場合は?

早急にお詫びのコメントを伝えてください。

  • 自分が100%悪かったこと
  • すぐに画像を削除したということ

上記2点は必ず伝えてください。言い訳は絶対にしないでください。完全にサイト運営者が悪いですから。

SEOに強くなる画像の使い方

alt属性(altタグ、altテキスト、代替えテキスト)を使います。

alt属性とは?

alt属性とは「アンカーテキスト」と同じ役割を持っています。

<img src=”画像のURL=” alt=”○○”/>

alt=”以降にどのような画像なのか分かる「フレーズ(○○)」を入れます。検索エンジンはそこに画像があることは分かっても(img src という記述があるため)それが何の画像であるのかという認識がまだ出来ないのです。なので、テキスト(文章)で認識させるようにします。

使い方としては、

夢スケッチ

<img src=”画像のURL” alt=”ヤシの木”/>

とhtmlで記述します。そうすると、この絵は「ヤシの木」だと検索エンジンは認識してくれます。

<img src=”画像のURL” alt=”海”/>

のように記述すると、この絵は「」だと検索エンジンが認識してくれます。

検索エンジンが、記事の内容をテキストだけでなく画像のalt属性からも読み取ることでSEOが良くなるだけでなく、検索した時に、そのキーワードに関連する画像枠でもヒットするようになります。

仮にalt属性の説明をしていない場合に、検索エンジンは画像の周りにある文字や文章などでその画像がどんなものなのか推測します。もちろん見当はずれの場合も多々あります。

それが実際に画像検索したときに出てくる不可解な画像の正体です。

今後どうなっていくかは分からないですが、現状検索ロボットはまだまだテキストに頼った認識能力しかないということですね。

※alt属性の設定注意点

【” alt=】のaltの前に半角スペースが入っていること

(半角スペースだけでも、ビジュアルで見た時にきちんと表示されなくなります)

更なるアクセスアップ

アクセスを伸ばすために画像を利用する上で覚えておいて欲しいのは

同一の画像が2つ以上存在する場合、より強いサイトのみに画像検索結果一覧からのリンクが貼られる

ということです。

どういうことかというと強いドメインのサイトから引っ張ってきた画像をそのまま使っていても、アクセスアップにはつながりません。(それどころかペナルティを受けるケースもあります)

そこで、画像加工ソフトなどで画像を編集して、オリジナルの画像を作ります。例えば、画像を反転させて枠を付けてあげたり、色を変えたり、タイトルをつけたりしてあげると、画像としては違う画像として認識されるようになります。

※画像の一致、類似画像の見分け方については、Fast Image Reserchなどのツールを利用します。

SEOに強い記事作成

「H1タグ」を使う

現在の多くのワードプレステーマだと、記事タイトルがh1タグに設定されているので、しっかりとキーワードを入れ込んだh1タグを考えていきましょう。

その際のポイントは以下です。

①重要度合いが高いキーワードほど左側に記載

例:狙いがラーメンならば、

博多のとんこつ味のラーメンがうまい」よりも

ラーメンは博多のとんこつ味がうまい」という方が良いです。

②h1タグ内に狙うキーワードは1度だけ

例:キーワードの連打はNGです。

10万円稼ぐ方法 10万円稼ぐ唯一の道」 のようにするのは不自然でダメです。

③名詞の羅列はダメ

例:猫の可愛い動画ならば、

「猫 可愛い 動画」ではなく、

猫の可愛い動画10連発

というふうに動詞や助動詞などを含めて、意味の分かる文章で表現します。

④titleタグやH2タグとは違うものにする

例:記事上で右クリックをして「ページのソースを表示」で

各タグを見ることができます。

titleタグ「<title>○○○</title> H1タグ「<h1>○○○</h1> と表記されています。

「H2~H6タグ」を適切に使う

Hタグは数字が小さいほど重要度合いが高いということになります。H2は大見出し、H3は中見出し、H4~H6は小見出しという意識で使いましょう。

H2にはH1同様、上位表示したいキーワードを的確に入れます。H3以降は関連キーワードを出来るだけ自然に盛り込んで、ユーザー目線で使っていきましょう。

Hタグは数字の低い順に利用していきます。順番通りに使わないとSEOに不利となります。

上から記事を見ていって、

H1→H2→H4のように H3を飛ばしてH4を使うというような、数字の順序を無視するのはダメです。

見出しタグ内に強調タグを使うこともNGです。強調タグとは<strong(太文字)>など

「リストタグ」を使って記事を見やすくしていく

リストタグには2種類あります。

ulタグ(順不同)とolタグ(順番)があります。

検索エンジンは要点が整理されている記事を好むので、箇条書きで綺麗にまとまっているとSEOに効果的なんです。

※注意すること

ただ数字を使って「1.2.3.4……」というふうに整理されていても、検索エンジンは箇条書きと認識してくれません。

↓ダメな箇条書き(ただの数字を使って見た目の箇条書き)

1. Googleとは
2. Googleの利用
3. Googleの応用

↓良い箇条書き(リストタグを使った箇条書き)

例(htmlで見た場合)

<ol>
<li>Googleとは</li>
<li>Googleの利用</li>
<li>Googleの応用</li>
</ol>

この点を意識して、ユーザーにも検索ロボットにも見やすいサイトを作成していきましょう。

引用タグを活用する

他のサイトなどから記事コピー&ペーストをする場合は、必ず引用タグを使いましょう。引用タグがないと、Googleからの評価が下がります。

HTMLでの引用タグは<blockquote>〇〇○</blockquote> と表示されます。

他のサイトからの引用

まとめ

今回お伝えしたことを知っているのと知らないとではSEOに大きな差が出ます。知っていても面倒くさくてやらない人もいます。人が面倒くさいなと思うことほどやってくださいね。いつか競合が追いつけない差に繋がっていきます。

SEOカテゴリの最新記事