回答:
このブログ投稿にはあなたの答えがあるようです:http :
//blog.capstrat.com/articles/facebook-share-thumbnail-image/
具体的には、次のようなタグを使用します。
<link rel="image_src"
type="image/jpeg"
href="http://www.domain.com/path/icon-facebook.gif" />
画像の名前は、例と同じである必要があります。
「プレビューの動作を確認する」をクリックします
注:タグは正しい場合がありますが、ドキュメントによれば、Facebookは24時間ごとにしかスクレイピングしません。Facebook Lintページを使用して、画像をFacebookに取り込みます。
Facebookの仕様から、次のようなコードを使用します。
<meta property="og:image" content="http://siim.lepisk.com/wp-content/uploads/2011/01/siim-blog-fb.png" />
出典:Facebookシェア
私のタグは正しかったが、Facebookのドキュメントによると、Facebookは24時間ごとにしかスクレイピングしない。Facebook Lintページを使用して画像をFacebookに取り込みました。
ここにURLを入力すると、FBがページのメタデータを更新します。
Facebookの用途og:tags
とオープングラフプロトコルにあなたのURLをプレビュー表示する情報解読するために、共有ダイアログ
やFacebookのニュースフィードに。
次のog:tags
ような情報が含まれています。
以下は、いくつかの例(facebookのドキュメントから取得)です。og:tags
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
の正しいマークアップを実装しog:tags
て値を設定したら、Facebookデバッガーを使用して、facebookがURLをどのように表示するかをテストできます。デバッガーツールはog:tags
、ページ上で検出された問題や不足している問題も強調表示します。
覚えておくべきことの1つは、facebook がこの情報に関していくつかのキャッシュを行うことです。そのため、変更を有効にするために、ドキュメントに記載されているように、ページがスクラップされません。
メタタグの編集
ページのタグを更新することで、ページの属性を更新できます。og:titleとog:typeは最初にのみ編集可能であることに注意してください。ページが50件のいいねを受信すると、タイトルが固定され、ページが10,000件のいいねを受信すると、タイプが固定されます。これらのプロパティは、既にページを気に入っている意外なユーザーを避けるために修正されています。これらの制限に達した後でタイトルまたはタイプのタグを変更しても何も起こりません。ページは元のタイトルとタイプを保持します。
変更をFacebookに反映するには、ページを強制的にスクラップする必要があります。ページの管理者が[いいね!]ボタンをクリックしたとき、またはURLが
Facebook URLリンターFacebookデバッガーに入力されたときに、ページがスクレイピングされます...
提供されたすべての回答が正しいことがわかります。ただし、見落とされた重要な詳細が1つあります。画像のサイズは少なくとも200 X 200ピクセルである必要があります。そうでない場合、Facebookはサムネイルをページ上の基準を満たす最初に利用可能な画像に置き換えます。別の事実は、最低限必要なのは、og:imageを有効にするためにFacebookが必要とする3つのメタを含めることです。
<meta property="og:title" content="Title of the page" />
<!-- NEXT LINE Even if page is dynamically generated and URL contains query parameters -->
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:image" content="http://convertaholics.com/convertaholics-og.png" />
Facebookデバッガーを使用してページをデバッグし、すべての警告を修正すると、魅力的に機能するはずです! https://developers.facebook.com/tools/debug
私は同じ問題を抱えていて、それを解決したと信じています。ここで説明したリンクメタタグを使用して、目的の画像をポイントしましたが、重要なのは、その場合、FBが他の画像を選択肢として取得しないことです。また、画像が大きすぎる場合は、選択肢がまったくありません。
これが私のサイトを修正した方法ですhttp://gnorml.com/blog/facebook-link-thumbnails/
これがどのように機能するかを次に示します。
共有している特定のWebページのHTMLにアクセスできる必要があります。共通のヘッダーファイルを使用すれば、サイト全体でも機能するでしょう。私はこれを試していませんが、うまくいくはずです。ただし、これを行うと、すべてのページで同じ画像が取得されます。
これらのHTMLメタタグをのページに追加する必要があります。に入れても動作しません。a)画像、b)説明、c)URL、およびd)タイトルごとに必ずカスタマイズしてください。
実際の例。
<meta property="og:image" content="http://www.coachesneedsocial.com/wp-content/uploads/2014/12/BannerWCircleImages-1.jpg" />
<meta property="og:description" content="Coaches share their secrets to success so you can rock 2015." />
<meta property="og:url"content="http://www.coachesneedsocial.com/coacheswisdomtelesummit/" />
<meta property="og:title" content="Coaches Wisdom Telesummit" />
https://developers.facebook.com/tools/debug/og/object/
Big Tip ..「引用符」がHTMLで同じであることを確認してください(2つの直線のマークのように見え、曲線がないように見える必要があります...プログラムによってこれらが別のフォントに変更され、コードが損なわれることがあります。
Facebookでの共有:画像、タイトル、テキストをカスタマイズして結果を改善する方法
上記のリンクから。最良の共有を実現するには、HTMLで3つのデータを提案する必要があります。
これは、HTMLの「head」タグ内に配置された次のように実行されます。
<title>INSERT POST TITLE</title>
<meta property=og:image content="http://site.com/YOUR_IMAGE.jpg"/>
<meta name=description content="INSERT YOUR SUMMARY TEXT"/>
Webサイトが静的HTMLの場合、HTMLエディターを使用してすべてのページでこれを行う必要があります。
DrupalのようなCMSを使用している場合は、その多くを自動化できます(上記のリンクを参照)。ワードプレスを使用している場合は、Drupalの例をガイドラインとして使用して、同様のことを実装できます。これらがお役に立てば幸いです。
最後に、いつでも共有の投稿を手動で編集できます。この例とイラストを参照してください。
先週作業していたサイトにも問題がありました。Likeボックスを実装して、Likeボックスをテストしました。次に、ヘッダーに画像を追加しました(ob:imageメタ)。それでも正しい画像がFacebookの通知に表示されませんでした。
私はすべてを試しましたが、いいねボタンのすべての実装がキャッシュされるという結論に達しました。たとえば、URL Aの[いいね!]ボタンをクロックし、ヘッダーで画像を指定し、URL Aの[ルーク]ボタンをもう一度クリックしてテストするとします。ページがキャッシュされているため、画像は表示されません。Bページの[いいね!]ボタンをクリックすると、画像が表示されます。
キャッシュをリセットするには、上記のlintデバッガーツールを使用して、キャッシュされているURLのすべてのURLを検証する必要があります。
Facebook Open GraphをすべてのJoomla記事に設定するために見つけた最も簡単な方法は、com_content / article / default.phpオーバーライドに次のコードを配置することでした。
$app = JFactory::getApplication();
$path = JURI::root();
$document = JFactory::getDocument();
$document->addCustomTag('<meta property="og:title" content="YOUR SITE TITLE" />');
$document->addCustomTag('<meta property="og:name" content="YOUR SITE NAME" />');
$document->addCustomTag('<meta property="og:description" content="YOUR SITE DESCRIPTION" />');
$document->addCustomTag('<meta property="og:site_name" content="YOUR SITE NAME" />');
if (isset($images->image_fulltext) and !empty($images->image_fulltext)) :
$document->addCustomTag('<meta property="og:image" content="'.$path.'<?php echo htmlspecialchars($images->image_fulltext); ?>" />');
else :
$document->addCustomTag('<meta property="og:image" content="'.$path.'images/logo.png" />');
endif;
これにより、現在の記事の詳細を含むmeta ogタグがヘッドに配置されます。