SEOとOGPについてのメモ

SEOとは何か

SEOとは、Search Engine Optimization(検索エンジン最適化)の略称である。
検索結果において、ウェブページをより高い順位に表示させることを目的として行う取り組みのことである。
今回はSEOの基本であるtitle、description、keywords、h1タグを適切に設定する方法について解説する。

OGPとは何か

OGPとは、Open Graph Protocol (オープン・グラフ・プロトコル)の略称である。
OGPはもともと、Facebookが策定した仕様である。今ではFacebookだけではなく、mixiなど、様々なSNSでも利用されるようになった。
OGPを利用すると、リンクの元となるコンテンツにどのような情報が含まれているか、効率良く伝えることができる。
例えば、FacebookなどのSNSで、URLを貼るだけで写真と説明文つきのリンクを出力するにはOGPを設定する必要がある。
 

SEOとOGPの書き方

まず、結論から書くと、以下の例のような書式でSEO(title、description、keywords)とOGPを設定することが出来る。

<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="Qiita - プログラマの技術情報共有サービス" name="title">
<meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の40字は大事。" name="description">
<meta content='キーワード, 5~6個がお薦め, 本文に書けなかったキーワード' name='keywords'>

<meta property="og:type" content="article"/>
<meta property="og:title" content="ogpのタイトル. <title>と文章も文字数も同じにする。"/>
<meta property="og:description" content="ogpの本文。<meta name='description'>と同じにする。" />
<meta property="og:image" content="https://secure.gravatar.com/avatar/ba111671b9d4dbdb9eff02471c361827" />
<meta property="og:url" content="http://qiita.com/taiyop/items/bfeeb41259cb0d083d88" />
<meta property="og:site_name" content="Qiita"/>

SEO(title、description、keywords、h1)の書き方について

titleについて

トップページにはサービス名と簡単な説明の両方を書く。
 

<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="技術の犬小屋 - Webプログラミングを餌に生きる犬のメモ帳" name="title">

 
 
下層ページにはサービス名と下層ページのタイトルになるものを書く。
 

<title>Qiita | titleを正しく設定するにはこう書く</title>
<meta content="Qiita | titleを正しく設定するにはこう書く" name="title">

 
 
文字数はなるべく32文字以内で記述する。文字数が多すぎると「…」に省略される。
 

descriptionについて

ウェブサイトの説明を書く。文字数は120字以内。こちらも文字数が多すぎると「…」に省略される。
最初の40文字が一番よく読まれるので、最初の40文字にこだわる。
descriptionもトップページと下層ページでは伝えたい内容が異なるので、それぞれのページに合った内容を書く。
 

<meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の40字は大事。" name="description">

 

keywordsについて

検索サイト(Googleなど)で検索した際に、引っかかるようにしたい検索ワードを指定する。
トップページと各ページでは内容や伝えたいことが異なるので、分けたほうが良い。

<meta content='キーワード, 5~6個がお薦め, 本文に書けなかったキーワード' name='keywords'>

 

h1について

そのページの見出しを記述する。このサイトの場合は「技術の犬小屋」がh1になっている。

<h1>技術の犬小屋</h1>

 
そのサイトの説明を含めた見出しをh1に使用することも良くある。

<h1>ウェブプログラミングで何かお困りなら技術の犬小屋</h1>

 

OGPの書き方について

 

og:typeについて

トップページには以下のように書く。

<meta property="og:type" content="website"/>

 
下層ページには以下のように書く。

<meta property="og:type" content="article"/>

 

その他のOGPの要素について

og:title、og:descriptionはSEOのtitle、descriptionと同じ内容を書く。
og:imageには表示させたい画像のURLを記述する。1200x630pxのサイズが推奨されている。
og:urlはそのウェブサイトのURLを記述する。
og:site_nameはそのウェブサイトのサイト名を記述する。
 

ウェブサイトのOGP設定をプレビュー出来る便利ツール

以下のツールにURLを貼り付けるだけで、OGPのプレビューが出来るので、設定後はここで確認する。

デバッガー – 開発者向けFacebook
 
 
以上
 
 
参考
検索エンジン最適化
SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ!!
中小企業のためのネットビジネス&キーワード最新事情 今さら聞けない、SNSで情報を拡散するためのOGP入門

Article written by

Comments are closed, but trackbacks and pingbacks are open.