楽天モバイルが「OPPO A3 5G」を一括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ページよりご連絡ください。

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

ワイモバイルを通常よりおトクに契約する方法 – SIMのみで26,000円相当還元!!

キャンペーン

ワイモバイルオンラインストアでワイモバイルのSIMカードを契約すると最大26,000円相当の還元がもらえる!

【紹介コードあり】「Oliveアカウント紹介プログラム」で1,000円相当のVポイントをゲットする方法

銀行

紹介コードを入力してエントリーすると紹介した人・紹介された人それぞれに1,000円相当のVポイントが貰える「Oliveアカウント紹介プログラム」。

ahamoのキャンペーンまとめ – SIMのみ契約で20,000dポイント還元、ポイ活、ahaクエストなど

携帯電話

ahamoと新規契約でdポイントがもらえたり、既存ユーザーでも対象の開催中のキャンペーンをまとめてみました。ドコモSIM経由のちょっと裏技っぽいおトクな契約方法も

【紹介コードあり】みんなの銀行アプリで口座開設して最大1,000円をゲットする方法

銀行

紹介コードを入力して口座開設すると、紹介する人・紹介された人それぞれに現金500円が貰える「お友だち紹介プログラム」キャンペーン開催中!「新規口座開設限定!サービス体験プログラム」にも参加して合計1,000円ゲット!

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

キャンペーン

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


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

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

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

usedoor Twitter
usedoor facebook
usedoor feedly
usedoor RSS


新着ニュース&記事

【LINE】無料スタンプ&隠しスタンプまとめ(2026年6月23日更新)ダウンロード方法&取得条件

LINE

現在配布されているLINEの無料スタンプ&隠しスタンプを徹底まとめ!スタンプを無料ゲットできる条件や取得するまでの手順、有効期限など

【最大20,000dポイント】運試しに。ドキドキキーワードあみだくじでdポイントをゲットする方法 – 毎週火曜日更新。今週のキーワードは?

キャンペーン

超簡単に参加できるクジ。当たればラッキー!dアカウント+ポイントカード持っている人は是非!今週のキーワードも紹介しています

【2026年6月】『エディオン スペシャルセール』でおトクに買い物する方法 – 激安商品も!楽天市場店の不定期開催セールにログインする手順(旧:闇市)

セール

エディオン楽天市場店で不定期開催される『スペシャルセール(旧:エディオン闇市)』には価格.com最安値クラスの商品が登場することも!

【2026年6月】楽天市場『お買い物マラソン』でおトクに買い物する方法 – 買い回りでポイントアップのコツやクーポン、スロット、間違い探し、注意点などまとめ

ショッピング

楽天市場の買いまわりポイントアップの祭典『お買い物マラソン』に参加してみた。最大付与ポイントをゲットするまでの手順を紹介

【2026年も登場】LINEのトーク上に「父の日」背景を表示させる方法&表示されない場合の対処方法【お父さんに感謝のメッセージ】

LINE

LINEのトーク画面の背景にブラウンが黄色い花を持ってお父さんに感謝を伝える隠し背景が今年も登場!2026年の隠しワードは「父の日」以外にも複数あることを確認


新着記事をもっと見る

usedoorをフォロー


注目・おすすめ記事

【UQモバイル】のりかえ時にクーポンを適用して20,000円分のau PAY残高をもらう方法 – 買い物不要&クーポンコードあり。実際に申込してみた

UQ mobileにSIMのみでのりかえ契約するなら絶対にコレ!買い物不要で20,000円分のau PAY残高が還元されるスペシャルクーポンを使ってみた


【Android】メルペイをiDとしてスマホに追加&実際の支払い方法 – おサイフケータイへ登録すればメルカリの売上金やポイントがそのまま使える!あと払いもアリ

メルペイをAndroidのおサイフケータイにiDとして設定してみた!優先支払い&暗証番号の設定も含めてセットアップと支払い時の使い方を解説


【通信障害対策に】サブ回線としての契約がオススメのキャリア・格安SIMまとめ – 月額料金は抑えつつ予備としてどうぞ。eSIM、デュアルSIMなど

時々発生するキャリアの通信障害… 障害発生中は電話・ネットが繋がらない。。を避けるために持っておくのがオススメのサブ回線をまとめてみた


【LINE】無料スタンプ&隠しスタンプまとめ(2026年6月23日更新)ダウンロード方法&取得条件

現在配布されているLINEの無料スタンプ&隠しスタンプを徹底まとめ!スタンプを無料ゲットできる条件や取得するまでの手順、有効期限など



注目の記事をぜんぶ見る


最新記事&ニュース

【LINE】無料スタンプ&隠しスタンプまとめ(2026年6月23日更新)ダウンロード方法&取得条件

現在配布されているLINEの無料スタンプ&隠しスタンプを徹底まとめ!スタンプを無料ゲットできる条件や取得するまでの手順、有効期限など


【最大20,000dポイント】運試しに。ドキドキキーワードあみだくじでdポイントをゲットする方法 – 毎週火曜日更新。今週のキーワードは?

超簡単に参加できるクジ。当たればラッキー!dアカウント+ポイントカード持っている人は是非!今週のキーワードも紹介しています


【2026年6月】『エディオン スペシャルセール』でおトクに買い物する方法 – 激安商品も!楽天市場店の不定期開催セールにログインする手順(旧:闇市)

エディオン楽天市場店で不定期開催される『スペシャルセール(旧:エディオン闇市)』には価格.com最安値クラスの商品が登場することも!


【2026年6月】楽天市場『お買い物マラソン』でおトクに買い物する方法 – 買い回りでポイントアップのコツやクーポン、スロット、間違い探し、注意点などまとめ

楽天市場の買いまわりポイントアップの祭典『お買い物マラソン』に参加してみた。最大付与ポイントをゲットするまでの手順を紹介


【2026年も登場】LINEのトーク上に「父の日」背景を表示させる方法&表示されない場合の対処方法【お父さんに感謝のメッセージ】

LINEのトーク画面の背景にブラウンが黄色い花を持ってお父さんに感謝を伝える隠し背景が今年も登場!2026年の隠しワードは「父の日」以外にも複数あることを確認



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


usedoorをフォロー


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

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

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


【最大5,000円相当が無料でもらえる】Yahooショッピング、PayPayモールで買い物して「ウェルカムギフト」をもらう方法 – 対象となる条件などまとめ

はじめてまたは久々にYahooショッピング、PayPayモールで買い物する人は5,000円相当の商品が詰まったウェルカムギフトがもらえる!


Amazonの音楽聴き放題「Music Unlimited」をおトクに登録する方法 – 入会キャンペーンまとめ

Amazonの音楽聞き放題サービス「Music Unlimited」が3ヵ月無料で利用できる激アツのプライム感謝祭連動キャンペーン開催中!4月6日(月)まで


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

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


【紹介リンクあり】JCBカードの『お友達紹介キャンペーン』でもれなく1,500円分のキャッシュバックをもらって入会する方法

JCBカード入会時に友だち紹介のリンクから申し込むともれなく1,500円分のキャッシュバックがもらえる『お友達紹介キャンペーン』開催。紹介リンクあり



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