パンくずリストをGoogleの検索結果ページで表示させる方法
実際にクリック率があがるかどうかは別として、パンくずリストを検索結果に表示するようにする方法(立地すにペット)を紹介している記事がありましたので、今回ご紹介させて頂きます。
グーグルの検索結果ページで御社のサイト内のコンテンツページ(トップページではなく)は、次のどちらのように表示されていますか?
どちらのほうが検索ユーザーの目に留まってクリックされやすいと思いますか? 確かなデータはありませんが、パンくずリストのほうがクリックされやすそうですよね(特にWeb担のような無機質なURLの場合は)。
最近の検索エンジンは、サイト上でふつうにパンくずリストを出していれば、自動的に検索結果でパンくずリストを表示するようにしてくれるようです(「リッチスニペット」と呼ばれるもの)。しかし、Web担のように、おかしなこだわりでパンくずリストの区切り文字をふつうの「>」ではなく「«」にしていると、自動認識されずにさみしいことになります。
そこで、ページのHTMLに「microdata」という仕組みで手を加えて、グーグルに「ここがパンくずリストだよ」と教え、検索結果ページで使ってもらえるようにする方法を紹介しましょう。
ふつう、パンくずリスト部分のHTMLは次のような感じになっていると思います。
<a href="/articles">記事一覧</a> >
<a href="/articles/lpo">LPO</a> >
<a href="/articles/lpo/electriciteit">エレキテルLPO</a>
これを、次のようにします。
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/articles" itemprop="url">
<span itemprop="title">記事一覧</span>
</a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/articles/lpo" itemprop="url">
<span itemprop="title">LPO</span>
</a> >
</span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="/articles/lpo/electriciteit" itemprop="url">
<span itemprop="title">エレキテルLPO</span>
</a>
</span>
少しわかりづらいですが、次のような変更を加えています。
パンくずリストの各項目を、「itemscopde」「itemtype」属性を指定したspanタグ(divでも可)で囲み、 itemtype属性にパンくずリストタイプを意味する「http://data-vocabulary.org/Breadcrumb」の値を指定して、これがパンくずリストであることを明示する。
各パンくずのリンクのaタグにitemprop="url"属性を付ける。
各パンくずの項目名を、itemprop="title"属性を付けたspanタグで囲む。
というものです。面倒な修正に見えますが、CMSを使ったサイトならば、パンくずリスト部分の処理を変えるだけで大丈夫なはずです。
変更後のHTMLで正しくパンくずリストが認識されているかは、グーグルの「リッチスニペット テストツール」を使って確認できます。テストツールにURLを指定して[Preview]ボタンをクリックすると、グーグルがそのページに埋め込まれたデータをどう解釈していて、どんなリッチスニペットを生成するのかが表示されます。
結構簡単ですよね? Web担でも、サイトを修正したら1~2日後には一部のページに関しては、検索結果ページでパンくずリストが表示されるようになっていました。
ただし、こうしてデータを埋め込んだとしても、100%確実に検索結果ページでリッチスニペットとして表示されるわけではありません。データが間違っていたり足りなかったりすると 、リッチスニペットとして表示されない場合があります。
また、リッチスニペット用のデータを指定する方式にはいくつかありますが、ここでは検索エンジンが今後メインに扱っていくといわれているmicrodata(マイクロデータ)を使っています。microdataが想定している ページのマークアップはHTML5ですので、Web担のようなXHTMLサイトではよろしくないのかもしれませんし、そもそもHTML文法チェッカーなどでエラーだと表示されますので、ガイドラインなどでそのあたり制限がある場合は注意したほうがいいかもしれません。
記事元はこちら↓↓
Googleの検索結果ページでパンくずリストを表示するmicrodataの使い方 | Web担当者Forum
応援クリックにご協力ください!
↓↓↓↓↓
Googleが検索結果のタイトルを置き換える!?
この置き換えについてGoogleのPierre Far(ピエール・ファー) 氏が説明をしています。
以下がリスト形式で纏めたものになります。
- ユーザーエクスペリエンスを向上させるために検索クエリに基づいて書き換えることがある。
- さまざまな要素からアルゴリズムが置き換えを作り出す。
- titleタグがあいまいだったり、サイト中で繰り返し使われていたり、ユーザーのクエリに関連していないときに置き換えが起こりやすい。
- 書き換えられないようにするには、titleタグがユーザーに情報をしっかり伝えるようにし、そのページが何について書かれているのか正確に表すようにする。
- よくありがちな悪いtitleタグの例は「Home」とか空っぽのタイトル。
このような置き換えには2つのポイントがあると鈴木謙一士は述べており、
1つは、titleタグのランキング要因に占める重要性の低下。
もう1つはGoogleのセマンティック能力の向上。
以上を簡潔にまとめたものがこちらになります。
- Googleが検索クエリに応じて、検索結果でのタイトルをHTMLのtitleタグから書き換える傾向が強まっている。
- 書き換えられないようにするには、ユニークでページの内容を表すtitleタグを記述すべき。
- それでも書き換えられることがあるので、それはもう任せるしかない。
- Googleはtitleタグに頼らずにページのトピックを理解する力が伸びてきていて、titleタグがランキングに占める比重が少なくなってきているのではないかと僕は感じている(titleタグをないがしろにしていいというわけではない)。
↓↓
検索結果のタイトルをGoogleが激しく書き換える理由 | 海外SEO情報ブログ
応援クリックにご協力ください!
↓↓↓↓↓
Googleスパムリンク対策を強化
2011年6月末頃から、googleがPageRankの不正操作により検索順位を歪めようとしているウェブマスターに対して、ウェブマスターツールを通じた指摘・警告を行っている模様です。
隠しリンクや有料リンクなど、不正なリンクにより検索順位を操作しているウェブマスターに向けてgoogleが指摘することは今に始まったことではないのですがが、今回は不正リンクを発信しているサイトの管理者と不正リンクをうけているサイトの管理者の双方にグーグルが指摘を行っている点が新しいと言えます。
前者(不正リンクを発信しているサイトの管理者)は、あるサイトの検索順位を上昇させることを目的に作成された、リンク供給用のサイトのことをを指します。こうしたサイトの大半は、発リンクを設置する枠を用意することが目的のため、サイトのコンテンツの品質はきわめて低いと言え、ワードサラダ(日本語として意味をなさないスパムコンテンツ)までいかないが、適当なキーワードを配置し、そのキーワードからターゲットのサイトに向けてリンクを貼りつけているものです。googleは今回、こうしたサイトの管理者に対して、PageRankの不正操作を目的とする、他のサイトに向けたリンクが検出されたことを指摘しています。
一方の後者(不正リンクをうけているサイトの管理者)、「不正リンクをうけているサイトの管理者」とは、たとえば有料リンクの購入、リンクファーム的なプログラムへの参加、あるいは先述したリンク供給用サイトなどから、多数のリンクをうけている場合に該当します。Googleヘルプフォーラムにも該当する相談が投稿されているが、この相談者の場合は原因と考えられる有料リンクが外せないためにすぐに対応ができないようだが、同様のケースは少なくないと考えられます。つまり、たとえばSEO業者にSEOをアウトソースしたものの、その業者が低品質なリンクを大量に貼り付けた結果、グーグルからその指摘が行われるというケースは当然考えられるが、SEO業者がそのリンク外しに応じない場合、対処法が極めて厳しくなります。
米国と比較して、比較的「甘い」対応だった日本国内だが、本件は「日本語のスパムにも厳しく対応する」という姿勢が伺えます。SEO業界では何故か「パンダ・アップデート」に注目が集まっているが、倫理的・技術的に「ダメなものはダメ」であり、それはパンダ・アップデートで話題としているコンテンツだけのお話ではありません。日本は大丈夫だから・・・という甘い考えは一度捨ててみたほうが良いでしょう。
応援クリックにご協力ください!
↓↓↓↓↓
「いいね!」ボタンと「OGP」
Blogや自社サイトに、「いいね!」ボタンを設置しているみなさん、「超重要」なOGP(Open Graph Protocol)の設定は出来てますか?
これは、ある記事の参照元の計測データです。アクセスを牽引しているのは、「はてなブックマーク」でも「twitter」でも「Google」でもなく、『Facebook』です。OGPを設定するだけで「必ず」Facebookからの流入数が増加します。増加率はサイトによっては2倍どころではありません。今回は、流入数が増加する理由とそのための設定方手順をご説明します。
※かなり長い記事になりますが、いつの日にか必要になる設定手順を超詳しく解説しています。ぜひブックマークしておいてください!
1. 最初に種明かし、「必ず」Facebookからの流入数が増加する理由
OGPを設定すると友達のニュースフィードに「いいね!」が飛ぶ。
皆さん、ブログでもニュースサイトでも「いいね!」ボタンを見ますよね? 実はこの使い方、クリックして貰って数字を出すだけではないのです。
ラボでは、昨年の下旬あたりに”OGPを設定すると友達のニュースフィードに「いいね!」が飛ぶ”という事に気付いてすぐに設置していました。もちろん、誰かが「いいね!」を押してくれる事が前提条件になりますが、この設定によって確実にアクセスが増加します。
※補足※
記事公開から日が立っていくと、だんだんとGoogle経由でのアクセスが増えていきます。Facebookは初速でのアクセス増加に貢献し、Googleは中期的なアクセス増加に貢献していきます。
ここまでで、OGPがアクセス増加のカギになりそうだ、というのは何となくご理解頂けたかと思います。次に、「そもそもOGPとは何か?」についてご説明します。
2. OGPとはなにか?
OGPとは、「外部サイトをまるでFacebookページのように見せかけられるhtml記述のルール」です。このルール通りにhtmlを書かないと、Facebookのシステムが外部ページの情報を上手く理解できません。「いいね!」情報が友達のニュースフィードに飛ばないなど、色々と不都合が生じてしまいます。
設定方法の詳細は後述しますが、Facebookが指定する「xmlns属性」と「meta情報」を記述する必要があります。
▼OGP設定に必要な記述
1. xmlns属性 …「xmlns:og=”http://ogp.me/ns#”」etc
2. meta情報 …「」etc
また、xmlns属性・meta情報をご存じない方はこちらをご参照頂くと分かると思います。
xmlns属性とは?
XHTML(というよりXML)では、1つの文書の中でXHTMLをはじめ、他に定義されたマークアップ言語を複数使用することができます。複数のマークアップ言語を使用する場合、それら複数のマークアップ言語の中で同じ名前のタグが使用されていた場合に衝突が起こる問題が生じます。
例えば、現在、MathMLという数式用のマークアップ言語がありますが、このMathMLで<a>タグが数値を表すと定義されていたとすると、XHTMLの<a>タグと衝突してしまいます。
こういった衝突を防ぐために、XHTMLでは、どのDTDのタグと属性を参照するかを指定するxmlns属性(XMLネームスペース)が用意されています。XHTML文書を作成する場合は、通常、このxmlns属性をに記述しておき、値に「http://www.w3.org/TR/xhtml1」を記述します。
引用元:WebDesignLesson
meta情報とは?
タグはその文書に関する情報(メタ情報)を指定して、 ブラウザや検索ロボットに知らせるためのタグです。
引用元:クイック レファレンス
3. OGPを設定したほうが良い3つの理由
「OGP」を設定すると何が良いのか?
冒頭でご説明した『友達のニュースフィードに飛ぶ』というのも含め、3つの理由があります。
▼OGPを設定したほうが良い3つの理由
理由1.「いいね!」を押した情報が友達に飛ぶ(設定しないと飛ばない!)
理由2.ニュースフィードでの表示内容を指定できる。
理由3.「いいね!」を押してくれたユーザーにアップデート情報を送れる。
それぞれ、詳しくご説明します。
理由1. 「いいね!」を押した情報が友達に飛ぶ(設定しないと飛ばない!)
これがOGPを設定すべき最大の理由です。設定すれば、「いいね!」を押したユーザーの友達のニュースフィードに情報が飛びます。
※注意※OGPを設定しなくとも、自分のプロフィールページにはアクティビティとして表示されます。が、実はここに表示されても友達のニュースフィードには飛んでいません。
理由2. ニュースフィードでの表示内容を指定できる。
せっかく、OGPを設定して友達のニュースフィードに表示されるようになったとしても、ヘンテコな情報が表示されたり、見せたい情報が表示されなかったりしたらもったいないです。色々な種類のmeta情報を付加できるので、しっかり設定しましょう。
※指定しない場合は、Facebookのシステムが判断した情報が表示されてしまいます。
<まず設定すべき7種類のmeta情報>
OGPでは、「<meta property=”og:▲▲” content=”●●”>」という形式で、様々な情報を付加できます。設定しようと思えば本当にたくさんの種類がありますが、「必須のもの」と「表示による効果が出やすいもの」として、こちらの7種類だけ設定すれば問題ありません。
1.og:title(ページタイトル)

