OGPとはWebサイトの内容をSNS上でシェアするための仕組みです。
「OGPタグを設定すると何かいいらしい」といった曖昧な形で認識されていることも多く、「なぜOGPタグを設定しなければならないかはわからない」という話も聞きます。
どのような項目をどこに記述すればいいのかがわからなかったり、シェアされた際のサムネイルとなるOGP画像のサイズが適切でないためにぼやけてしまうなどの経験のある人は多いのではないでしょうか。
初めてサイトやブログをみるSNSユーザーに、OGPの設定ミスでマイナスイメージを与えないように、今回はOGP設定で大切なポイントをお伝えします。
OGP（Open Graph Protcol)のメリット！
OGPとはWebサイトの内容をSNS上でシェアするための仕組みです。
OGPにはWebの記事がSNSにシェアされた際に表示する情報を記述しておく必要があります。
Webサイトの記事やページをSNSでシェアされることは、新しいユーザーを獲得するきっかけになります。
OGPタグとは
OGPタグはWebサイトの記事をSNSでシェア（共有）した場合にどのように表示されるかを設定するタグです。
記事のURLをTwitterやFacebookでシェアした場合やLINEでURLを送った際に表示される「サムネイル画像」、「タイトル」、「説明文」といった項目を設定することができます。
OGPのメリットは？
インフルエンサーによる記事の共有により「バズ」る仕組みに、SNSが大きく関与しているのはご存じのとおりです。また、SNSやメッセージアプリで送られてきたURLに、興味の湧くサムネイル画像や説明文がついていて、ついクリックしてしまったという経験は、誰もが覚えのあることでしょう。
OGPの設定により、Webサイトの管理者はSNSでのシェア時などの表示のされ方をコントロールすることができます。Webサイトを制作したからには出来るだけ多くの人に見てもらいたいですね。その手段の一つとして、OGPを設定して、多くの人が興味を持つシェア時の表示を実現するのは、Webサイト運営上とても重要です。
ちなみにOGPを設定していない場合は、SNSなどで自動的に説明文などが設定されます。
OGPの設定・確認方法！メリット！Wordpress！
テーマ編集からfunctions.phpに追加
/
OGP設定
*/
function my_meta_ogp()
{
if (is_front_page() || is_home() || is_singular()) {
/初期設定/
// 画像 （アイキャッチ画像が無い時に使用する代替画像URL）
$ogp_image = ‘画像URL’;
// Twitterのアカウント名 (@xxx)
$twitter_site = ‘@Twitterアカウント名’;
// Twitterカードの種類（summary_large_image または summary を指定）
$twitter_card = ‘summary_large_image’;
// Facebook APP ID
$facebook_app_id = ”;
/初期設定 ここまで/
global $post;
$ogp_title = ”;
$ogp_description = ”;
$ogp_url = ”;
$html = ”;
if (is_singular()) {
// 記事＆固定ページ
setup_postdata($post);
$ogp_title = $post->post_title;
$ogp_description = mb_substr(get_the_excerpt(), 0, 100);
$ogp_url = get_permalink();
wp_reset_postdata();
} elseif (is_front_page() || is_home()) {
// トップページ
$ogp_title = get_bloginfo(‘name’);
$ogp_description = get_bloginfo(‘description’);
$ogp_url = home_url();
}
// og:type
$ogp_type = (is_front_page() || is_home()) ? ‘website’ : ‘article’;
// og:image
if (is_singular() && has_post_thumbnail()) {
$ps_thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), ‘full’);
$ogp_image = $ps_thumb[0];
}
// 出力するOGPタグをまとめる
$html = “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
$html .= ” . “\n”;
if ($facebook_app_id != “”) {
$html .= ” . “\n”;
}
echo $html;
}
}
// headタグ内にOGPを出力する
add_action(‘wp_head’, ‘my_meta_ogp’);
OG（Open Graph Protcol)タグ
- og:title – トップページの場合はサイト名、投稿または固定ページの場合はページのタイトルで大丈夫かと思います。
- og:description – ページのディスクリプションを記述します。
- og:type – 「
website」もしくは「article」にします。 - og:url – ページのパーマリンクを指定します。
- og:image – アイキャッチのURLを指定します。
- og:site_name – サイト名にします。
- og:locale – 日本語「ja_JP」にします。
- fb:app_id – Facebook の開発者 ID
- twitter:card –
summaryまたはsummary_large_imageにします。 - twitter:site – Twitterアカウント名
OGPアイキャッチが表示されない場合の解決方法
下記の作業をやってできませんか？
- Cocoon設定・高速化にあるチェックを外す。
- ヘッダーの圧縮系プラグインを停止してご確認いただけたら。
- Twitter・FB・Lineなどに反映されない場合は、それぞれのキャッシュを削除する
- サーバーやプラグインのキャッシュで変更が反映しないなどもチェックしてもらったらと思います
- OGPタグが正しく設定されていない
- 「og:image」のパス、ファイル名が間違っている
- FacebookもしくはTwitter側のキャッシュ
- ページURLとサイト名が繋がっている
- OGP画像とTwitterカードに関するプラグインが重複している
- 適切なサイズの画像を選択していない
- 画像を選択していない
OGPの設定の確認をする方法
OGPが正しく設定されているか確認することができるシステムがあります。ページ公開後でないと確認することができません。ただ、URLを入力するだけで簡単にチェックすることができるので、確認やデバッグに使用するといいでしょう。
OGP確認ツール
OGP確認ツール がございます。
ラッコツールズ OGP確認
URLを入力すると、Facebook、Twitter、はてなブックマーク、LINEでのそれぞれの見え方を確認することができるツールです。未公開のページの場合は、画像、タイトル、説明文を入力して確認することもできます。
まとめ
OGPがしっかりと設定されていないWebサイトはSNSからのアクセスしてもらうチャンスを減らし、機会損失が大きいです。そのページに合った内容でOGPを作成するようにしましょう。
WordPressを使ってWebサイトを構築することがおすすめです。
WordPressは、投稿や固定ページを作成すれば、自動的にOGP用のタグが出力されるため、わざわざ時間をかけて設定する必要がありません。
関連記事:
ブログカードの表示されない原因は？SEO効果！画像サイズの表示方法！アイキャッチやサムネイル
robots.txt(ロボッツテキスト)とは？書き方？確認して無い場合は？テスター・チェッカーは必要か？読み方
noindexタグとは？書き方や使い方！iframe noindex？SEO効果は？
『Google Indexing API』とは？googleにインデックスさせるため使い方・導入方法 ！【登録する・高速化】
【URL Inspection API】Google URL検査ツールとは？全データをAPI経由で取得可能
cocoonでURLを正規化（Canonicalタグ）する方法・対応！SEO効果！カノニカル！
コメント