【リアルタイム更新】iPhone Xの在庫状況をチェックする方法 - ドコモ・au・ソフトバンク

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





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

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

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

こんな感じになりますよ

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

↑のfacebookの例ですと、http://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="http://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="http://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の新着記事をチェック!

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


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




新着記事

【学割限定】1/28までソフトバンクのiPhone XとiPhone 8が2台セットで一括0円! – iPhoneを一括0円でGETする方法

キャンペーン

1台でもiPhone 8は一括0円+ キャッシュバック3.5万円!iPhone Xは分割購入でキャッシュバック5万円!

【Surface高性能マウス】Surface プレシジョン マウスの価格・発売日などまとめ – 予約・購入する方法

ガジェット

最大3つのデバイスで利用できる、マイクロソフトの高性能Surfaceブランドマウス!

「リラックマ ぶらさげぬいぐるみ」nanacoトークン(ICチップ)を予約・ゲットする方法

ポイントカード

nanacoカードがリラックマのぬいぐるみになった!プレミア化する可能性高いです。欲しい人は早めに予約しましょう!

【1/26まで】Chromecastをお得に購入・GETする方法

ショッピング

「楽天スーパーDEAL 15%ポイントバック」キャンペーン実施中!さらに動画クーポンも2枚貰えます。


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    TVer(ティーバー)をテレビの大画面で視聴する方法

    ChromeCastなどには正式対応してないけど、テレビなどの大画面に出力することはできる!


    【1月版】格安SIM(MVNO)料金徹底比較・まとめ! – 最安の格安SIMを調べる方法

    BIGLOBEモバイルとNifMoで最大2万円キャッシュバックキャンペーン実施中!今、契約するなら一番おトクな格安SIMは?


    【最新版】iPhone・iPadのバッテリー持ちを改善する方法、節約設定まとめ – iOS 11電池持ちがヒドい。。

    iOSのいろんなところの設定を見直せば電池消耗は抑えられる。自分の環境でできる範囲でどうぞ!


    ApplePayでSuicaをiPhoneに取り込んで登録する方法 – カードは使えなくなるのでご注意を

    WalletアプリからSuicaが登録できない不具合発生中。。せっかくのApplePayが。。


    注目の記事をぜんぶ見る

  • 最新記事

    【ドコモ機種変更クーポン】『V30+ L-01K』が5,400円割引になるドコモオンラインショップ限定割引クーポンをusedoor読者にプレゼント!

    ドコモの「V30+ L-01K」に機種変更する際に使える当サイト限定の割引クーポンをプレゼント!


    【学割限定】1/28までソフトバンクのiPhone XとiPhone 8が2台セットで一括0円! – iPhoneを一括0円でGETする方法

    1台でもiPhone 8は一括0円+ キャッシュバック3.5万円!iPhone Xは分割購入でキャッシュバック5万円!


    【Surface高性能マウス】Surface プレシジョン マウスの価格・発売日などまとめ – 予約・購入する方法

    最大3つのデバイスで利用できる、マイクロソフトの高性能Surfaceブランドマウス!


    「リラックマ ぶらさげぬいぐるみ」nanacoトークン(ICチップ)を予約・ゲットする方法

    nanacoカードがリラックマのぬいぐるみになった!プレミア化する可能性高いです。欲しい人は早めに予約しましょう!


    【1/26まで】Chromecastをお得に購入・GETする方法

    「楽天スーパーDEAL 15%ポイントバック」キャンペーン実施中!さらに動画クーポンも2枚貰えます。


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

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    WEB
    デジタル
  • キーワード

    Amazon Android apple au Chrome iOS iOS 8 iPad iPhone iPhone 6 iPhone 6 Plus iPhone 6s iPhone 6s Plus iPhone 7 iPhone X iPhoneおトク Kindle MNP PC SIMフリー SoftBank Windows windows 10 オトク キャッシュバック クーポン スタンプ スマートフォン セキュリティ ソフトバンク タブレット ドコモ ドコモオトク ドコモオンラインショップ レビュー ワイモバイル 写真 削除 動画 新規契約 機種変更 注目・ピックアップ 無料 登録 非表示
  • usedoorをフォロー


  • あわせて読みたい記事