SEO嫌いにお送りするSEO策。これでもうSEOについてしばらく考えなくて良いぜ！！

SEO好きですか？私は嫌いです。そんな事に取り組むよりも仕組みやコンテンツの改善に取り組みたいです。今回はそんなSEO嫌いにお送りする、SEO対策集です。やってられないSEOは１日で終わらせてもっと生産的な仕事に集中しましょう！

# まずは結論から
下記をテンプレートにしていただければ良いです。google検索表示もfacebook表示も上手くいきます。twittercardの表示だけは[公式サイト（日本語）](https://dev.twitter.com/ja/cards/overview)より申請がいるのでそれだけしておきましょう。

```template.html
<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="Qiita - XXX" name="title">
<meta content="ブログ記事詳細. 120字以内を心がけよう。その中でも最初の４０字は大事。" 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"/>
<meta content="summary" name="twitter:card" />
<meta content="@twitter_acount" name="twitter:site" />
```

# google検索での表示
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/2014491b-ec06-65ff-823c-8e6fe0dfbac8.png)
## titleについて
**TOPページにはサービス名と簡単な説明の両方書く**

```html
<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="Qiita - XXX" name="title">
```
**詳細ページにはサービス名と詳細ページのタイトルになるものを書く**

```html
<title>Qiita | ブログ記事タイトル</title>
<meta content="Qiita | XXX" name="title">
```


**文字数は３２文字以内**      
文字数が多すぎると「...」に省略されます。３２文字くらいだと大丈夫なので文字数の目安にしましょう。

## descriptionについて
**文字数は１２０字以内**
こちらも文字数が多すぎると「...」に省略されます。１２０文字以内に抑えましょう。

**最初の４０文字にこだわる**
最初の４０文字が一番よく読まれます。その文章に特に集中しましょう。


## まとめるとこんな感じ
```template.html
<title>Qiita - プログラマの技術情報共有サービス</title>
<meta content="Qiita - プログラマの技術情報共有サービス" name="title">
<meta content="Qiitaは、プログラマのための技術情報共有サービスです。 プログラミングに関するTips、ノウハウ、メモを簡単に記録 & 公開することができます。" name="description">
```
**補足**

![image](https://qiita-image-store.s3.amazonaws.com/0/16795/2014491b-ec06-65ff-823c-8e6fe0dfbac8.png)

上記のような「タグ一覧」「Qiitaについて」が表示されますが、これはサイトリンクと呼ばれ、googleから検索キーワードに一番適したサイトだと認められなければ表示されないようです。googleがその判定をするには少し時間が必要になるので今回は説明を省きます。詳しくは以下をご参照ください。
 [検索結果にサイトリンクを出す方法とウェブマスターツールでの設定方法](http://whitehatseo.jp/%E3%82%B5%E3%82%A4%E3%83%88%E3%83%AA%E3%83%B3%E3%82%AF%E3%81%AE%E5%87%BA%E3%81%97%E6%96%B9%E3%81%A8webmaster-tools%E3%81%A7%E3%81%AE%E7%AE%A1%E7%90%86%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95/)


# Facebookでの表示
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/0f3072f9-1021-8bbb-6df5-0a2b3f48f1a7.png)
この表示はOGP(OpenGraphProtocol)と言われる仕組みを使っている。
OGPの全体仕様の説明をしだすとキリがないので、その辺りは[OGP公式サイト](http://ogp.me/)に任せます。今回はあくまで必要十分な設定の説明をします。

ちなみにOGP設定が上手くいっているかどうかは下記リンクより確認出来る。
https://developers.facebook.com/tools/debug

## og:typeについて
**サイトTOP**

```html
<meta property="og:type" content="website"/>
```
**各ページ**

```html
<meta property="og:type" content="article"/>
```
実際にはもっと細かく設定出来るようになっているんですが現在はあまり影響なさそうなのでとりあえずはこれで十分です。詳しくはこちらをご覧ください。
http://singoro.net/note/ogp-og_type/

## og:imageについて
画像の比率は表示レイアウトにも影響します。どのように見せたいかで画像サイズを選びましょう。
(1)画像が横長のとき
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/0036abe3-5531-5b90-f42a-de9dc00f707e.png)
(2)画像が正方形・縦長のとき
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/3edda01d-8592-614b-43e7-c4eb46104762.png)

画像推奨サイズは[facebook developer公式サイト](https://developers.facebook.com/docs/opengraph/creating-custom-stories#objecttypes)を参考に。
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/deeeb226-a970-8546-8330-8ff9103bebd6.png)
横長の画像は**比率1.91:1**辺りに近づけましょう。600x315px以上であれば良いが、推奨は1200x630px。
正方形の画像は600x600px以上。

