BloggerにOGPを設定する方法です。
最近、FB以外でも利用されるようになったのでうちも導入してみようかな、ということで。調べてみたら意外とサクッとできてしまった感がありますが、一カ所だけ妥協しました。
OGPとは何ぞや、という話は省略して以下、手順など。
…その前に、下準備としてBloggerの設定を変更してmeta descriptionを有効にします。『っけねー！ まだしてねーやｔｈｐｒ！』という場合はこちらをどうぞ↓
Bloggerでmeta descriptionを個別に設定する方法｜R14
下準備が済んだらテンプレートのHTMLを編集します。まず、
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>
の部分を
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr' prefix='og: http://ogp.me/ns#'>
に変更します。
次にホーム、個別記事、共通設定の順にタグを追加していきます。なお、アーカイブについては省略します。本当に必要だと思う方はググってください。
ホーム用タグ
<b:if cond='data:blog.pageType == "index"'>
<meta property='og:type' content='blog'/>
<meta expr:content='data:blog.pageTitle' property='og:title'/>
<meta name='description' content='ブログ全体の説明'/>
<meta property='og:description' content='ブログ全体の説明'/>
</b:if>
下準備のところの参考記事で「サイトの説明文は空欄に」と書きましたが、ここでちゃっかり設定しています。こうすることで、ブログのホームを表示させた時にだけ有効になるmeta descriptionができあがります。さらにog:descriptionにもコピペで説明文を持ってくれば大丈夫です。
個別記事用タグ
<b:if cond='data:blog.pageType == "item"'>
<meta property='og:type' content='article'/>
<meta expr:content='data:blog.pageName + "｜" + data:blog.title' property='og:title'/>
<meta property='og:description' expr:content='data:blog.metaDescription'/>
</b:if>
個別記事のタイトルをいじってない場合はOGPの設定より前に下の文字列を追加します。（この部分はカスタマイズですので自己判断で）
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/>｜<data:blog.title/></title>
</b:if>
これで記事のタイトルとog:titleがイコールになります。また、最初に書いた下準備が終わっていればog:descriptionはmeta descriptionとイコールになります。
共通タグ
<meta property='og:image' content='画像のURL'/>
<meta property='og:url' expr:content='data:blog.url'/>
<meta property='og:site_name' expr:content='data:blog.title'/>
<meta property='og:locale' content='ja_JP'/>
画像については妥協しました。うちの設定だと共通でプロフィールの画像が表示されるようになっています。個別記事毎の画像を持ってくる方法もあるにはあるようですが、外部ツールを利用するみたいなので諦めました。
最後に、ちゃんと設定出来てるかどうかチェックします。こちらのブックマークレットが便利だったので使わせてもらいました。
OGPタグチェックのブックマークレットを作成しました！ - SINAPlog
2013年11月10日
2012年9月25日
Bloggerでmeta descriptionを個別に設定する方法
Googleはmeta descriptionの設定を推奨しているわりには、Bloggerだとデフォルトのままでは個別設定が出来ません。なんとかして設定出来ないかと探していたら、海の向こうに情報がありました。
一度記事を投稿した後、管理画面の『デザイン』→『HTMLの編集』→『テンプレートを編集』から以下の文字列をHEAD部分に記述します。
<b:if cond='data:blog.url == "http://hogehoge.blogspot.com/（中略）.html"'>
<meta content='ページの説明文を分かりやすく書く。SERPも意識してクリックしてもらえそうな感じに。' name='description'/>
</b:if>
一つの記事に対してこの文字列を毎回入れていかなければならないので、数が増えるとテンプレートもどんどん長くなってしまいます。SEOも楽じゃないね～。個人サイトなのでのんびりやっていきますが…。
ま、Google自体はmeta descriptionを推奨しているので、将来的にBloggerの方でも管理画面から個別入力が出来るようになってくれないかなと淡い期待を抱いておきます。
▲ここまで2011年4月18日に書いた文章▲
▼～約一年後～▼
なんと、本当に管理画面から入力出来るようになりました！
ということで早速説明を。
1. Bloggerの管理画面から、設定→検索設定→メタタグのところで『検索向け説明を有効にしますか？』のチェックボックスを『はい』に。
2. サイトの説明文はあえて空欄のままにします。ここに何か書くと、複数のURL（アーカイブページなど）で同じ説明文が表示されるため、ウェブマスターツールで警告が出てしまうので…。
3. 次に個別記事の編集画面を開くとサイドバーに変化が。今まではこうだったのが…
下から二番目に新しく『検索記述子』という項目が増えています。
4. 項目を開き、meta descriptionに入れるべき文章を入力します。
5. 入力が済んだら完了ボタンで閉じて、ページ上部のオレンジ色の『更新』ボタンを押して記事に反映させます。
以上で完了です。
該当ページのソースにもちゃんと反映されています。
レンタルブログでmeta descriptionを個別に設定出来るところってかなり少ないと思うのですが、あえてそれを可能にしたということは、Googleがよっぽど重視してるのではないかと感じました。
一度記事を投稿した後、管理画面の『デザイン』→『HTMLの編集』→『テンプレートを編集』から以下の文字列をHEAD部分に記述します。
<b:if cond='data:blog.url == "http://hogehoge.blogspot.com/（中略）.html"'>
<meta content='ページの説明文を分かりやすく書く。SERPも意識してクリックしてもらえそうな感じに。' name='description'/>
</b:if>
一つの記事に対してこの文字列を毎回入れていかなければならないので、数が増えるとテンプレートもどんどん長くなってしまいます。SEOも楽じゃないね～。個人サイトなのでのんびりやっていきますが…。
ま、Google自体はmeta descriptionを推奨しているので、将来的にBloggerの方でも管理画面から個別入力が出来るようになってくれないかなと淡い期待を抱いておきます。
▲ここまで2011年4月18日に書いた文章▲
▼～約一年後～▼
なんと、本当に管理画面から入力出来るようになりました！
ということで早速説明を。
1. Bloggerの管理画面から、設定→検索設定→メタタグのところで『検索向け説明を有効にしますか？』のチェックボックスを『はい』に。
2. サイトの説明文はあえて空欄のままにします。ここに何か書くと、複数のURL（アーカイブページなど）で同じ説明文が表示されるため、ウェブマスターツールで警告が出てしまうので…。
3. 次に個別記事の編集画面を開くとサイドバーに変化が。今まではこうだったのが…
以上で完了です。
該当ページのソースにもちゃんと反映されています。
2011年9月13日
Bloggerのラベルページと過去記事をタイトルのみにしてスッキリ&高速に表示させる方法
Bloggerのラベルページは前々から『本文要らないだろ…』と思っていたのですが、やっとその方法が見つかりましたので以下に書き出します。事前のバックアップは忘れずに。
1.管理画面から『デザイン』→『HTMLの編集』→『ウィジェットのテンプレートを展開』にチェックを入れる。
2.以下の文字列を検索↓
<b:include data='post' name='post'/>
3.見つかった部分を以下の文字列に置き換える↓
<!--Label and archive page title only hack-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--BloggerSentral.com-->
4.テンプレートを保存して終了
以上です。途中にh3 class='title-only'とあるので、CSSで独自のスタイルを割り当てる事も可能。
参照元サイト：Blogger Sentral | Blogging tips, tricks, tutorials and widgets
さて。
これで“スッキリ”はしましたが、“高速”の部分はどうなったの？ という話ですが、実際に高速化されたことを物語る画像がこちら。
ウェブマスターツールの『サイトのパフォーマンス』で表示される画像です。
上記カスタマイズをこのブログで適用させたのが2011年8月19日ですが、丁度そのくらいの時期にグラフがボキッと折れてます。我ながら、ヤラセじゃないかと疑いたくなるぐらいに。
ツールによれば、“サイト内のページの平均読み込み時間は 0.7 秒です（更新: 2011/08/30）。”とのことですので、十分高速化はされていると言っていいでしょう。ちなみにカスタマイズ前は1.8秒とかその辺だった気がします。
また、このカスタマイズによる地味なメリットとして、『アクセシビリティ向上』と『検索エンジンからの下落』も一応あげておきます。両方とも大体文字通りの意味ですが、要は、個別ページへのアクセスが容易になったということ。ラベルページもアーカイブも、そのままだと本文がずらずらと続き、目的の個別ページになかなか辿り着けない。さらに、下手に文章量があるために検索エンジンへの評価が上がってしまい、個別ページの順位が下がるという悲しい結果にもなっていました。
今後はタイトル表示のみになり、閲覧する側にも分かりやすく、目的のページへのアクセスが楽になると思われます。アーカイブに至っては、共通点のない単なるリンクページとなるので検索エンジンからは圏外へ飛ばされるはず（笑）。
こうして書いてみると、結構メリットが多いですね。全部合わせたらそこそこサイトの評価は上がりそうな気がします。
1.管理画面から『デザイン』→『HTMLの編集』→『ウィジェットのテンプレートを展開』にチェックを入れる。
2.以下の文字列を検索↓
<b:include data='post' name='post'/>
3.見つかった部分を以下の文字列に置き換える↓
<!--Label and archive page title only hack-->
<b:if cond='data:blog.searchLabel'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<h3 class='title-only'><a expr:href='data:post.url'><data:post.title/></a></h3>
<b:else/>
<b:include data='post' name='post'/>
</b:if>
</b:if>
<!--BloggerSentral.com-->
4.テンプレートを保存して終了
以上です。途中にh3 class='title-only'とあるので、CSSで独自のスタイルを割り当てる事も可能。
参照元サイト：Blogger Sentral | Blogging tips, tricks, tutorials and widgets
さて。
これで“スッキリ”はしましたが、“高速”の部分はどうなったの？ という話ですが、実際に高速化されたことを物語る画像がこちら。
上記カスタマイズをこのブログで適用させたのが2011年8月19日ですが、丁度そのくらいの時期にグラフがボキッと折れてます。我ながら、ヤラセじゃないかと疑いたくなるぐらいに。
ツールによれば、“サイト内のページの平均読み込み時間は 0.7 秒です（更新: 2011/08/30）。”とのことですので、十分高速化はされていると言っていいでしょう。ちなみにカスタマイズ前は1.8秒とかその辺だった気がします。
また、このカスタマイズによる地味なメリットとして、『アクセシビリティ向上』と『検索エンジンからの下落』も一応あげておきます。両方とも大体文字通りの意味ですが、要は、個別ページへのアクセスが容易になったということ。ラベルページもアーカイブも、そのままだと本文がずらずらと続き、目的の個別ページになかなか辿り着けない。さらに、下手に文章量があるために検索エンジンへの評価が上がってしまい、個別ページの順位が下がるという悲しい結果にもなっていました。
今後はタイトル表示のみになり、閲覧する側にも分かりやすく、目的のページへのアクセスが楽になると思われます。アーカイブに至っては、共通点のない単なるリンクページとなるので検索エンジンからは圏外へ飛ばされるはず（笑）。
こうして書いてみると、結構メリットが多いですね。全部合わせたらそこそこサイトの評価は上がりそうな気がします。
登録:
投稿 (Atom)