• 締切済み

WordPressでFaceBookのOGP画像

【背景】 WordPressでホームページを作成しました。 FaceBookのアイコンを付けて、FaceBookに投稿できるようにしたのですが、下記のOGPの画像が意図通り表示されません。(本来はアイキャッチ画像に設定したIMG_2372.JPG-1.jpeg」を表示させたい) ホームページの該当投稿画面 http://airystudio.net/2016/05/01/2016-4-29-fri-%E3%80%8C%E6%B1%A0%E8%A2%8B%E5%95%86%E4%BA%BA%E3%81%BE%E3%81%A4%E3%82%8A%E3%80%8D%EF%BC%A0%E4%B8%AD%E6%B1%A0%E8%A2%8B%E5%85%AC%E5%9C%92/ 【自分で調査・実施してみたこと】 下記のFacebookデバックページで確認してみると「og:image」には複数の写真が表示されていました。また「The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.」というエラーが表示されてしまいます。 FaceBookデバックページ https://developers.facebook.com/tools/debug/og/object/ エラー表示よりソースコードに何か不備があるのかと思い、該当のページのソースを見てみましたが「og:image」というタグの記述はありませんでした。 FaceBookのキャッシュクリア、Postでのキャッシュクリアは実施済みですが解決しておりません。 【使用環境】  テーマStinger7  プラグイン All in On SEO(OGP画像にアイキャッチ画像がくるように設定済み)   JetPack 【質問】 1.本来ソースコードのメタタグの中に「og:image」の記述があるべきだと思われますが、なくてもよいのでしょうか。もしくは、表記が異なるだけで、ソースコード内に表示されていますでしょうか。 2. 1で「og:image」の記述がなくてもよい場合はFaceBook側は何をもとにOGP画像を設定しますでしょうか?(OGP画像の仕組みを知りたいです) 3.上記以外の原因で、OGP画像をアイキャッチ画像と同じ写真に設定できる方法はありますでしょうか? どうぞよろしくお願いいたします。

  • HTML
  • 回答数1
  • ありがとう数1

みんなの回答

  • hogusyaki
  • ベストアンサー率34% (26/76)
回答No.1

>1.本来ソースコードのメタタグの中に「og:image」の記述があるべきだと思われますが、なくてもよいのでしょうか。もしくは、表記が異なるだけで、ソースコード内に表示されていますでしょうか。 特定の画像を、Facebookで投稿される際の画像にしたい場合は、「og:image」を記述する必要があると思います。現状、該当のページに「og:image」の記述はなさそうです・・・。 >2. 1で「og:image」の記述がなくてもよい場合はFaceBook側は何をもとにOGP画像を設定しますでしょうか?(OGP画像の仕組みを知りたいです) おそらくですが、現在複数の写真がデバックページで確認できるように、ページ内の画像(おそらくはimgタグ)をFacebook側で自動的に抽出して、候補として設定しているのだと思います。 >3.上記以外の原因で、OGP画像をアイキャッチ画像と同じ写真に設定できる方法はありますでしょうか? おそらく「og:image」を明示的に指定しない限りは、同じ写真に設定できないのでは・・・と思います。

asanotosihiro
質問者

お礼

お礼が遅くなって申し訳ありません。ご回答ありがとうございました。 意図した写真を設定できないのはやっかいですね。「og:image」を明示的に記載したいと思います。ただ、更新者は妻なんですよね。できるかな~。