**補足**
画像設定して投稿してみたら横が切れてしまっていたなんてことがよくあります。
シミュレーターでどのように表示されるか試してから設定するのが良いでしょう。
[OGP画像シミュレーター](http://ogimage.tsmallfield.com/) - http://ogimage.tsmallfield.com/

## og:title等
後は以下を設定しておけば十分です。

```html
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="個別ページの説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:admins" content="facebookのユーザーID fb:app_idで良い。" />
<meta property="fb:app_id" content="facebookのアプリID" />
```
fb:admins, fb:app_idについてはこちらをご参考に。設定の仕方も書いてくれています。
[Facebookインサイト設定の落とし穴、app_id, admins の違いとは](http://blog.sixapart.jp/2012-04/fb-app-id.html)

## まとめるとこんな感じ
```html
<meta property="og:type" content="article"/>
<meta property="og:image" content="ページで見せたい画像URL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:description" content="ページの説明" />
<meta property="og:url" content="ページのURL" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="fb:admins" content="facebookのユーザーID fb:app_idで良い。" />
<meta property="fb:app_id" content="facebookのアプリID" />
```

# Twitterでの表示
![image](https://qiita-image-store.s3.amazonaws.com/0/16795/6c59863c-6656-013f-99e4-8d77ca1a538e.png)

手順は[公式サイト（日本語）](https://dev.twitter.com/ja/cards/overview)で十分わかりやすかったです。
>
1 実装するカードタイプを選択
2 適切なメタタグをページに追加
3 検証ツールでURLを実行して申請
4 承認を受けたら、URLをツイートしてツイートの下に表示されるカードを確認

OGP設定が済んでいれば、最短は２行追加するだけです。

```html
<meta content="summary" name="twitter:card" />
<meta content="@twitter_acount" name="twitter:site" />
```
というのも、下記のような**og:xxxとtwitter:xxxの関係**があるからです。

|og:xxx  |twitter:xxx  |
|:-------|:-----------:|
|og:title|twitter:title|
|og:description|twitter:description|
|og:image|twitter:image|
|og:url|twitter:url|

TwitterCardについて詳しく知りたい方は[公式ドキュメント(日本語）](https://dev.twitter.com/ja/cards/overview)を見てください。
※英語版が表示される場合は下記のようにURLを修正すれば日本語版表示されます。

```
#before
https://dev.twitter.com/cards/xxx
#after
https://dev.twitter.com/ja/cards/xxx
```

表示のプレビューは[公式検証ツール](https://cards-dev.twitter.com/validator)から確認出来ます。


# 補足

```html
<meta content='Qiita, SEO, チートシート' name='keywords'>
```
一応上記のようにkeywordsも書いていますが、現在はほとんどいみがありません。本文と同じくらいの重みだそうです。本文に書けなかったキーワードを入れると良いでしょう。５〜６個以内推奨です。

# オマケSEO
#### ソースコードのエラーを改善
ソースコードにエラーがあっても表示が上手くいくことがありますが、SEO的にはあまり良くありません。
[The W3C Markup Validation Service](http://validator.w3.org/)を使ってエラーがないか確認しましょう。

#### レンダリング速度を改善
描画速度もSEOに影響します。
Firefoxのアドオン [Yslow](https://addons.mozilla.org/ja/firefox/addon/yslow/) を使って解析して改善しましょう。
~~※個人的にはChromeデベロッパーツールの拡張機能で欲しい所ですが...。~~
@sounisi5011さんよりご紹介
>
[YSlow - Chrome ウェブストア](https://chrome.google.com/webstore/detail/yslow/ninejjcohidippngpapiilnmkgllmakh)

#### WebMasterToolで設定
サイトマップの登録なんかもしておくとgooglebot良いとのことです。

#### HTML5 microdataを使う
参考資料は[コチラ](https://support.google.com/webmasters/answer/176035?hl=ja)

#### canonicalによるURL正規化
例えば、クエリパラメータによって`xxx.com?xxxx=xxx`というのがあるが、このクエリパラメータごとに別ページとして見なされてしまう。URL正規化はそれを同じページだと宣言出来る。

#### 他にも影響要素あるかも!?
下記ツールを使ってチェックしてみましょう。
- [SEOツールズ](http://www.seotools.jp/)
- [Ferret PLUS](https://tool.ferret-plus.com/)
- [SEOチェキ!](http://seocheki.net/)
- [Open Site Explorer](http://moz.com/researchtools/ose)