楽天モバイルが「arrows We2」を一括1円で販売

Open Graph Protocol(通称:OGP)の設定方法 【wordpressサンプルあり】

シェアの内容を好きなように設定しよう


最終更新 [2014年7月15日]

この記事内には広告リンクが含まれています。

\\どうかフォローをお願いします…//


< この記事をシェア >

usedoor Twitterでシェア
usedoor facebookでシェア
usedoor はてなブックマークに保存
usedoor Pocketに保存
usedoor LINEでシェア
usedoor feedly


Wordpressをはじめ、ブログやサイトの記事・ページをfacebookやTwitterなどのSNSで共有してほしい時に設定しておいた方が絶対いいOpen Graph Protocol(通称:OGP)の設定方法とwordpressでのサンプルです。

usedoorのようにfacebookのシェアボタンやTwitterのつぶやくボタンなどを設置する場合はもはや必須と思われる項目です。

[関連記事]
FacebookのOGPキャッシュを削除する方法

こんな感じになりますよ

このOGPを適切に設定していることでfacebookのシェアボタンを押した際などに自分がシェアしてほしい内容をキレイにfacebookに通知することができちゃいます。

↑のfacebookの例ですと、https://usedoor.jp/howto/life/keitai/au-157-30000p-get/のページをシェアする際に「画像」「タイトル」「サブタイトル(説明文)」「サイトの情報」をOGPに設定しています。
もしusedoorにてOGP設定が適切に行われていないとタイトルと画像がぜんぜん違うものだったりしちゃう場合もあります。

facebookに限らず、このOpen Graph Protocol(通称:OGP)は全てのSNSにて共通基準となっています。


OGPの設定方法

なにやら難しそうなOGP設定ですが、設定方法はいたって超簡単です。

ヘッダー(head)内に指定の文字を書くだけ!

OGPの設定はヘッダーの中にある<head>~</head>の間にmeta要素を書いてやるだけでOKです。

OGPの内容は↓のようなものがあります。

og:type

サイトのタイプを記載します。
websiteやblogなどがあります。
usedoorは「website」に設定しています。

<meta property=”og:type” content=”website” />


og:title

タイトルを記載します。
usedoorは各エントリのタイトルをここに設定しています。

<meta property=”og:title” content=”Open Graph Protocol(通称:OGP)の設定方法 【wordpressサンプルあり】 &raquo 使い方・方法まとめサイト – usedoor” />


og:description

サブタイトル(説明文)を記載します。
usedoorは各エントリの見出し(抜粋)にしています。

<meta property=”og:description” content=”シェアの内容を好きなように設定しよう” />


og:url

ページのURLを記載します。

<meta property=”og:url” content=”https://usedoor.jp/howto/web/code/open-graph-protocol-setting/” />


og:site_name

サイト名を記載します。

<meta property=”og:site_name” content=”使い方・方法まとめサイト – usedoor” />


og:image

記事と一緒にシェアしたい画像のURLを記載します。
これは各SNSからアクセスできる画像の絶対パスとなり、facebookであれば200px×200px以上でないとはたらきません。

<meta property=”og:image” content=”https://usedoor.jp/wp-content/uploads/2013/10/au_30000p.jpg” />


OGPの主要な部分は↑な感じだと思います。
usedoorもここまでしか設定していません。

その他にも

og:email

連絡用メールアドレス

og:locality

場所

og:country-name



などといろいろと取り揃えられています。

WordPressでのOGP設定サンプル

usedoorで実際に設定しているOGPのWordpressサンプルです。