関連するQ&A

  • wordpressのサムネイルとアイキャッチ画像

    WordPressでホームページを作り始めて10日ほどの素人です。 ブログ形式にして、サイドバーウィジェットに新着記事を表示させるようにしていますが、その新着記事たちのサムネイルがNo Image と表示されてしまいます。 それぞれの記事の中には何枚も画像を貼っており、その中の一枚がサムネイルとして表示されるのだと思っていましたが、どうやら違うようです。 いろいろ調べたところ、アイキャッチ画像を設定すればNo Image ではなく画像が表示されるようになりました。 ところが、本文を開くとアイキャッチ画像がどうにも邪魔なのです。 大きすぎますし、本文の中の写真と被りますし。 私の希望としては、アイキャッチ画像を設定しないで、サムネイルだけ小さな画像が表示されるようにしたいのですが、可能なのでしょうか。 お知恵をお貸しください。 よろしくお願いします。

    • 締切済み
    • CSS
  • WORDPRESSのアイキャッチ画像が設定できない

    先日レンタルサーバを別のところに移転しました。 ドメインやSSL設定は済みです。移転前と同じです。 一点、全ページのアイキャッチ画像だけが表示されなくなりました。 インスペクタを見た限り404はありません。リンク切れではないようです。FTPで確認して、アップした画像は全て存在してました。記事の中の画像は全て表示されています。 新規記事や過去記事の編集画面に移動するとアイキャッチ画像が設定(表示)されていません。移転後に勝手にアイキャッチ画像だけがはずされているようです。そこでクリックしてメディアから画像を設定して更新を押しましたが、設定前の空のアイキャッチ画像の状態に戻されてしまいます。 どなたか原因わかりますか?

  • 会社のHPにFacebookのバナ-を貼りたい

    こんにちは。 私の会社のHPは、業者さんに頼んで作成してもらっています。 最近、会社のFacebookを作ったので、そのページのバナーをHPに貼ってもらいたくて業者さんに頼んだところ、「貼り付けるためのソースコードを送ってほしい」と言われました。 ソースコードはここから取得できるようですが、http://www.facebook.com/badges/ 何度やってもアイコン画像が表示されず、Facebookに問い合わせしようと思っています。 しかしFacebookのページにはお問い合わせのためのリンクなどありませんが、どちらに問い合わせしたらいいのでしょうか? 詳しい方いらっしゃいましたら、教えて頂ければ助かります。 よろしくお願いします。

  • 下記のサイトはWordPressでできていますか?

    下記のサイトはWordPressでできていますか? http://www.cetkarnataka.in/ http://www.cetkarnataka.in/sitemap/ http://www.cetkarnataka.in/%E7%9C%8B%E8%AD%B7%E5%B8%AB%E3%83%8F%E3%83%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%82%AF%E7%97%85%E9%99%A2%E5%8B%9F%E9%9B%86%E6%8E%A1%E7%94%A8%E6%B1%82%E4%BA%BA/%E6%9D%B1%E4%BA%AC%E9%83%BD/%E9%83%BD%E5%86%85%EF%BC%92%EF%BC%93%E5%8C%BA/

  • WordPressの質問(q1023581)の続

    回答が遅くなってしまい申し訳ありません… 確認画面で分からないところがあり、アドバイスお願い致します。 ➀アップロードされたファイルを表示画面と同じ大きさ(height: 350px; width: 528px;)で表示したい場合どうすれば良いでしょうか? HTML を書き換えるコードの画像サイズを変更しても変化がないためどうすべきか悩んでおります。 ➁名前と画像アイコンの表示順を逆にしたいのですが、bbs_quest_input.php の452行目の divNamaePartialParts.appendChild(usericonImg); と 455行目の divNamaePartialParts.appendChild(child); コードで順番を変更させる方法が分からず教えて頂きたいです。 上記とは別の疑問になるのですが、質問文、質問タイトル、名前それぞれ残り1文字入力可能な状態で制限がかかってしまいます。 これは以内というコードになっているからでしょうか?何が原因となっているのか分からずアドバイス頂きたいです。 ※現在のコード https://wandbox.org/permlink/piR82q0rnnWvVphI ※確認ページ表示画面 https://imgur.com/AucGqLf.png ※質問掲示板 http://www.irasuto.cfbx.jp/%e8%b3%aa%e5%95%8f%e6%8e%b2%e7%a4%ba%e6%9d%bf/

  • スクール水着のfacebook

    facebookにスクール水着のスク水倶楽部は知ってますか? https://m.facebook.com/pages/%E3%82%B9%E3%82%AF%E6%B0%B4%E5%80%B6%E6%A5%BD%E9%83%A8/1438736623040709?_rdr

  • 画像 重ねる

    htmlソース <div id="title"> <a href="index.html"><img src="img/logo.png"></a> </div> cssソース #title{ background-image: url(img.jpg); } cssソースに記述してある画像が、htmlソースのリンク付き画像の背景に表示されません。 対処方法をご教示いただけないでしょうか? よろしくお願いいたします。

    • ベストアンサー
    • CSS
  • WORDPRESSでFACEBOOKいいねボタンを

    WORDPRESS(無料版使用、ドメインのみ取得)でFACEBOOKの「いいね」ボタンを投稿につけたいと思い試行錯誤を重ねましたが、うまくいきません。いろいろググり、次の様に記述しましたのですが、狙い通りボタンが表示されません。 <タイトル>いいねボタンのテスト 以下投稿の本文 (HTMLというのでしょうか?) いいね <a href="https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID">https://www.facebook.com/plugins/like.php?href=https://brasileiro365.wordpress.com/?p=1438&preview=true&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=フェイスブックのID</a> 上記を保存してプレビューしますと、添付画像上部のスクリーンコピーのように表示されます。リンクされた文字の部分をクリックしますと新しくページが開かれ、「いいね」ボタンが下部のスクリーンコピーのように出てきます。 このボタンを投稿したページの下に表示したいのですが、どこが悪いのでしょうか。どのようにすれば、良いのでしょうか教えてください。

  • これらの画像のサムネイルをクリックしても違う画像(

    これらの画像のサムネイルをクリックしても違う画像(黒いTシャツの画像)が表示されてしまうのですがどうすればよいですか。 https://f.hatena.ne.jp/t/%E3%82%A6%E3%82%A7%E3%83%87%E3%82%A3%E3%83%B3%E3%82%B0%E3%83%89%E3%83%AC%E3%82%B9

  • この画像はどういった具材で書かれていますか?

    この画像はどういった具材で書かれていますか? 下記の2URLの画像。絵本なのですが、どういった具材というか、筆というか、絵の具というか、で描かれているでしょうか? ドオン http://www.amazon.co.jp/%E3%83%89%E3%82%AA%E3%83%B3-%E6%97%A5%E6%9C%AC%E5%82%91%E4%BD%9C%E7%B5%B5%E6%9C%AC%E3%82%B7%E3%83%AA%E3%83%BC%E3%82%BA-%E5%B1%B1%E4%B8%8B-%E6%B4%8B%E8%BC%94/dp/483401276X 注文の多い料理店 http://www.amazon.co.jp/%E6%B3%A8%E6%96%87%E3%81%AE%E5%A4%9A%E3%81%84%E6%96%99%E7%90%86%E5%BA%97-%E3%83%9F%E3%82%AD%E3%83%8F%E3%82%A6%E3%82%B9%E3%81%AE%E7%B5%B5%E6%9C%AC-%E5%AE%AE%E6%B2%A2-%E8%B3%A2%E6%B2%BB/dp/4895881067/ref=sr_1_3?s=books&ie=UTF8&qid=1286151371&sr=1-3 絵はほとんど描いたことがないので、どういった具材で描いているのかなと疑問に思いました。よろしくお願いします。

専門家に質問してみよう