2.og:image(ページ画像)

3.og:url(ページURL)

4.og:site_name (ページが属するサイト名)
(※ニュースフィードには表示されません。)
5.og:description(ページの説明文)

6.fb:app_id
「OGPを設定する」=「Facebookページに見せかける」のですが、そのFacebookページの管理者をアプリIDで指定します。(※ニュースフィードには表示されません。)
7.og:type(ページタイプ)
これはOpen Graph typesのリストから選ぶ必要があります。ニュースフィードには表示されません。
The Open Graph Protocolから抜粋したtypeが下記になります。typeの種類は変わる可能性がありますので、設定するタイミングでThe Open Graph Protocol
(英語)サイトをご確認下さい。
・Activities
activity
sport・Businesses
bar
company
cafe
hotel
restaurant・Groups
cause
sports_league
sports_team・Organizations
band
government
non_profit
school
university・People
actor
athlete
author
director
musician
politician
profile
public_figure・Places
city
country
landmark
state_province・Products and Entertainment
album
book
drink
food
game
movie
product
song
tv_show・Websites
article
blog
website
理由3. 「いいね!」を押してくれたユーザーにアップデート情報を送信できる。
意外と気付いていない方が多いのがここではないでしょうか。

冒頭で「外部ページをFacebookページに見せかけられる」と書きましたが、実はOGPを設定すると普通のFacebookページとは別に「外部ページ用のFacebookページ」が生成されています。この「外部ページ用のFacebookページ」のウォールにコメント・URL等を投稿する事で、そのページで「いいね!」を押した人のニュースフィードに、アップデート通知を送信できるのです。
「外部ページ用のFacebookページ」にはどうやって行くの?
この画面には、外部サイトの「いいね!」ボタンの横についている「管理者用ページ」というリンクから行けます。OGPを設定したら、ぜひ行ってみて下さい!(
このリンクは、管理者にしか表示されません。)

