【最速予約で発売日ゲット】iPhone 16、Pro、Pro Max、Plusの各ショップ・キャリアの販売/予約受付ページまとめ - ドコモ、au、ソフトバンク、楽天モバイル、Amazon、家電量販店、代理店、正規取扱店

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ページよりご連絡ください。

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

【割引クーポンあり】Dropbox Plus(有料版)をおトクに購入する方法 – ソースネクストの3年以上複数年版がコスパよし!最安値保証&返金あり

Dropbox

公式は値上げ…Dropbox Plus(有料版)を安く利用したいならソースネクストの3年版が超お買い得!期間限定割引や限定割引クーポンなどまとめ

【2024年9月】ドコモのiPhone、Androidスマホが機種変更で5,500円割引となるクーポンをWEB上からゲットする方法 – 対象機種、条件など

携帯電話

2024年9月もドコモがiPhoneやAndroidスマホの機種変更が5,500円割引となるクーポンをウェブ上で配布中!対象者限定みたいのでまずは取得できるかをチェック!

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

キャンペーン

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

【2024年9月】ソースネクストの割引クーポンまとめ – 現在配布中の最新クーポンやキャンペーンを製品別にまとめてみた

ショッピング

ソースネクストの割引クーポンを総まとめ!公式から一覧情報を頂いているので全てのクーポンがチェックできます。Dropboxや1Password、ZEROセキュリティetc...と多数配布中!

【2024年9月】「メルペイ」のクーポン&キャンペーンまとめ – クーポンは人によって違うので来ない場合も… メルカードキャンペーンもあり

キャンペーン

メルカリが提供するスマホコード支払「メルペイ」は定期的におトクなキャンペーンを開催&クーポンを配布!人によって違うクーポンを徹底的にまとめてみた


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

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

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

usedoor Twitter
usedoor facebook
usedoor feedly
usedoor RSS


新着ニュース&記事

【土日開催!!】Amazonで週末にポイント2倍『土曜日曜ダブルポイント』でおトクに買い物する方法 – 対象商品、参加条件などまとめ

ショッピング

Amazonで週末に対象商品購入でダブルポイントとなるキャンペーンを開催。今回は1回で7,000円以上の商品購入が対象。Anker製品などもあり

【土日配布!!】Yahoo!オークション『ゴールドクーポン』をゲットする方法 – 9月の週末は誰でも旧ヤフオクでクーポンを使っておトクに買い物できる!

ショッピング

Yahoo!オークション(旧:ヤフオク)では週末土日にゴールドクーポン配布中!誰でも買い物金額に応じた割引が受けられる!

【iPhone】ゲームモードをオフ・無効化する方法 – iOS 18から利用できるゲームアプリ起動時に自動的にオンとなるゲームモードとは?

iPhone / iPad

iOS 18以降のiPhoneはゲームモードが利用できる。フレームレート安定や遅延軽減などゲームプレイに特化したモード。不要な場合はオフ・無効化もできる

【2024年9月】Amazon「ファッションタイムセール祭り」の特典など内容まとめ – 同時開催のポイントアップキャンペーンは全商品対象で10%還元!

セール

Amazonが『Fashion×秋のお出かけタイムセール祭り』を9月20日~24日に開催!同時開催のポイントアップキャンペーンは全商品対象&ファッションアイテム+5%還元

【iPhone】iOS 18以降で写真/動画を編集する方法 – 写真アプリの「編集」ボタンがなくなった… アイコンに変更された新しい編集ボタンはコレ

iPhone / iPad

iOS 18で写真アプリが大幅アップデート。これまであった写真や動画の「編集」ボタンが変更になっているので注意(最初、編集できなくなったのかと思ったぜ…)


新着記事をもっと見る

usedoorをフォロー


注目・おすすめ記事

【マジ便利】LINEで自分一人の『ぼっちグループ』の作り方、有効活用方法 – LINEが自分専用のメモ&クラウドストレージみたいになって超便利