<meta property=”og:type” content=”website” />
<meta property=”og:title” content=”<?php echo trim(wp_title( ”, false)); ?>” />
<meta property=”og:description” content=”<?php echo strip_tags( get_the_excerpt() ); ?>” />
<meta property=”og:url” content=”<?php echo(“http://” . $_SERVER[“HTTP_HOST”] . $_SERVER[“REQUEST_URI”]); ?>” />
<meta property=”og:site_name” content=”使い方・方法まとめサイト – usedoor” />
<meta property=”og:image” content=”<?php echo wp_get_attachment_url( get_post_thumbnail_id() , ‘full’ ); ?>” />

適切なOpen Graph Protocol(通称:OGP)設定でキレイに記事をシェアしてもらいましょー!


[関連記事]
FacebookのOGPキャッシュを削除する方法

< この記事をシェア >

usedoor Twitterでシェア
usedoor facebookでシェア
usedoor はてなブックマークに保存
usedoor Pocketに保存
usedoor LINEでシェア
usedoor feedly



\\どうかフォローをお願いします…//



このOpen Graph Protocol(通称:OGP)の設定方法 【wordpressサンプルあり】の最終更新日は2014年7月15日です。
記事の内容に変化やご指摘がありましたら問い合わせフォームまたはusedoorのTwitterまたはusedoorのFacebookページよりご連絡ください。

現在開催中の「おトク」なキャンペーン、セール

ahamo、LINEMO、povoどれにする?開催中キャンペーンの特典と条件を比較してみた – キャッシュバックやポイント還元などまとめ

携帯電話

ドコモのahamo、ソフトバンクのLINEMO、auのpovo、。大容量低価格プランを今契約するならどこが一番おトクにキャンペーンで契約できる?を比較してみた

Amazonでd払い、dポイントを利用する方法&キャンペーンまとめ – 期間用途限定ポイントも使える

ショッピング

ドコモユーザーであればAmazonでd払いが使えるようになりました。ただし事前にdポイントの利用設定をしておく必要があるので注意!

【毎日5%~7%還元!!】Yahoo!ショッピング『PayPay支払いで毎日5%貯まる』キャンペーンでおトクに買い物する方法 – 条件などまとめ

キャンペーン

Yahoo!ショッピングで毎日5%還元となるキャンペーンが開催!プレミアム会員などは常時7%還元も。対象となる買い物の条件などまとめ

【裏技?】ahamoを契約して最大20,000dポイントをもらう方法 – ドコモSIMのみ契約⇒即ahamoへのプラン変更でポイントが付与された

携帯電話

ドコモのSIMを単体契約⇒即ahamoにプラン変更で最大20,000dポイントがもらえる!直接ahamoで契約するよりもかなりおトクに

【12円スマホ】ソフトバンク『新トクするサポート(バリュー)』の対象機種、適用条件などまとめ – iPhone 15が対象に⇒128GBモデルは月額1円で利用できる!

携帯電話

ソフトバンクの対象機種が1年間12円~で利用できる『新トクするサポート(バリュー)』の条件や対象機種まとめ。返却で激安でiPhone・Androidが使える!


開催中のキャンペーンをもっと見る

usedoorの新着記事をチェック!

記事を書くヤル気が出るのでフォローよろしくお願いしますm(._.)m

usedoor Twitter
usedoor facebook
usedoor feedly
usedoor RSS


新着ニュース&記事

Google Oneの年間プランが50%オフ、Google AI Proも対象!!

ニュース

Google Oneの年間プランが50%オフになるキャンペーンが開催!Google AI Pro(2TB)プランは29,000円/年⇒14,500円/年に。

【値下げ】ドコモの「iPhone 17 256GB」が2年間月額281円で利用(レンタル)できる

携帯電話

ドコモとahamoなら「iPhone 17 256GB」が2年間月額281円で利用(レンタル)できるぞ!2年後に返却すれば負担額は総額6,468円。条件はのりかえ(MNP)。

【2025年もサンタ追跡】Google サンタトラッカーでサンタクロースを追跡する方法 – 今年もサンタさんが来る!

Google

2025年版もスタート!今年もGoogleでサンタクロースを追跡できちゃう!サンタさんも大変な時代になったもんだ

【2025年版】クリスマスに使えるLINEスタンプまとめ100選+α – スタンプでクリスマスを祝う方法

LINE

友だちや家族にLINEスタンプを送ってクリスマスをみんなで一緒に祝おう!ちょっと寂しいクリぼっちスタンプもご紹介。。。

【2025年版】クリスマスに使えるLINE絵文字まとめ100選 – emojiでクリスマスを祝う方法

LINE

友だちや家族にLINE絵文字を送ってクリスマスをみんなで一緒に祝おう!


新着記事をもっと見る

usedoorをフォロー


注目・おすすめ記事

【裏技?】ahamoを契約して最大20,000dポイントをもらう方法 – ドコモSIMのみ契約⇒即ahamoへのプラン変更でポイントが付与された

ドコモのSIMを単体契約⇒即ahamoにプラン変更で最大20,000dポイントがもらえる!直接ahamoで契約するよりもかなりおトクに


【無償交換という神対応】Dysonの掃除機のバッテリーを交換する方法 – 2年の保証期間内ならまさかの無料!V8 Absoluteのバッテリーを交換してみた

Dysonの掃除機はバッテリーまで2年の保証対象内!掃除機復活でダイソンの手厚いサポートにマジで感動しました。


【iPhone】かかってきた電話に自動的に出る方法 – 通話ボタンを押さなくても自動で通話開始!運転中の着信などにマジ便利

Bluetoothヘッドセットを装着してクルマの運転中にiPhoneで通話をするという人にマジでオススメな自動的に電話を取る設定


クレジットカードなしで格安SIMと契約する方法 – 口座振替、引き落とし、デビットカード、その他決済に対応したMVNOまとめ

クレカなしでも契約できる、口座振替やポイント支払いに対応している格安SIM(MVNO)の会社とプランをまとめ&比較しました


アイサポでiPhoneのバッテリーを新品に交換してみた – 初期化は必要?価格や交換作業までの流れや手順。料金がちょっと安くなる各種割引も紹介

iPhone修理専門「アイサポ」でiPhoneのバッテリーを新品に交換してみた。Apple公式よりも安く交換できる。その他にも画面割れから水没まで幅広い修理に対応&安い!



注目の記事をぜんぶ見る


最新記事&ニュース

Google Oneの年間プランが50%オフ、Google AI Proも対象!!

Google Oneの年間プランが50%オフになるキャンペーンが開催!Google AI Pro(2TB)プランは29,000円/年⇒14,500円/年に。


【値下げ】ドコモの「iPhone 17 256GB」が2年間月額281円で利用(レンタル)できる

ドコモとahamoなら「iPhone 17 256GB」が2年間月額281円で利用(レンタル)できるぞ!2年後に返却すれば負担額は総額6,468円。条件はのりかえ(MNP)。


【2025年もサンタ追跡】Google サンタトラッカーでサンタクロースを追跡する方法 – 今年もサンタさんが来る!

2025年版もスタート!今年もGoogleでサンタクロースを追跡できちゃう!サンタさんも大変な時代になったもんだ


【2025年版】クリスマスに使えるLINEスタンプまとめ100選+α – スタンプでクリスマスを祝う方法

友だちや家族にLINEスタンプを送ってクリスマスをみんなで一緒に祝おう!ちょっと寂しいクリぼっちスタンプもご紹介。。。


【2025年版】クリスマスに使えるLINE絵文字まとめ100選 – emojiでクリスマスを祝う方法

友だちや家族にLINE絵文字を送ってクリスマスをみんなで一緒に祝おう!



最新記事をもっとチェック


usedoorをフォロー


現在開催中の"おトク"なセール、キャンペーン、お買い得アイテムまとめ

【楽天モバイル】スマホ料金チェック⇒回線契約で最大9,000ポイントがもらえるキャンペーン開催。診断だけで100ポイントも!特典、条件などまとめ

楽天モバイルがスマホ料金チェックを行ってから回線を契約するとのりかえで9,000ポイント、新規契約で5,000ポイントをプレゼントするキャンペーンを毎月開催


【紹介コードリンクあり】Amazonプライム会員に新規登録して1,000ポイントをゲットする方法 – 適用条件や紹介コードの発行/確認手順など

Amazonが新たにプライム会員になる人を対象に招待プログラムを開始。紹介コードリンクから登録して条件を満たせば1,000円分のAmazonポイントがもらえちゃう


ワイモバイルでおトクに機種変更できるスマホまとめ – moto g64y 5Gが一括6,800円など、Libero Flipが一括9,800円&PayPay還元など

現在ワイモバイルで機種変更でもおトクに購入できるスマホまとめ。機種変更割引&端末単体割引で機種変更でも激安購入できる機種アリ!


【楽天モバイル】三木谷氏の紹介キャンペーンで14,000ポイントをもらって回線を契約する方法。超おトクに契約できるけど注意点あり

楽天の社長、三木谷氏のRakuten最強プラン紹介キャンペーンを利用すればのりかえ契約で14,000ポイント、新規契約は11,000ポイントがもらえる!ただし、現在は特典付与は1人1回まで。


【紹介コードあり】Yahoo!フリマの「友達紹介キャンペーン」でPayPayポイント1,000円相当をゲットする方法(2025年9月)

Yahoo!フリマ(旧PayPayフリマ)を始めるなら「友達紹介キャンペーン」の紹介コード入力で1,000円分のPayPayポイントがもらえる。2025年9月30日まで



開催中のキャンペーンをぜんぶ見る