facebookにHAIKページのURLを投稿すると、そのページの冒頭画像がfacebookページに表示される。

その画像は・・・

1）アイキャッチのバックグランド画像
2）それがない場合はとにかくページで最初に現れる画像

すると、これらの画像はfacebookへの投稿を念頭に置いてデザインされるべき。

ところが、ページデザインと投稿用画像がデザイン的に両立しないことがある。

そこで結論としては Open Graph Protocol タグを #beforescript で強制的に書けば
自由に画像を指定できる。

必要なHAIKページの冒頭に以下を挿入

#beforescript{{
<meta property="og:image" content="facebookに表示したい画像のURL" />
}}

ただし、これを書くことはページのソース上では property="og:image"の二重定義になる。
（HAIK設定＞ソーシャル連携＞Open Graph Protocol タグを有効にする（ON）のとき）

これだと、自分で書き込んだ#beforescriptの内容が先に来て、規定値のオリジナル状態の物が後に来ることに
なっている。

どうやらfacebook側では先に定義された property="og:image を優先して取るようだ。

うみほしさん

情報ありがとうございます。

このあたりのこと、諸条件はどうでしょう？

例えば、HAIK側で・・・

テーマ編集の中でのアイキャッチ設定有無
各ページ専用の#eyecatch使用の有無

なお、私が提示している#beforescriptは、どのような画像でもそのURLを書けば
facebookの投稿にその画像をサムネールとして表示できると言うもの。投稿したい該
当ページ内にその画僧が貼り付けられている必要すらありません。

最近Facebookの仕様変更があったようです。
昨日，#beforescriptの記述のないブログのリンクをFacebookに貼り付けたところ，サムネイル画像が選べるようになっていました。
もちろん一発でサムネイルを拾ってくれないことも多いのですが，「画像を選べる」というのは大幅な進歩ですね。

トントンさん、詳細情報ありがとうございます。

【続き】

流れで投稿してしまいましたが、別のスレッドを立てるべきでしたね。

【続き】

１の"カード種類"は"summary"（QBlogのリスト表示のようなカード）または"summary_large_image"（QBlogのサムネイル表示のようなカード）のどちらかを記入
２の"@ユーザー名"はツイッターのアカウント名
１，２を"設定 > サイト情報の設定 > その他のタグ"に書き込みます。



これで設定完了です。TwitterでURLを書き込むと、自動でTwitterカードが挿入されます。

IFTTTやdlvr.itなどの自動連携ツールを使えば、QBlogの更新を自動でTwitterにカード付きで投稿できるようになりました。
https://twitter.com/kiyomi_tonton

情報ありがとうございます。

Twitterを検証しました。Twitterカードを使用する方法もできましたので、ご報告です。

【必要なheadタグ】
１．<meta name="twitter:card" content="カード種類" />
２．<meta name="twitter:site" content="@ユーザー名" />
３．<meta property="og:url" content="記事のURL" />
４．<meta property="og:title" content="記事のタイトル" />
５．<meta property="og:description" content="ディスクリプション" />
６．<meta property="og:image" content="画像のURL" />

３，４，６は、"設定 > ソーシャル連携 > Open Graph Protocol タグを有効にする”にチェックを入れればOK
５は、"Open Graph Protocol 設定 > サイトの説明”に記載するとディスクリプションが挿入されます。

ちょっとTwitterの方の裏技。

Twitterに画像付きページのURLを投稿すると、HAIKのデフォではページの
画像が小さいサムネール形式で表示。

この画像を大きい表示するには、以下の記述を「サイト情報の設定＞その他のタグ」に

<meta name="twitter:card" content="summary_large_image" />

これでHAIKのどのページも大きい画像で投稿されます。

ちなみに、個別ページのみに適用したい時は、そのページに#beforescriptで
前述の一行を追加。

うみほしさん

あのfacebookシェアデバッガーはどうもわからん時があります。
HAIKではないのですが、ある無料ブログの画像がシェデバッガーの表示と
実際の投稿がどうしても合わないままということも。

Facebookのシェアを試してみました。
シェアデバッガーで改めて情報を取り直すと，サムネイルが指定したとおりになりました！
これでサムネイルを指定したいときにはなんとかなりますね。

HAIK側のページのデザイン、使用している画像と、facebook、TwitterなどのSNSに投稿される画像
になぜこだわるかと言えば。

商用サイトの集客では、SNSに投稿される画像によって反応が全く異なることがわかっているからで
す。

良い反応を示す物はシェア、リツイートが多く起こりバズり易いのです。

Twitterの方も解決。
Twitter専用のOGPをそのページに無理やり書き込むだけ。

facebook、Twitter総合的には以下の通りに

#beforescript{{
<meta property="og:image" content="facebookに表示したい画像のURL" />
<meta name="twitter:image" content="Twitterに表示したい画像のURL" />
}}

1行目がfacebook他一般
2行目がTwitter専用

普通なら1行目のみでOKと思われるが、Twitterの方はなぜか専用行が必要な様子。

ちなみに、Twitterの方では一度投稿したページのサムネールをやり直すには以下のページへ行って画像取り直し。

https://cards-dev.twitter.com/validator

この方法は今の所Twitterの方はダメなようです。画像なしで投稿されてしまいます。
ううむ、です。

追記

facebookに投稿して一度表示されてしまった画像を他の物に変えたい時、
とりあえずHAIKの方をいじりますが、facebook側でも操作が必要。
それは簡単。

1）facebookの該当記事の「日時」をクリック
2）画面右上に「・・・」のマーク出現、それをクリック。
3）出てきたリストの最下部「シェアした添付ファイルを更新」を選択。

Twitterの方ではどうなのか、未検証。もしかしたらダメかもなので要注意。