OGPとは？何に使うの？重要なの？
言われると、あ～！なるほど～となります。例えば、当ブログのプライバシーポリシーのページをツイッターで共有しょうとした場合、アイキャッチ画像のようなウィンドウが開きます、中央に枠で囲まれている画像がある部分、そこがOGPと言う事です。
Facebook や他の SNS も同じように、WEB ページを共有すると、OGPが使われるようになります。
現状 SNS に限らず、各ブログテンプレートにも、SNSボタンが標準で付いていることもあり、大抵の場合は OGP の設定をしてあります。稀に設定が不充分な WEB ページもありますので、知識として先ず知って置くと、より良いサイト運営ができるようになります。
OGPとは何でしょう
OGP ＝ Open Graph Protocol、適切に設定する事で、SNSでシェアする際に、web ページのタイトルや、イメージ画像、詳細などを正しく伝える為の仕組みで、html 要素です。
Facebook が2010年4月に開催したF8開発者会議の中で、情報共有プラットフォームとして、この OGP を公開しました。Facebook OGP の場合、分析や解析に役立つ「ページインサイト」の機能を利用することが出来るようになります。
今や Twitter、Pintrest など、多くの SNS でこの OGP を使って、情報の共有と拡散手段を提供しています。
もし自分の WEB ページに OGP を設定していなかったら？SNS側が自動的に画像とテキストを無作為に選択するので、伝えたい WEB ページの内容が、正しくユーザーに伝えられない事になります。
OGPの基本的な設定方法
具体的には、head 要素に OGP 宣言する為の pre-fix 属性を追加し、また、<head>と</head>タグの間に、metaタグを記述します。記述内容は下記通りです。
上記の内、og:title、og:type、og:url、og:image は、設定が必須とされています。
実際の設定詳細は WEB ページの種類によって違ってきますので、更に詳しく知るためには、オリジナルサイトをご訪問下さい。今時ブラウザには翻訳機能がありますので、英語が出来ない人でも、機械翻訳である程度は理解できると思います。
日本のサイトでも、専門家による解説が多くあり、筆者にとって、最も全般的に把握し易かったのは、この記事です。
OGP 設定を確認する方法
Faebook のデバッガー（下記リンク）を利用すると良いでしょう。URL を入力しても「このURLはまだFacebookでシェアされていません」とメッセージが出た場合は、「新しい情報を取得」のボタンを押してください。
問題がある場合、一番上に「修正が必要な問題」として、呈示してくれますので、指摘された問題を修正して下さい。そうする事で、SNS による集客や WEB ページのクリック率の向上が期待できます。SEO 対策としても、メリットが大きい設定と思われます。
Blogger テンプレートにおける OPG 設定
筆者は Blogger によるサイト運営をしていますので、Blogger ユーザーの参考になればと思って、補足説明をしますと、Blogger テンプレートの<head>タグに OGP 宣言をしているものはあまり多くなかったので、自分のテンプレートを一度確認すると良いでしょう。
また、meta 記述は上記サンプルのように<head>タグのすぐ下に並んでいると思わないで下さい。<head>～</head>内の記述が大容量で、中には SNS ボタンの記述も含まれていて、大抵の場合は、SNS ボタンの記述あたりに OGPに関する<meta>記述があったりしますので、ご確認下さい。目印は「property＝'og:～'」です。
また、<head>部分の OGP 宣言は、上記サンプルの様に入力すればいいですが、meta 記述は少々面倒です。ブログのテンプレートのコードでページ url も image も個々に指定は出来ず、各記事から抽出しますので、必要なOGP関係コードは下記テキストボックスからコピーして、<head>～</head>の間に追加して下さい。
コメント
0 件のコメント :
コメントを投稿