縦横の短辺が600ピクセル以上の画像を「og:image」として定義すればサイトイメージに出来ます。
投稿記事内の画像を、サムネイルとするためにはアイキャッチ、記事内の最初の画像などと指定をします。
meta property="og:image" content="http://~以下画像のフルパス"
トピック投稿者
カラルド
(@uneiyou)
ご返答ありがとうございます。
縦横の短辺が600ピクセル以上の画像を「og:image」として定義すればサイトイメージに出来ます。
表示したい画像自体は、画像元々のサイズが300×396ピクセルで、添付ファイルの表示設定が227×300なのですが、どのようにしてog:imageとして定義するのでしょうか？
投稿記事内の画像をサムネイルとするためには、アイキャッチ、記事内の最初の画像などと指定をします。
meta property=”og:image” content=”http://~以下画像のフルパス”
上記は、ワードプレスでいうとどちらの画面で設定するのでしょうか？
サイトでの表示サイズではなくて「og:image」として定義する画像自体のサイズです。
小さいサイズの画像では拡大された時に汚くなります。理想としては800ピクセル四方以上で用意しなおしましょう。
メタタグを追記するだけでOGPを導入することができます。
基本的には<meta property=”何を指定するか” content=”どのように指定するか”>
例としては
og:type
ウェブページが何のページであるか（必須）
例：blog,article,website
og:title
ウェブページの名前（必須）
og:image
ウェブページのサムネイル（必須）
og:url
ウェブページの URL（必須）
og:description
ウェブページの説明
og:site_name
サイト名
og:emailまたはog:phone_number
連絡先
og:locality
場所
og:latitude,og:longitude
経度緯度での位置情報
例：37.416343,-122.153013
og:country-name
国名
太字の ogタグは必須です。
例えばカフェのウェブサイトでは、店名や位置情報を明記するとインターネット上で見つけやすくなります。
OGPの公式サイトは以下URLから
http://ogp.me/
トピック投稿者
カラルド
(@uneiyou)
ご返答ありがとうございます。
サイトでの表示サイズではなくて「og:image」として定義する画像自体のサイズです。
小さいサイズの画像では拡大された時に汚くなります。理想としては800ピクセル四方以上で用意しなおしましょう。
「og:image」として定義するとはどういう意味でしょうか？
なぜ、楽天ソーシャルニュースに投稿する画像をヘッダー画像からブログ記事内の画像に
変えたいだけなのに800ピクセル四方以上の画像である必要があるのでしょうか？
また、ブログ記事内の画像が、四方の合計長さが800ピクセル以上あればいいということでしょうか？
227×300だと、サイズは問題あるのでしょうか？
すいません、ワードプレスを初めて間もないものですから、HTMLの編集もよく分かっておらず、
「メタタグを追記するだけでOGPを導入することができます。」
をワードプレス設定のどちらの画面で編集すればいいのかわからないのですが、
どちらで設定すればいいのでしょうか？
上記の設定をすれば、楽天ソーシャルニュース投稿で、ヘッダー画像ではなく、ブログ記事内の画像を表示するようにできるのでしょうか？
2014年3月には画像には以下の制限がありました。
1．サイズが200×200ピクセル以上であること。推奨は1200ピクセル。
2．画像がPNGファイルでないこと（JPG、GIF)
楽天ソーシャルニュースではサイズの推奨はどうでしょうか？
OGPを導入するのは、楽天ソーシャルニュースを経由してフェースブック、ツイッターでシェアされたり、紹介されることが目的ではないでしょうか。
その意図がなくて、楽天ソーシャルニュースへの登録は必要なのでしょうか。
インターネットをテレビで利用出来るようになってきました。これから商品オーダーに結びつける為にはHD画質に変換するためには1200ピクセルは必要なのでしょう。
四方の合計ではなく、縦横の短辺が800ピクセルは目安です。
根拠はわたしのワードプレスサイトでは、短辺が800ピクセル以下の場合は記事に使っている画像ではなく、デフォルトで指定しているサイトの画像が表示されるようにしています。
uneiyou さんのケースで、ヘッダー画像になってしまうのはサイトで一番最初に見つかる大きな画像だからです。ヘッダー画像を削除すれば変化がでます。
ソーシャルメディア・SNSに欠かせないOGP設定ちゃんとやってますか？
トピック投稿者
カラルド
(@uneiyou)
ご返答ありがとうございます。
楽天ソーシャルニュースではサイズの推奨はどうでしょうか？
調べたのですが、ブログ記事についての画像の説明がなかったので、よく分かりませんでした。
OGPを導入するのは、楽天ソーシャルニュースを経由してフェースブック、ツイッターでシェアされたり、紹介されることが目的ではないでしょうか。
その意図がなくて、楽天ソーシャルニュースへの登録は必要なのでしょうか。
いえ、ワードプレスブログで、楽天ソーシャルニュースから被リンクをもらうのと、検索エンジンで、上位に食い込めるようにやっているのです。
uneiyou さんのケースで、ヘッダー画像になってしまうのはサイトで一番最初に見つかる大きな画像だからです。ヘッダー画像を削除すれば変化がでます。
一旦ヘッダー画像を削除して、ブログ記事を楽天ソーシャルニュースにアップしてみたら、ブログ記事画像が表示できましたが、そうすると、ヘッダー画像が何も掲載してない状態なので、また、ヘッダー画像を元通り設置しています。
ですので、下記のように
http://www.infact1.co.jp/staff_blog/webmarketing/2892/
私のブログ記事では、人物画像で、600×315まででかいサイズは必要がなく、
例えば、
http://image.search.yahoo.co.jp/search?ei=UTF-8&fr=top_ga1_sa&p=%E4%B8%89%E5%AE%85%E8%A3%95%E5%8F%B8
のような画像がワードプレス側の設定で縮小される状態（227×300）を
ブログ記事の一番最初に持ってきた場合のことを指しています。
この場合に、楽天ソーシャルニュースに投稿した際に本来はブログ記事の画像を掲載したい所を、ヘッダー画像を設定されないようにするにはワードプレスでどこを設定すればいいのでしょうか？
ご質問の前提部分であやふやな部分があるため、食い違いが起こっているようです。
一旦前提について整理してみましょう。
まず2つのサイト
・楽天ソーシャルニュース
・uneiyouさんご自身のWordpressサイト（以下、自サイト）
があり、自サイトで作成した記事を楽天ソーシャルニュースに対して投稿する。
その際に、楽天ソーシャルニュース側から、自サイトの記事の一番最初の画像を楽天ソーシャルニュースに表示するサムネイル画像として読み込んで欲しい。
というご質問でよろしいですか？
この場合、楽天ソーシャルニュースの仕様として、
「サムネイル画像につきましては、 各ページに設定されている「og:image」 の画像が表示される仕様となっております。 つきましては、投稿元サイトの構成について、 「og:image」 を記事固有の画像に設定いただきますようお願いいたします。」
とあるようですので、
自サイトの記事のソース上で
<head>と</head>の間に以下の記述があれば良いことになります。
<meta property="og:image" content="表示したい画像のURL">
以下のサイトにてアイキャッチ画像をog:imageに設定する手法が解説されていましたのでこちらを参考にされると良いかもしれません。
（なお、htmlに加えてphpをいじる必要があるため、書き換えは慎重に行うようにしてください。）
http://negimemo.net/1204
回答とは直接関係は無いですが、回答者の文章を引用して返信する場合は、その部分が引用であることがわかりやすいよう>や改行を使用すると読みやすくなりますよ。
>○○にすればオッケー
○○がわからないっすー
といった具合にするとグッドです。
堂々巡りになってませんか。
１）
楽天ソーシャルニュース事務局に問い合わせたところの返答が、
「サムネイル画像につきましては、 各ページに設定されている「og:image」 の画像が表示される仕様となっております。 つきましては、投稿元サイトの構成について、 「og:image」 を記事固有の画像に設定いただきますようお願いいたします。」
という返答があり、上記の設定の仕方がよくわからないのですが、
との疑問に、
投稿記事内の画像を、サムネイルとするためにはアイキャッチ、記事内の最初の画像などと指定をします。
meta property=”og:image” content=”http://~以下画像のフルパス”
と応えました。
OGPのタグについては、
OGPの公式サイトは以下URLから
http://ogp.me/
を、ご案内しました。
OGPの公式サイトに、記述例がありますよね。
それをuneiyouさんご自身のWordpressサイトにあうように設定すれば良いのです。
２）
いえ、ワードプレスブログで、楽天ソーシャルニュースから被リンクをもらうのと、検索エンジンで、上位に食い込めるようにやっているのです。
対象は楽天ソーシャルニュースでのみ上位に食い込めれば良いと解釈して良いですね。
楽天ソーシャルニュースから、他のユーザーがFacebook、Twitterなどで紹介することでGoogle検索からもヒットが有るように、推奨は1200ピクセル以上となっている理由です。
わたしは楽天ソーシャルニュースからの返事には、「og:image」 を記事固有の画像に設定することで、楽天ソーシャルニュースから外に情報が活用されることを勧められている意図を感じました。
確かに
人物画像で、600×315まででかいサイズは必要がない
事でしょうか？
uneiyou さんのブログ上では添付ファイルの表示設定が227×300でも良いでしょう。
画像元々のサイズが300×396ピクセルをヘッダー画像より大きいサイズで用意するだけなのですよ。
トピック投稿者
カラルド
(@uneiyou)
>mocomocoさん
>맹조さん
ご返答誠にありがとうございます。
>その際に、楽天ソーシャルニュース側から、自サイトの記事の一番最初の画像を楽天ソーシャルニュースに表示するサムネイル画像として読み込んで欲しい。
というご質問でよろしいですか？
その通りです。
http://negimemo.net/1204
を見ても簡単な説明~
から書かれていることの意味が分からず、よく分からないなのですが、
そもそも
>.自サイトの記事のソース上で
<head>と</head>の間に以下の記述があれば良いことになります。
<meta property=”og:image” content=”表示したい画像のURL”>
においてブログ記事作成画面のテキストモードから、<meta property=”og:image” content=”
をCtrl+Fをしてもみあたらないのですが、上記タグはどちらの設定画面にあるのでしょうか？
>맹조さん
画像元々のサイズが300×396ピクセルをヘッダー画像より大きいサイズで用意するだけなのですよ。
また、私の解決したい質問が、間違った解釈で伝わっている可能性があるようです。
<meta property=”og:image” content=”
をCtrl+Fをしてもみあたらないのですが、上記タグはどちらの設定画面にあるのでしょうか？
そもそも設定してないので見当たらないのは当然です。
タグの設定画面は、用意しないとダメです。で、ぐるぐる問答になりますね。
再度、OGPの公式サイトを提示します。
http://ogp.me/
それに、
http://negimemo.net/1204
の内容はとても解かりやすく手短に手順が紹介されていますね。
良い所を紹介してもらえて助かります。
色々加えると、理解が難しそうなのでこれぐらいで。
疑問は、ポイント絞ったほうが読解できるようですね。それに、WordPressに限ることではないのですけどね。
トピック投稿者
カラルド
(@uneiyou)
＞タグの設定画面は、用意しないとダメです。
タグの設定画面というのは、どちらにあるのでしょうか？
私自身HTML、CSS、PHPの知識は0なのですが、
勉強しなければすぐには解決できない内容なのでしょうか？
＞再度、OGPの公式サイトを提示します。
http://ogp.me/
また、上記サイトを翻訳して見たものの書いている内容自体意味がわからないのです。
今までの回答の内容はhtmlおよびphpの初歩的な知識がないと導入は難しいですね。
Wordpressを便利に使うには是非html, css, phpの勉強をおすすめしますが、
どうしてもそれらに触れずに実現したいという事でしたらプラグインを使用する方法もあります。
（ただし、今回のご質問の内容を実現するためだけには少し規模が大きいプラグインなので、サイトパフォーマンスへ少なからず影響する可能性があります。）
以下、手順を示します。
1.管理画面のプラグイン>新規追加から「All In One SEO Pack」を検索し、インストールします。
2.管理画面のAll in One SEO>Feature Managerから「Social Meta」の右下にある「Activate」をクリック。
3.管理画面のAll in One SEO>Social Metaから「Image Settings」の項目を探し、その中のSelect OG:Image Sourceの右側の「Default Image」となっている部分を「First Image In Content」に変更。
4.最後に「設定を更新」をクリックして完了です。
「All In One SEO Pack」は多機能なプラグインで、無用なモジュールを組み込むとサーバーのメモリーを常に消費して、サイトパフォーマンスを下げる結果にもなります。使いこなせて見合った効果を出すプラグインです。
今回、OGPを導入したいというだけなので、
uneiyouさんご自身のWordpressサイトにあうように設定すれば良いのです。
と、アドバイスしたのはご利用のテーマやプラグインの状態が明示されてないからです。
それに、WordPress自体に関することから離れてしまいます。
アドバイスではなく、指導がほしいということになりそう。
uneiyouさんが使用しているテーマに、header.php がありますから、その中に
<head>と</head>の間に以下の記述があれば良いことになります。
<meta property=”og:image” content=”表示したい画像のURL”>
「All In One SEO Pack」は、他のプラグインに同様な機能を持っているのが有ると停止するようメッセージしてきますし、いろいろサイトの使用状況を監視してます。
今日、明日の効果を目的としているわけでなければ、じっくり取り組みがいの有るプラグインです。
トピック投稿者
カラルド
(@uneiyou)
＞mocomocoさん
＞맹조さん
ご返答誠にありがとうございます。
どうやら、導入するには勉強が必要なようなので、そこだけを改善するために、勉強するのも億劫なので、画像を使わない方向で、記事を作成することも考えています。
また、このような場面に出くわした際には、プラグインの導入を検討することにします。
この度は、丁寧にご回答下さり、ありがとうございました。
