SEOに強いnanapiに学ぶ!metaタグの設定方法

  • 2013-07-21 (日) 8:00
  • HTML

僕が作ったWebサービスのmetaタグ設定をする際に学んだことなどを書いておきます。metaタグについては全くの素人だったのでどうしたものかと迷っていた時ふと思い出しました。nanapiさんがSEOに強いということを!

meta-setting

nanapiさんがSEO対策を非常に重視されているということは以下の記事を読んで知っていました。まぁWebサービス展開されている方はみなさん重視されているのでしょうが。

nanapiが人力でやっている細かすぎるが効果的なグロースハック
ユーザーのためが最強のSEO!nanapiのSEOで何をしているか

 

metaタグというと僕にとってSEO対策のイメージが強く、じゃあnanapiさんから学べばいいんじゃないか?ということで今回の運びとなりました。短絡的ですかね。。。

で、学ぶといっても実際にしたことはnanapiさんのトップページ(http://nanapi.jp/)を”ページのソースを表示”から見て盗んだだけです。というわけで、nanapiさんのmetaタグ設定を参考に僕がした設定を書いてみます。

 

一般設定:
まぁ基本なんでしょうかねここら辺は。”msvalidate.01″はBingのWebMasterTool用の設定で、おそらく設定しても何のメリットも無いかと。

<meta name="msvalidate.01" content="F60C080919A27BC3C482221341C856C9" />
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="copyright" content="(C) akio All rights reserved" />
<meta name="description" content="CtrlPlusCは1クリックでお好みの文章をコピーできるWebツールです。" />

 

Facebook向け設定:
これは絶対に設定しましょう!Facebookでシェアされる際に表示されるdescriptionや、画像の設定です。

<meta property="og:title" content="CtrlPlusC - 1クリックでお好みの文章をコピー -" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://ctrlplusc.com/images/ctrlplusc.png" />
<meta property="og:url" content="http://ctrlplusc.com/" />
<meta property="og:description" content="CtrlPlusCは1クリックでお好みの文章をコピーできるWebツールです。" />
<meta property="og:site_name" content="CtrlPlusC - 1クリックでお好みの文章をコピー -" />

 

この設定をすると、このようにFacebookが”url”で指定したURLへアクセスした際にmetaタグ設定を読み取り、指定されたタイトルや、デスクリプション、サムネイル画像をもとに情報を表示します。この設定をしておかないとFaebook側が適当(?)に情報を取得し、表示します。

meta-setting-demo-1

 

設定方法については以下の記事が詳しいです。

これだけは知っておきたいOGP (Open Graph Protocol)

 

Twitter向け設定:
Cardsという機能をご存知でしょうか?ツイートにURLが含まれていると、FacebookのようにそのURL先の情報を表示する機能です。僕はこの機にはじめて知りました。これも設定はマストですね。

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@akiok_jp">
<meta name="twitter:title" content="CtrlPlusC">
<meta name="twitter:description" content="CtrlPlusCは1クリックでお好みの文章をコピーできるWebツールです。">
<meta name="twitter:creator" content="@akiok_jp">
<meta name="twitter:image:src" content="http://ctrlplusc.com/images/ctrlplusc.png">
<meta name="twitter:domain" content="http://ctrlplusc.com/">

 

Twitterが提供している以下のツールでmetaタグを生成することができます。

Card Validator

 

この設定をするとFacebook同様、指定されたタイトルや、デスクリプション、サムネイル画像をもとに情報を表示します。この設定をしておかないとTwitterカードの機能を利用することすらできないです。(たぶん)

meta-setting-demo-2

 

というわけで、metaタグについて色々書いてみました。SEO対策に一役は買うかもしれませんが大事なのはコンテンツやサービスの価値です。その点は重々承知しております。

 

Home > HTML > SEOに強いnanapiに学ぶ!metaタグの設定方法

Return to page top