以上が、そもそもOGPとは何か、OGPを設定するとどんな良い事があるか、の説明です。以降で具体的な設定方法について見ていきましょう。
3. 「いいね!」ボタン、「OGP」の具体的な設定方法(livedoor Blog編)
具体的な設定対象を挙げたほうが分かりやすいかと思いますので、ラボでも利用しているlivedoorBlogを例に、「いいね!」ボタン、「OGP」の設定手順をご紹介します。「いいね!」ボタンの設置方法は、「iframe」と「XFBML」の2種類があります。今回は設定が分かりやすい「iframe」版のご紹介をします。
「アプリID」を取得する。
まずは、Facebookデベロッパーズサイトのアプリ作成画面にアクセスします。
アプリ作成画面: http://developers.facebook.com/setup/

表示された画面で、OGPを設置したサイト名・URLを入力。次画面ではセキュリティチェックの単語入力を行います。

「Create an App」というアプリIDの作成完了画面が表示されます。この画面の「アプリID」をOGP設定時に使いますので、メモしておいて下さい。
「いいね!」ボタンを設置する。
次に「いいね!」ボタンを設置するためのコードを発行します。まずは、Facebookデベロッパーズのプラグイン発行画面にアクセスしましょう。
プラグイン発行画面: http://developers.facebook.com/docs/plugins/

