$hide=page-404-mobile

$type=carousel$columns=4$cat=hide$show=home

BloggerにFacebook Open Graphのメタデータを設定する方法

ウェッブサイトとブログの記事をSNSなどを利用して共有する場合に、Facebook Open Graphのメタタグは重要な役割を果たします。WordPressでは、特に意識しなくても、ほぼ標準でOpen Graphの設定が適切に行われるのですが、Bloggerの場合は状況が異なります。

Bloggerの標準で提供されるデフォルトテンプレートを含め多くのBloggerテンプレートではOpen Graphのサポートは十分ではないことがほとんどです。


Open Graphのメタデータが適切に設定されていないと、Facebookやその他のSNSでサイトのURLを添付しても、サイトやページの情報や画像などが適切に表示されないなどの不具合が発生します。


運営するサイトのOpen Graphのメタデータが適切に設定されているか確認するこことをお勧め致します。


[Facebook Open Graphのメタデータが適切に設定されているか確認する / ブロギングライフ ##external-link##]


[post_ads]

Blogger 標準テンプレートを使用したブログでのOpen Graphテスト結果

Bloggerの標準テンプレートを使用したブログのURLを入力して、Open Graphのデバッガーでテストしてみました。
テスト(デバッグ)を行うと、読み取ったメタデータの情報やプレビューが表示されます。
上の画像の赤枠部は、警告メッセージです。画像のメタタグの指定が適切に行われる必要があることとプロパティのメタデータが不足している警告が表示されています。

画像に関しては、メタデータが設定されていなくても、URL上の画像を拾って表示されることはありますが、適切な画像が表示されるとは限らないため、画像をメタタグで適切に指定する必要があります。


適切にOpen Graphが設定されている場合のテスト結果


警告は表示されず、プレビューでも適切に画像とタイトル、説明が表示されているのであれば、Open Graphの設定が適切に行われていることが分かります。
上の画像のような表示であれば、大丈夫です。

BloggerにFacebook Open Graphのメタデータを適切に設定する方法


テーマでOpen Graphの設定機能が用意されていない場合は、Open Graphの設定をマニュアルで行う必要があります。


Open Graph プロトコル Namespace の追加


1. Bloggerにログインして、メニューから[テーマ]のページを表示します。テーマのプレビュー画面の右下にある[HTMLの編集]を押します。




2.  テンプレートのソースコードが表示されます。

<html で始まるタグ(通常コードの最初の所にあります)を探し、クロージング(>)の前に、xmlns:og='http://ogp.me/ns# を入力します。



オブジェクトプロパティの追加


3. 以下のオブジェクトプロパティ設定コードにFacebook アプリID入手して最後の行(<meta content='xxxxxxxxxxxxxxx' property='fb:app_id'/>)の"xxxxxxxxxxxxxxx"部分に入力して、<head>タグ内に貼り付けます。

[<!-- Begin Open Graph metadata -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:blog.pageName' property='og:title'/>
<b:if cond='data:blog.postImageThumbnailUrl'>
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
</b:if>
<b:else/>
<meta expr:content='data:blog.title' property='og:title'/>
<meta content='website' property='og:type'/>
</b:if>
<meta expr:content='&quot;ja_JP&quot;' property='og:locale'/>
<meta expr:content='data:blog.canonicalUrl' property='og:url'/>
<meta content='xxxxxxxxxxxxxxx' property='fb:app_id'/>
<!-- End Open Graph metadata --> ]


Open Graphの設定コードは、Twitterカードの設定やAdSenseページ単位の広告コードなどと一緒にまとめて、</head>の直ぐ上に設置すると保守管理し易いのでお勧めです。

4.[テーマを保存]のボタンを押して、設定を保存します。

Open Graphの出力の確認


5. Open Graph が適切に設定されているか確認します

DebuggerのページでURLを入力しテストを行って、プレビューでも適切に画像とタイトル、説明が表示されれば、作業完了です。

コメント

関連記事とスポンサーリンク

名前

AdSense,4,Blogger SEO,10,Blogger 活用法,18,Bloggerの基本機能と使い方,9,Bloggerの基本設定,7,MagOne,3,SNS,4,お勧め記事,14,お知らせ,1,
ltr
item
Blogger101@ブロギングライフ : BloggerにFacebook Open Graphのメタデータを設定する方法
BloggerにFacebook Open Graphのメタデータを設定する方法
ウェッブサイトとブログの記事をSNSなどを利用して共有する場合に、Facebook Open Graphのメタタグは重要な役割を果たします。Blogger ブログでOpen Graphのメタデータを適切に出力させる設定方法を紹介します。
https://1.bp.blogspot.com/-mtBztg4iMpw/WmfAfiBJBwI/AAAAAAAAB5k/vO4UvkRAF7sUikcmkXwIYLXBIW3XJqK-wCK4BGAYYCw/s320/Open%2BGraph%2BDebug%2Bresult%2Bpage%2Bexample.png
https://1.bp.blogspot.com/-mtBztg4iMpw/WmfAfiBJBwI/AAAAAAAAB5k/vO4UvkRAF7sUikcmkXwIYLXBIW3XJqK-wCK4BGAYYCw/s72-c/Open%2BGraph%2BDebug%2Bresult%2Bpage%2Bexample.png
Blogger101@ブロギングライフ
https://blogger101.blogging-life.com/2018/02/bloggerfacebook-open-graph.html
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/
https://blogger101.blogging-life.com/2018/02/bloggerfacebook-open-graph.html
true
6719002676499593843
UTF-8
Loaded All Posts Not found any posts 全てを見る さらに読む Reply Cancel reply Delete By Home PAGES POSTS View All 関連記事 ラベル アーカイブ SEARCH ALL POSTS お探しのページが見つかりませんでした。 Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock コードを全てコピー コードを全ての選択 全てのコードをクリップボードにコピーしました Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy