新潟県妙高市を拠点とする、ホームページと広告の相談相手

MENU [+]閉じる [×]
Facebook&TwitterのOGP設定サンプルコード【妙高Web屋のホントは公表したくないホームページ制作】

FacebookやTwitterなどのSNSを利用している皆さん。

お友達やフォローしている相手の投稿でときどき、外部のWebサイトのリンクをシェアしている方を見かけることはありますか(^^)?

「こういうサイトを見つけたよ!」

「このニュースについてこう思う」

という紹介文に加えて、そのページのタイトルや画像などが一緒に表示されることも多くあります。

あれを表示させるために必要な設定が、今回ご紹介する「OGP(オー・ジー・ピー)」と呼ばれる仕組みです( ^∀^)

この記事の目次

FacebookとTwitterのオススメOGP設定法

SNSはいくつもの種類がありますが、特にオススメするのはFacebook用とTwitter用の設定です。

WordPressのOGP設定用サンプルコード

まずはサンプルコードのご紹介から。

当サイト「妙高Web屋」で使用しているOGP設定用のコードです。

主要SNSとして、FacebookとTwitterの2つを意識した設定にしています。

カスタム投稿タイプ(ここでは例として「制作実績:result」)を持つ場合の分岐も設けました。

参考までにご覧ください。

<?php /*▼トップページの場合▼*/
if(is_home()): ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php bloginfo('url') ?>/" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:title" content="<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="<?php bloginfo('description'); ?>">

<?php /*▼カスタム投稿タイプ「制作実績」の個別投稿の場合▼*/
elseif(is_singular('result')): ?>
<? $myk_mainImg = get_field('myk_mainImg');if(!$myk_mainImg){$myk_mainImg = home_url().'/assets/images/catch.jpg';} ?>
<meta property="og:title" content="制作実績|<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo the_permalink();?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="制作実績[<?php the_title(); ?>]のご紹介&ご説明|<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:title" content="制作実績|<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="制作実績[<?php the_title(); ?>]のご紹介&ご説明|<?php bloginfo('name'); ?>">

<?php /*▼カスタム投稿タイプ「制作実績」のタクソノミー「制作実績カテゴリー」または「制作実績タグ」の場合▼*/
elseif(is_tax('result_cat') || is_tax('result_tag')): ?>
<?php $term_object = get_queried_object();$termSlug = $term_object->slug;$termName = $term_object->name; ?>
<meta property="og:title" content="制作実績|<?php echo $termName; ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<?php if(is_tax('result_cat')): ?>
<meta property="og:url" content="<?php bloginfo('url') ?>/result_cat/<?php echo $termSlug; ?>/" />
<?php else: ?>
<meta property="og:url" content="<?php bloginfo('url') ?>/result_tag/<?php echo $termSlug; ?>/" />
<?php endif; ?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="[<?php echo $termName; ?>]に関する制作実績の一覧|<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:title" content="制作実績|<?php echo $termName; ?>|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="[<?php echo $termName; ?>]に関する制作実績の一覧|<?php bloginfo('name'); ?>">

<?php /*▼カスタム投稿タイプ「制作実績」の場合▼*/
elseif(is_post_type_archive('result')): ?>
<meta property="og:title" content="制作実績|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php bloginfo('url') ?>/?post_type=result" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="制作実績のご紹介はこちらのページよりご覧いただけます!|<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:title" content="制作実績|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="制作実績のご紹介はこちらのページよりご覧いただけます!|<?php bloginfo('name'); ?>">

<?php /*▼デフォルトの「固定ページ」の場合▼*/
elseif(is_page()): ?>
<? $myk_mainImg = get_field('myk_mainImg');if(!$myk_mainImg){$myk_mainImg = home_url().'/assets/images/catch.jpg';} ?>
<meta property="og:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo the_permalink();?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<meta property="og:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="<?php bloginfo('name'); ?>「<?php the_title(); ?>」のページです。" />

<?php /*▼デフォルトの「投稿」の場合▼*/
elseif(is_single()): ?>
<? $myk_mainImg = get_field('myk_mainImg');if(!$myk_mainImg){$myk_mainImg = home_url().'/assets/images/catch.jpg';} ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo the_permalink();?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('name'); ?>の記事「<?php the_title(); ?>」です。" />
<meta property="og:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:image" content="<?php echo $myk_mainImg; ?>" />
<meta name="twitter:title" content="<?php the_title(); ?>|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="<?php bloginfo('name'); ?>の記事「<?php the_title(); ?>」です。" />
<?php endwhile; ?>

<?php /*▼デフォルトの「カテゴリー」に属する記事一覧ページの場合▼*/
elseif(is_category()): ?>
<?php $cat = get_the_category();$catid = $cat[0]->cat_ID;$getCatURL = get_category_link( $catid );$catName = $cat[0]->name;$catCnt = $cat[0]->category_count; ?>
<meta property="og:title" content="<?php echo $catName; ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo $getCatURL; ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="[<?php echo $catName; ?>]に関する記事をご紹介しています(全<?php echo $catCnt; ?>件)|<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:title" content="[<?php echo $catName; ?>]の記事一覧|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="[<?php echo $catName; ?>]に関する記事をご紹介しています(全<?php echo $catCnt; ?>件)|<?php bloginfo('name'); ?>">

<?php /*▼デフォルトの「タグ」に属する記事一覧ページの場合▼*/
elseif(is_tag()): ?>
<?php $tag = get_the_tags();$tagName = $tag[0]->name;$tagId = $tag[0]->term_id;$tagURL = get_tag_link($tagId);$tagCnt = $tag[0]->count; ?>
<meta property="og:title" content="<?php echo $tagName; ?>|<?php bloginfo('name'); ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $tagURL; ?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="[<?php echo $tagName; ?>]に関する記事をご紹介しています(全<?php echo $tagCnt; ?>件)|<?php bloginfo('name'); ?>" />
<meta property="og:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:image" content="<?php bloginfo('url') ?>/assets/images/catch.jpg" />
<meta name="twitter:title" content="<?php echo $tagName; ?>|<?php bloginfo('name'); ?>" />
<meta name="twitter:description" content="[<?php echo $tagName; ?>]に関する記事をご紹介しています(全<?php echo $tagCnt; ?>件)|<?php bloginfo('name'); ?>">

<?php /*▼上記いずれにも属さないページの場合▼*/
else: ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo the_permalink();?>" />
<meta property="og:site_name" content="<?php bloginfo('name'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php endif; ?>

<?php /*▼ページの種類に関わらず表示させるタグ▼*/?>
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@web_ya_kiyoshi" />
<meta name="twitter:domain" content="<?php bloginfo('url') ?>/" />
<meta name="twitter:creator" content="@web_ya_kiyoshi">
<?php /*▲ページの種類に関わらず表示させるタグ▲*/?>

必要な部分をコピーしていただいて結構です(^^)

ただし、WordPressのテーマファイルに活用される場合は、あらかじめ作業前のファイルのバックアップをおとりになった上で、自己責任のもとご利用ください。

分岐ごとのOGP設定の説明

上記のOGP設定に関して、分岐ごとの説明は後日更新予定です。

ご不便をおかけして申し訳ございません。

それぞれの分岐に記述したコードで、私の環境ではFacebook&Twitter両方のデバッガーで、意図した通りに表示されていることを確認済みです(^^)v

OGP設定の補足説明

上記のコードのみでも「一応」表示されます。

ただ、特にFacebookで万全を期す場合は「facebook for developers」というサイトから「新しいアプリを追加」という項目を選び、アプリIDと呼ばれる数値をコピーペーストする必要があります。

任意の場所、上記の例では「ページの種類に関わらず表示させるタグ」で良いでしょうね(^^)

こちらのコードを追加してください。

<meta property="fb:app_id" content="xxxxxxxxxxxxxxx" />

さらに、Facebookページをお持ちの場合は、そちらのURLも記載しておくと良いでしょう。

こちらも「ページの種類に関わらず表示させるタグ」で良いかと思いますが、追加しておいてください。

<meta property="article:publisher" content="https://www.facebook.com/xxxxxxx" />

以上が、妙高Web屋がオススメするWordPressサイトでのOGP設定です。

ページの先頭へ戻る

そもそもOGPとは?

さて、では「OGP」とは何でしょう??

OGPは「Open Graph Protocol(オープン・グラフ・プロトコル)」の略です。

SNS上でWebページの概要を伝える場合に用いられる仕組み・形式で、HTMLのmetaタグに値を設定することで、シェアされた時にSNSにその値を認識させることができます。

冒頭のサンプルコードでいうと、

「この値が、このページのタイトルを意味しています」

「このページがシェアされたとき、この画像を使ってください」

という設定をしていることになります。

ページの先頭へ戻る

なぜOGPの設定が必要なのか!?

さて。

では「なぜOGPの設定が必要なのか!?」です。

冒頭のサンプルコードのように設定することで、ページの内容に沿ったタイトルや画像を表示させることができます。

一方で、OGPの設定が無いと、ページの内容とは違った画像が表示される可能性や、そもそも画像自体表示されない場合もあります。

タイトルに関しても同様です。

OGPの設定をしないと、シェアしたページと異なるタイトルが表示される場合もあります。

それを避けるために、OGPの設定でページの内容に即したタイトルや画像、説明文を設定して、シェアされた時に適切な表示がされるようにしています。

もしもSNSでシェアした時の表示が、リンク先の内容とまったくバラバラだったら…?

リンク先のサイトの信頼性にも関わって、SNS上でクリックされなくなってしまう可能性もありますよね(^^;)

つまり!

シェアした時に表示される内容と、実際のページの内容との「整合性」をとって、求めている方々にページの内容を「適切に」届けること!

それが大切なのだと思います( ^∀^)

ページの先頭へ戻る

この記事の感想をお寄せください

[Facebook&TwitterのOGP設定サンプルコード【妙高Web屋のホントは公表したくないホームページ制作】]の感想を、下記のリンク先の「感想投稿フォーム」よりお気軽にお寄せください。
メールアドレスは不要です。

感想投稿フォームへ

いいね!と思っていただけたらSNSでシェアしてください♪

関連記事一覧:Facebook&TwitterのOGP設定サンプルコード【妙高Web屋のホントは公表したくないホームページ制作】

Copyright (C) 妙高Web屋 All Rights Reserved.

ページの先頭へ