コーダー目線のSEO対策

ホームページを作る上で、SEO対策という言葉を聞く機会があると思います。
そもそもSEOとはなんだろう？どんなことをしたらいいの？コーダーで出来ることはあるの？
今回はそんな疑問にコーダーの目線で回答致します！

SEOとは？

SEOとは、サーチ、エンジン、オプティマイゼーションの略で、日本語で言うと『検索エンジン最適化』です。

SEO対策の目的は、自分のホームページを上位に表示させ、検索流入を増やすことです。
作ったホームページの存在をなるべくたくさんの人に知ってもらうためにも、このSEOは、かなり重要なものになります。

SEO対策の3つポイント！

では実際に、どのようなことに気を付ければ良いのか。
それは意外とスルーされがちなHTMLタグにあります！
サイトを作るにあたって、HTMLタグはなくてはならない存在。
HTMLタグと一口で言っても結構な種類がありますが、今回は3つに分けて解説します。

1.metaタグ

SEO対策において、meta（メタ）情報とは主に下記を指します。

• meta title（メタタイトル）：その記事のタイトル情報を30文字程度で表したもの
• meta description（メタディスクリプション）：その記事の内容を120文字程度で表した概要文
• meta keyword（メタキーワード）：その記事で扱う5つ程度のキーワード

※Googleでは、2009年に「meta keywordsをもはや評価していない」ことを、公式ブログで公言しています。

これらはheadタグ内にこのように書かれています。

<title>特定のタイトル</title>
<meta name="description" content="記事の概要" />
<meta name="keywords" content="キーワード①,キーワード②" />


なんとなく見かけたことがあると思います。
特に、タイトル、ディスクリプションタグはSEO効果に直接的な影響を与えるので、適切に設定しましょう。

2.HTMLタグ

htmlタグは、ページそのものの構造を定義するために使われる言語です。
コンピュータ側にページの内容や重要な部分を正しく認識してもらうために書くものです。

目に見えるものではないので、すべて<div>や<p>、<table>で組んでしまっても見た目上は問題ありません。
ですが、コンピューター側は見た目ではなくHTMLタグでページを判断するため、そのページが何のページかが判別できないと検索順位も上がりにくくなってしまいます。
HTML5リファレンスなどを確認し、適切なHTMLを使用するようにしましょう。

例えば…
ヘッダー部分は<header>、サイドメニューは<nav>、ブロックは<section>や<article>と分ける。
文章はすべて<p>にするのではなく、<h1>～<h6>の見出しタグや<ul>のリストを使用するなどです。

HTMLタグは、新しくアップデートされて意味が若干変わったり、タグ自体の追加や廃止があります。
廃止になった古いタグをいつまでも使いつづけるということがあると、当然SEOに効果があるとは言いにくくなります。

ですから、その時代に合った新しい情報を常に取り入れていくことが必要になってきます！

3.IMGタグ（alt属性）

alt属性は画像の内容についての説明に使われる代替テキストです。
表には見えませんが、接続不良やリンク切れなどで画像が読み込まれなかった際などにも、テキストとして表示されます。

検索エンジンでは文章やキーワードなど「文字」を読み取りますが、画像は文字ではないため「これはどんな画像か」をalt属性を使って認識して貰う必要があります。
また、目の不自由な人はスクリーンリーダーというテキストの読み上げ機能を利用することもあるので、alt属性を設定することで画像の説明も可能になります。

altタグは「alt=”画像”」などの抽象的なテキストではなく「alt=”AとBを比較した表”」などのように、可能な限りわかりやすく書くようにしましょう。

番外編　上級者向けSEO対策！構造化データ

構造化データとは、Webページの構造を検索エンジンにより適切に伝えるために記述するコードのことです。
直接的なSEOへの効果はありませんが、構造化データを利用すると、リッチスニペット（Google検索結果に表示される付加的な情報）の表示やクローラビリティ（Webページの見つけやすさ/認識のしやすさ）が向上するため、それに伴うクリック率の向上など、間接的なSEO効果を見込むことが可能です。

構造化データを作成する際には、「ボキャブラリー」（説明内容の単語）と「シンタックス」（ボキャブラリーの伝え方）の組み合わせが必要です。
ボキャブラリーは「schema.org」や「deta vocabulary」などが一般的です。
シンタックスは主に「Microdata」「RDFa」「JSON-LD」などがあり、Googleが利用を推奨しているのはJSON-LDです。

JSON-LDの特徴は、ソース内であればどこにも記述してもよい所です。
構造化したいソース箇所とJSON-LDによる記述箇所は離れていてもよいので、記述しやすくメンテナンス性に優れています。

コーダーあるある

「ここ、どうしてエラーなんだろう？同じ事例を探してみよう…。」

～半日経過～

「つづりが間違ってただけだった！」

…長時間悩んでたことが、翌日10分くらいで解消される。