今回は、SEOとHTMLタグについて初めての方でもわかる、
まずは2つのポイントとなる部分を初級編としてお届けしていきたいと思います。
「SEO」「HTML」そもそも何のこと？
この2つの言葉、よく耳にする単語だと思います。
SEOやHTMLがどういうものか、どんな役割を持っているのかご存知でしょうか。
SEOが大切なことは分かるけどなぜ大切なのかはイマイチわからない…。
HTMLって何を知っていればいいの？
今回はSEOとHTMLについてまずは覚えておいてほしい内容について解説していきます。
Contents
SEOって何のこと？
タイトルの通りですが「SEO」ってそもそも何？どんな目的があるの？
ここの説明をしていきますね。
「SEO」は「検索エンジン最適化」を意味しており
Search Engine Optimization（サーチ・エンジン・オプティマイゼーション）の略称です。
検索結果で、最適なコンテンツがより多く表示されるためにWEBページを最適化することを意味します。
最適化するために、コンテンツを作成したりページを見直したりという施策していきます。
では、SEOの目的は何かというと「WEBページを検索結果に上位表示させるため」と答えたいところですが、実はこの回答では正解にはなりません。
もちろん上位表示させるためにWEBページを最適化していきますが
SEOの最終的な「目的」は「自然検索からのアクセス。そして最終的なコンバージョン（お問い合わせや資料請求など）に繋げる」ためです。
その目的に繋げるために取り組む様々な施策のことを「SEO対策」と呼んでいるのです。
最終的な目標であるコンバージョンを増やすために、なぜSEOは大切と言われているのでしょう。
またSEO対策に取り組むメリットはどんなことがあるのでしょうか。
ここでちょっと思い浮かべていただきたいのですが
皆さんが何かインターネット検索をした時に、検索結果で表示されているどのWEBページから見ていきますか？
おそらく大半の人が、検索結果で上に表示されているWEBページから順に見ていくと思います。
そして検索結果の1ページ目を見て探している情報が無かった時は、検索キーワードを変えて再検索すると思います。
また、ユーザーは見たとしても検索結果の2ページ目くらいまでだと思います。
ということは、上位表示されているページの方がアクセス数が多いことは言うまでもないかもしれませんね。
ページへのアクセス数が多いということは、コンバージョンに繋がる可能性も高くなります。
もちろんアクセスからコンバージョンに繋げるためには、ページの内容を充実させることが必要になります。
とにかくまずはアクセス数を増やしたいということならば、コツコツ取り組むSEOではなく即効性がある広告を使用しても良いと思います。
広告という手段がありながらも、以前からSEOが重要と言われていることには理由がありますので
SEOのメリット、そしてデメリットも見ていきましょう。
SEOのメリット
- 中長期的に長い目で見て集客を見込んでいくことができる
- 広告ではないので、費用を抑える、または費用がかからない。
- 自然検索でユーザーが調べたい内容を検索しアクセスしてきているので、
比較的購買意欲の高いユーザーを集客できる - WEBサイト・ページが上位表示されることでブランディング効果が期待できる
- SEO対策として取り組んだ施策は、将来的にも財産として残る
SEOのデメリット
- 広告と違い、施策を実施してから効果が出るまでに時間がかかる
- 効果が出ることが確実ではない
- ページやコンテンツの作成など人的コストがかかる
SEOは広告とは違うので、効果が出るまでに時間がかかる点は一番のデメリットになるかもしれません。
しかし反対に、中長期的には集客が見込めることや費用がかからないことなどは大きなメリットとして挙げられます。
SEOが重要であることに変わりはないですが、広告が悪いものというわけではなく
広告もしっかりと運用方法を理解した上で利用し併せてSEOに取り組むことができたらとても良いと思います。
検索エンジンを理解する
SEO＝検索エンジン最適化と先程も説明しましたが、WEBページを最適化させて上位表示するために
どのように検索順位が決められているかを簡単にご説明します。
まず検索エンジンとは、GoogleやYahoo!、Bingなどが代表的なものとして挙げられます。
調べたいキーワードを検索窓に入力して情報を探すと思いますがそこで情報を探してくるシステムのことを検索エンジンといいます。
ここで注意したいポイントが一つあります。
SEO対策で気にすることはGoogleに対する施策を行うことです。
これはなぜかというと、実はYahoo!はGoogleの検索エンジンを使用しているからです。
そして日本では、Googleを使用する人が半分以上、
その次にYahoo!を使用する人が多いため大半の人はGoogleを使用していると言っても良いからです。
そのためGoogleに対する施策が必要になります。
では、Googleはどんな要因を基に検索順位を決めているのでしょうか。
それは、このコラムサイトの他記事でもよく出てくる
「ユーザーにとって役に立つ有益な情報を提供する中身のある良質なコンテンツ」であることがポイントになります。
こうしてGoogleが定めたルールに基づいて検索順位は決まっているのです。
HTMLについて
さて、ここからは今回のもう一つのテーマ「HTML」について説明していきます。
ここまでSEOについてご説明してきましたが、SEOとHTMLは一見あまり関係が無いように感じている方もいらっしゃるかと思います。
SEO対策で大事なことは良質なコンテンツを作ることで、
HTMLはWEBページを作るために必要な難しい暗号のような文字が並んでいるもの。というイメージがあるかもしれません。
しかしSEOとHTMLはしっかりと関係性があります。
検索エンジンはHTMLのデータを通してページのコンテンツを理解しようするため
正しいHTMLを作成することはSEOにおいて大前提になります。
HTMLと一言でいっても実は奥が深く、暗号のような文字を全て網羅するには時間がかかってしまいます。
そこでここではHTMLの中でもまずは押さえておいていただきたいポイントをご紹介していきます。
HTMLとは？
HTMLはWEBページを作成する際に使用する特別な言語のことです。
ということは普段私たちが見ているほとんどのWEBページは、HTMLで作成されていることになります。
そしてHTMLをタグと呼ばれるマークを使用して、ページや文書の構造を指定しています。
画像を表示する時や、文字の色や大きさを指定する、タイトルを表示するなど全てHTMLタグを使用して表示されているのです。
例えばこのコラムサイトリブコの裏側を見てみるとこんな感じに暗号のように文字が並んでいます。
そして画像のHTMLを見てみると<>この記号で囲まれている文字がありますよね。
<>で囲まれている文字がタグです。
画像にもある様々なタグそれぞれに全て意味があり、
このHTMLタグによってページの構成を指定しています。
そしてHTMLを正しく理解することはSEOにおいても重要になります。
では次に、まずここは覚えておいていただきたいHTMLタグご紹介します。
aタグを理解しよう
aタグは、リンクを指定するためのタグのことです。
本コラムサイトの記事でも使用していますが
文字をクリックしてリンク先のページにいくことができるように設定されているページは色々なWEBページで見たことがあるのではないでしょうか。
下の画像でいうとオレンジ色の文字の「（共感とオウンドメディア）」この部分にリンク先が設定されています。
このaタグで設定されているリンク先ですが、裏側から見るとこのようになっています。
＜a href=”https://reblo.jp/・・・/007/” target=”_blank”＞（共感とオウンドメディア）＜/a＞
タグにはここからここまでに指示を出す、といった開始タグと終了タグがあります。
今回の例でいうとリンク先を設定してページ上にテキストを表示したい時は以下のようにして記載します。
＜a href=”AAA” target=”_blank”＞ABCDEFG＜/a＞
「AAA」の部分がリンク先にしたいページのURLを入力します。
後ろの「ABCDEFG」の部分にWEBページ上でリンク先を表示するテキストを入力します。
このテキストをアンカーテキストといいます。
先程の例でいうと（共感とオウンドメディア）が「ABCDEFG」の部分にあたります。
SEOの観点からみるaタグのポイント
さて、ここでaタグを使用する時に
ここも理解してほしい！知っておいてほしい！SEOの点で大切になるポイントをお伝えします。
それはアンカーテキストについてです。
このアンカーテキストがなぜポイントかというと
検索エンジンはここに含まれる文字情報を参考にして、
ページの情報を読み取っています。
そのためアンカーテキストはリンク先に設定するページの内容を表す文言にすることが大切です。
このように設定されているアンカーテキストを見たことはありませんか？
リンク先は「東京都の不動産売買物件情報」のページです。
WEBページ上の文章で
「東京都の売買物件情報のことならこちらへ」と記載して
文章中の「こちらへ」をアンカーテキストとして設定してしまっている例です。
「こちらへ」だけでは検索エンジンはページの内容がわからないので、
この場合、例えば「東京都の不動産売買物件情報は○○株式会社へ」とするなどキーワード入れましょう。
imgタグとalt属性を理解しよう
今回押さえていただきたいポイントの2つ目です。
まずimgタグとは何かというと、WEBページ内に画像を表示するためのタグになります。
通常画像を表示する時のタグはこのようになります。
＜img src=”https://reblo.jp/media/・・・.jpg” alt=”” width=”300″ height=”500″ class=”alignnone size-full wp-image-103″ /＞
これだけ見てもなんだかよくわからないですよね…。
imgタグは、src属性で表示したい画像ファイルを指定します。
画像ファイルを指定するとは、画像の形式（GIF、JPEG、PNG）を指定することをいいます。
上記の例の場合、src＝”https://reblo.jp/media/・・・.jpg“となっているので
これは画像の形式がJPEGで指定されているということになります。
ここでもう一つ、「属性って何？？」そんな疑問が出てくると思います。
属性とは、要素に何かしらの情報を付加することを指します。
情報を付け加えてタグを設定することを属性というので、
このimgタグの場合は、srcという画像形式を指定する属性を付けています。
属性はimgタグに限ったものではなく、先程ご紹介した
リンクを設定するためのaタグにも属性があります。
以下のaタグですと、「href」も属性の一つになります。
＜a href=”AAA” target=”_blank”＞ABCDEFG＜/a＞
「href」はリンク先のURLを指定している属性で、href=の後ろにくる「”AAA”」というリンク先のページを指定しています。
このようにHTMLは様々な属性を付けることができるのです。
属性について説明をしましたが、さらにここからがポイントです！
imgタグにおけるalt属性がポイント
先程と同様の画像を表示するための以下のようなタグがあります。
＜img src=”https://reblo.jp/media/・・・.jpg” alt=”” width=”100%” class=”alignnone size-full wp-image-103″ /＞
今回はこの中の「alt属性」に注目します。
imgタグの属性としてタグ内に「alt=””」この文字が並んでいます。
「alt属性」は何かというと、画像を表示できない（しない）ブラウザの場合、
alt属性に記載したテキストが画像の説明（代替テキスト）としてWEBページに表示されます。
画像を表示できないまたはしないブラウザとは、
画像が読み込めなかったり、音声読み上げのブラウザなどの場合です。
この場合に、画像は「何を指しているか」「どういう画像か」「何が映っているか」
検索エンジンに伝える必要があります。
そのため画像に「alt属性」を付けることがポイントになります。
では、ここまでの内容から「alt属性」にはどんなテキストを記載すると良いか…
これはなんとなく想像できる方もいらっしゃるのではないでしょうか。
alt属性は、画像がどういうものか「短く・わかりやすい」テキストで表示することが大切です。
また、alt属性を指定する際には注意点があります。
・キーワードを並べたり詰め込まない（NG例:東京 港区 不動産 賃貸 マンション 安い）
・コンテンツの中の文章そのものをコピーしない
・長すぎる文章にはしない
これらに気を付けて、指定してみてください。
ここでもう一つ、alt属性についてお伝えします。
実はalt属性を指定しなくても良い場合があります。
サイトのデザイン上の装飾等の要素やコンテンツとして意味を持たない画像の場合は
alt属性の「alt=””」イコールの後ろのダブルクォーテーションで囲まれている中を空白にしておいても問題ありません。
SEOとHTMLについてのまとめ
- SEOは検索エンジン最適化という意味を持ち
SEOに取り組むことで中長期的に集客を見込め、費用もあまりかからないが
デメリットとして効果が出るまでに時間がかかり人的コストも必要になる。 - HTMLは、WEBページ作成するための言語であるがSEOとも関係性がある。
aタグもalt属性を指定する場合も、内容をわかりやすく簡潔に表記することがポイント。
いかがでしたでしょうか。
SEOに取り組む上でHTMLを理解することも重要です。
しかし、本文中でもお伝えしましたがSEOもHTMLも幅広く覚えるには時間がかかります。
なのでポイントとなる部分をまずは押さえていきましょう。
SEOは時間をかけて取り組んでいくことが検索結果で上位表示されるために必要です。
地道ではありますがコツコツと取り組んでいきましょう。