basic SEO

2019年12月30日 09:14

frontend engineer roadmap第3弾です。

今回はbasic SEOの部分をやっていきたいと思います。SEOは検索エンジン最適化（Search Engine Optimization）はGoogleやfirefoxで検索した際に、インデックスの上位に載せたりするための過程のことを言います。

titleタグ

一番初めにSEOで一番重要なことを紹介します。titleタグはheadタグの中に記述するブラウザのタブのタイトルを設定するタグです。このタグによっては、検索したときのランキングを増やしたいときによく関わるものだと思います。

titleタグは自分のサイトページの中身の説明をする役割をします。

titleタグで設定したものは以下の画像の赤枠の部分です。
スクリーンショット 2019-12-24 1.19.03

titleには短い文章で端的にそのページの内容を書く必要があります。更にいうと、不要なキーワードを入れないことが重要です。あまりにも長い（70文字以上）タイトルになってしまう検索エンジンがそのページの優先度を下げてしまいます。ユーザーにどのように検索してもらえば、自分のサイトを見てもらえるかというのも重要です。

metaタグでdescriptionを使う

これを使うことで広範囲で検索をするときに役立ちます。これは検索上では以下の画像の赤枠の部分です。

metaタグはheadタグの中で記述するもので、上の画像では

<meta name="description" content="note（ノート）は、文章、写真、イラスト、音楽、映像などを手軽に投稿できるクリエイターと読者をつなぐサービスです。ブログのように使うことも、SNSのように使うことも、コンテンツを販売することも自在に活用いただけます。">

のように書かれています（一部省略）。

※ただし、Googleはこのmetaタグの中身をあまり気にしないように2019年にアナウンスしています。

ヘッダータグ

ヘッダータグはサイトの見出しに使われる見出し用のタグです。主なものでいうと、h1、h2、h3、h4、h5が当てはまります。そのページ内の大きな文章のタイトルの役割として使用されますが、SEOでは検索エンジンがコンテンツの分割を決定する手助けをしたり、検索欄で特徴づけられた高級スニペットを作る手助けをしてくれます。

ヘッダータグのそれぞれの役割を説明していきたいます。h1はwebページのタイトルで使われます。h2はコンテンツのトピックを選別します。h3はトピックに関する要点を反映します。h4はh3から要点をサポートします。h5はあまり使いませんが、h4の要点をよくサポートします。

imgタグでalt属性を使う

imgタグのalt属性とは、その画像の説明をするために使用する属性です。

その画像が猫であると検索エンジンに伝えたいとき、

<img src="cat.png">

だと、それが猫の画像であれば、それが猫であることは人間にはわかりますが、検索エンジンからすると、これが猫なのか犬なのかはわかりません。検索エンジンにこれが猫の画像であることを知らせるには、

<img src="cat.png" alt="very cute cat">

のようにalt属性をつけて、これが猫であることを知らせればよいのです。

ページがcanonical（正規）であることを知らせる

これは、サイトがオリジナルのソースであることを示すために使われます。使い方はheadタグの中に次のようにタグを追加するだけです：

<link rel="canonical" href="https://note.com">

もし同じサイトで複数のページを持っている場合、それが同じページであることを検索エンジンに知らせることもできます。

OGP（Open Graph Protocol）を使う

OGPはOpen Graph Protocolの頭文字を取ったもので、これはtwiterやfacebook、webページにURLを貼った際のオブジェクトの表示を設定できます。これを設定することで、URLのみを見るのではなく、それが一体どのようなURLなのか一目でわかるようにユーザーに知らせることができます。

OGPはheadタグ内のmetaタグに次のように設定します。

<meta property="og:site_name" content="note（ノート）">
<meta property="og:url" content="https://note.com">
<meta property="og:title" content="note ――つくる、つながる、とどける。">
<meta property="og:description" content="note（ノート）は、文章、写真、イラスト、音楽、映像などを手軽に投稿できるクリエイターと読者をつなぐサービスです。ブログのように使うことも、SNSのように使うことも、コンテンツを販売することも自在に活用いただけます。">
<meta property="og:image" content="https://d2l930y2yx77uc.cloudfront.net/assets/default/default_profile_ogp-01444af7688b35c221fc94abeba7a850b620058f565afc1dca291d7b3fe191f8.png">
<meta property="og:type" content="article">

これはnoteで設定されているであろうopen graphの設定です。これがどのようになるかというと、

のように表示されます。このオブジェクトの要素は、

のようになっています。各要素を説明していくと、

og:title：オブジェクトのタイトル。
og:type：オブジェクトのタイプ。タイプのリストに関しては参考文献の”OGPの説明”で参照してください。
og:image：オブジェクトを表す画像URL。
og:url：オブジェクトのcanonical URL。

この四つのopen graphはあらゆるページで要求されるOGPです。og:site_nameとog:descriptionはオプションのOGPです。

og:site_name：サイト全体の名前。
og:description：オブジェクトの説明。

robotsで検索を制御する

検索エンジンへのインデックスに載せるか載せないかなどを制御するのがrobotsです。これはmetaタグのname属性にrobotsと書くと設定できます。

<meta name="robots" content="noindex, nofollow">

このタグの中のcontent属性で検索エンジンにインデックスをさせるかなどの設定ができます。初期では、indexとfollowが設定されています。

robotsのcontentのパラメータの種類は、
index -- ページをインデックスしないことを検索エンジンに通知します。follow -- ページがインデックスされない場合、クローラーはページ上の全てのリンクを辿ります。
noindex -- ページをインデックスしないことを検索エンジンに通知します。
nofollow -- ページ上のリンクを辿らないことやリンクに沿って等しく渡さないことをクローラーに通知します。
noimageindex -- ページ上の画像をインデックスしないことをクローラーに通知します。
none -- noindexとnofollowの両方を使っている時と同じです。つまり、ページをインデックスせず、全てのリンクを辿りません。

これ以外のパラメーターも存在します。