「ぼっち」といっても寂しい訳じゃないんです。LINEは一人でも有効活用できるという小ワザ。もちろん無料


【激安!!】ワイモバイルの「タイムセール」でスマホを激安で購入、SIMのみ契約でキャッシュバックをゲットする方法 – 現在登場中の機種と価格、条件まとめ

ワイモバイルオンラインストアのタイムセールでOPPO Reno7Aやソフトバンク認定中古品のiPhoneが特価で販売中!


【2024年9月】ドコモのiPhone、Androidスマホが機種変更で5,500円割引となるクーポンをWEB上からゲットする方法 – 対象機種、条件など

2024年9月もドコモがiPhoneやAndroidスマホの機種変更が5,500円割引となるクーポンをウェブ上で配布中!対象者限定みたいのでまずは取得できるかをチェック!


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

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


【楽天モバイル】2回線目以降を契約して3,000ポイントをゲットする方法 – 「もう1回線」申込キャンペーンがスタート

楽天モバイルが2回線目以降を契約する人向けのキャンペーンを開始!2回線目契約で3,000ポイントがもらえる。要エントリーなのでご注意を



注目の記事をぜんぶ見る


最新記事&ニュース

【土日開催!!】Amazonで週末にポイント2倍『土曜日曜ダブルポイント』でおトクに買い物する方法 – 対象商品、参加条件などまとめ

Amazonで週末に対象商品購入でダブルポイントとなるキャンペーンを開催。今回は1回で7,000円以上の商品購入が対象。Anker製品などもあり


【土日配布!!】Yahoo!オークション『ゴールドクーポン』をゲットする方法 – 9月の週末は誰でも旧ヤフオクでクーポンを使っておトクに買い物できる!

Yahoo!オークション(旧:ヤフオク)では週末土日にゴールドクーポン配布中!誰でも買い物金額に応じた割引が受けられる!


【iPhone】ゲームモードをオフ・無効化する方法 – iOS 18から利用できるゲームアプリ起動時に自動的にオンとなるゲームモードとは?

iOS 18以降のiPhoneはゲームモードが利用できる。フレームレート安定や遅延軽減などゲームプレイに特化したモード。不要な場合はオフ・無効化もできる


【2024年9月】Amazon「ファッションタイムセール祭り」の特典など内容まとめ – 同時開催のポイントアップキャンペーンは全商品対象で10%還元!

Amazonが『Fashion×秋のお出かけタイムセール祭り』を9月20日~24日に開催!同時開催のポイントアップキャンペーンは全商品対象&ファッションアイテム+5%還元


【iPhone】iOS 18以降で写真/動画を編集する方法 – 写真アプリの「編集」ボタンがなくなった… アイコンに変更された新しい編集ボタンはコレ

iOS 18で写真アプリが大幅アップデート。これまであった写真や動画の「編集」ボタンが変更になっているので注意(最初、編集できなくなったのかと思ったぜ…)



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


usedoorをフォロー


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

【2024年9月】ドコモのiPhone、Androidスマホが機種変更で5,500円割引となるクーポンをWEB上からゲットする方法 – 対象機種、条件など

2024年9月もドコモがiPhoneやAndroidスマホの機種変更が5,500円割引となるクーポンをウェブ上で配布中!対象者限定みたいのでまずは取得できるかをチェック!


【2024年9月】楽天モバイル「紹介キャンペーン」で楽天ポイントをゲットする方法 – 招待リンクあり。適用条件や注意点などまとめ

楽天モバイルが友だち紹介キャンペーンを実施中。2024年2月より招待された人の特典が爆増!今ならのりかえ契約で13,000ポイントがもらえる。今月の条件や注意点などまとめ


【楽天モバイル】2回線目以降を契約して3,000ポイントをゲットする方法 – 「もう1回線」申込キャンペーンがスタート

楽天モバイルが2回線目以降を契約する人向けのキャンペーンを開始!2回線目契約で3,000ポイントがもらえる。要エントリーなのでご注意を


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

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


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

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



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