【リアルタイム更新】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」に設定しています。


og:title

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


og:description

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


og:url

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


og:site_name

サイト名を記載します。


og:image

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


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

その他にも

og:email

連絡用メールアドレス

og:locality

場所

og:country-name



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

WordPressでのOGP設定サンプル

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

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


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


< この記事をシェア >




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

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


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




新着記事

【iPhone・iPad】通知は届いてないのにバイブが鳴る『ゴーストバイブ』が発生した時の対処方法 – パターン毎の原因切り分け方法

iPhone / iPad

呪い…?じゃありません。いろんなパターンがあるけどiOS純正メールアプリの通知設定が怪しい!

【本日開催】dポイント20倍+α!月イチのdショッピングデーでおトクに買い物する方法 – 毎月20日開催

セール

dポイント20倍&ポイント利用分20%還元&1日限りの限定アイテムあり!

「2018年ドコモ ディズニーカレンダー」を無料でGETする方法

ディズニー

まもなく配布開始!2018年度カレンダーの配布期間は11/20~です。欲しい人はドコモショップへGO!

【ドコモオンラインショップ】iPhone Xの入荷スケジュールを確認する方法

携帯電話

iPhone Xいつ入荷するの?予約受付日から入荷の目安が確認できるぞ~

【小ネタ】iOS 11からのAppStoreでアプリアップデート一覧画面でアプリの更新内容を全て表示する方法

iPhone / iPad

これ知らなかった。。アプリのアップデート内容をチェックしている人は知っておいて!な小ネタ


≫ 新着記事をもっと見る



usedoorTOPへ戻る

usedoorをフォロー


  • 注目の使い方

    どこに置いたかわからなくなったiPhoneを話しかけて見つける方法 – Hey Siri!どこにいるの?

    設定してれば見当たらないiPhoneに話しかけるだけで応答してくれるぞー


    【iPhone 7 / 6s / SE 値下げ】AppleStoreでiPhone旧モデルが値下げ!新旧価格比較まとめ – 安くiPhone旧モデルを購入する方法

    恒例の値下げキター!最大で11,000円の値下げです。旧モデルでもいいという人は必見です。


    注目の記事をぜんぶ見る

  • 最新記事

    【iPhone・iPad】通知は届いてないのにバイブが鳴る『ゴーストバイブ』が発生した時の対処方法 – パターン毎の原因切り分け方法

    呪い…?じゃありません。いろんなパターンがあるけどiOS純正メールアプリの通知設定が怪しい!


    【本日開催】dポイント20倍+α!月イチのdショッピングデーでおトクに買い物する方法 – 毎月20日開催

    dポイント20倍&ポイント利用分20%還元&1日限りの限定アイテムあり!


    「2018年ドコモ ディズニーカレンダー」を無料でGETする方法

    まもなく配布開始!2018年度カレンダーの配布期間は11/20~です。欲しい人はドコモショップへGO!


    【ドコモオンラインショップ】iPhone Xの入荷スケジュールを確認する方法

    iPhone Xいつ入荷するの?予約受付日から入荷の目安が確認できるぞ~


    【小ネタ】iOS 11からのAppStoreでアプリアップデート一覧画面でアプリの更新内容を全て表示する方法

    これ知らなかった。。アプリのアップデート内容をチェックしている人は知っておいて!な小ネタ


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

  • 人気記事ランキング

    【11月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    【11月版】のりかえでiPhone 7を買うならどこが安いか調べてみた! – ドコモ・au・ソフトバンクのiPhone 7料金比較・まとめ

    11月にiPhone7買うなら3キャリアどこが一番安い?MNPで購入した場合の料金を比較...


    ランキングを見る

  • 使い方 カテゴリー

    暮らし
    趣味
    節約・稼ぐ
    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をフォロー


  • あわせて読みたい記事