「Like Button」を選択します。

「Step 1 - Get Like Button Code」の設定欄で、それぞれ下記のように設定します。
・「URL to Like」欄 :「123」と記入
→後で、livedoor Blogのパーマリンクの独自タグに書き換えます。ここで<$ArticlePermalink$>を入力すると、コード生成のタイミングで誤変換されてエラーになります。
・「Layout Style」欄 :「standard」のまま
→「いいね!」ボタンの形を3パターンから好みで選べます。
・「Show Faces」欄 :「チェック」を付けたまま
→「いいね!」した友達の写真を表示するかどうか選べます。若干表示速度が遅くなりますが、写真を出す事によりそれ以上の効果があるので表示します。
・「Width」欄 :設置先の横幅に合わせて記入
・「Verb to display」欄 :「like」のまま
→「like」と「recommend」のどちらかを選べます。
・「Font」欄 :そのまま
・「Color Scheme」欄 :そのまま

URLを書き換えます。生成したコードの「123」の部分を、<$ArticlePermalink$>に変更しましょう。このコードは、livedoorBlogの管理画面に貼りつけるので、保存しておいて下さい。
<$ArticlePermalink$>とは?
livedoorBlogの独自タグで、記事ごとのパーマリンクを自動で挿入させるようにする記述方法です。他にも色々ありますので、ご興味ある方はこちらをご覧下さい。
独自タグ一覧/livedoor BlogのデザインをカスタマイズするWiki
デザインテンプレート/タグ一覧/livedoor Blog まとめサイト
livedoorBlogの管理画面で貼りつける。

livedoorBlogのデザインカスタマイズページを開きましょう。
「個別記事ページ」の編集画面で、<$ArticleBody$>の下にコードを貼りつけます。
次にOGPの設定に入ります。念のため、ここで保存しておいて下さい。
「OGP」を設置する。
次にOGPの設置をします。まずは「いいね!」ボタンのコードを生成した「いいね!」ボタン発行画面にもう一度アクセスして、「Step 2 - Get Open Graph Tags」と書かれた部分を開いて下さい。
「OGP」のタグを発行する。

「Step 2 - Get Open Graph Tags」の設定欄で、それぞれ下記のように設定し、「Get Tags」をクリックします。
・「title」欄 :未記入
→ここで独自タグを記入すると誤変換でエラーになるため。
・「Type」欄 :「blog」に設定
・「URL」欄 :未記入
→ここで独自タグを記入すると誤変換でエラーになるため。
・「Image」欄 :未記入
→ここで独自タグを記入すると誤変換でエラーになるため。
・「Site name」欄 :ブログタイトルを記入
・「Admin」欄 :「111」と記入
Get Tagsをクリックすると、このような画面が開かれます。未記入だった「og:tilte」「og:url」「og:image」に、livedoorBlogの独自タグを記入します。

・<meta property=”og:title” content=”" />
→「”"」の間に、<$ArticleTitle ESCAPE$>と記入
→これは、そのページのタイトルを勝手に挿入してくれる独自タグです。
・<meta property=”og:url” content=”" />
→「”"」の間に、<$ArticlePermalink$>と記入
・<meta property=”og:image” content=”" />
→「”"」の間に、<$ArticleFirstImage$>と記入
→これは、記事の最初の画像を勝手に挿入してくれる独自タグです。
「111」と記入した「og:admin」の欄を、下記のように書き換えます。
[変更前]
<meta property=”fb:admins” content=”111” />
[変更後]
<meta property=”fb:app_id” content=”最初に取得したアプリIDと記入” />
この画面では、「og:description」の設定が入ってません。ですので、自分で<meta property=”og:description” content=”<$ArticleBody ESCAPE$>”/>を追加しましょう。
・<meta property=”og:description” content=”<$ArticleBody ESCAPE$>”/>
→<$ArticleBody ESCAPE$>というのは、livedoorBlogの独自タグで、そのページのテキストを勝手に持って来てくれます。
終わったらlivedoorブログの管理画面に貼りつけるので保存しておきます。
livedoorBlogの管理画面で貼りつける。
まず、「いいね!」ボタンのコードを貼った「個別記事ページ」の編集画面を開いて下さい。こちらの2つのxmlns属性を追加しましょう。
・xmlns:og=”http://ogp.me/ns#”
・xmlns:fb=”http://www.facebook.com/2008/fbml”

用意していたOGPを、との間に追加して保存しましょう。
URLリンターで、ミスが無いか確認。
最後に、Facebookが用意する「URLリンター」を使ってミスが無いか確認しましょう。使い方は、記事URLをフォームにコピペして「Lint」を押すだけです。
URLリンター: http://developers.facebook.com/tools/lint


Giax ソーシャルメディア ラボ
http://blog.livedoor.jp/gx_socialmedia_lab/
Giax ソーシャルメディア ラボのFacebookページ
http://www.facebook.com/socialmedia.gaiax
公式Twitterアカウント @GX_SocialMedia
※画像は『Facebook』から引用されています。
記事元はこちら
↓↓
SEOの2倍アクセスを稼ぐFacebook活用術 「いいね!」ボタンと「OGP」の設定方法を超解説 - ガジェット通信
応援クリックにご協力ください!
↓↓↓↓↓
