noteとの連携

　突然ですが、noteを始めました。

　別にWordPressから撤退しようというのではないのです。柳なりに、少しは「ひとさまに読んでもらう努力」というやつをしてみようかなと思った次第。note上に当サイトのリンクを張って、記事を読んで貰った上で千柳亭春宵の書くものに興味を持って貰えたなら、あわよくばご来訪願おうという心算ですね。まあ、お題企画などすこし毛色の変わったものを書いてやろうという企みもあるのですが。

　そんなわけで、プロフィールページにリンクを作成してみたのでした。

　結果、千柳亭書房本館や本稿「WordPressで小説サイト！」のリンクはそこそこ見栄えのマトモなブログカードとして表示させることができたのですが、どういうわけか画房だけがアイキャッチ画像を拾って貰えないという現象が起きました。

　こんな具合です。（スクショなのでリンクは張ってません）

　ここまではよかったのですが…

　さて、こういうときにはコパイロット先生。
　人間がモノ考えなくなるんじゃないかとか一抹の恐怖はあるのですが、便利さには勝てません。

noteでURLの埋め込みを行ったときに、アイキャッチ画像を指定しているのにリンクに画像が現れないのは何故ですか？

　コパイロット先生の仰るには…

HTMLのメタタグ設定に問題がある

og:imageというメタタグが正しく設定されていないと、プレビュー画像が表示されません。
対処：HTMLの内に以下のようなタグがあるか確認してください。

　成程。
　画房のトップページのHTMLを出力し、目を皿のようにして読んでみましたが上記のようなmetaタグは見当たりませんでした。しかしなんで画房だけ？と考えたとき、ひとつの違いに気づきました。テーマです。
　本館や「WordPressで小説サイト」「天からキャベツが降ってきた！」はCocoonを使用しているのですが、画房は公式テーマであるTwenty Twenty-Fourなのです。引っ掛かってるとすればこれだな、と思って次にこう尋ねてみました。

テーマの関係でしょうか？Cocoonを使用しているサイトは画像つきで表示されるのに、Twenty-Twenty-Fourを使用している上記サイトのみ表示されないのですが

なるほど、テーマによる違いという視点は非常に鋭いです。実際、WordPressテーマがog:imageなどのメタタグを自動生成するかどうかは、リンク埋め込み時のアイキャッチ画像表示に大きく影響します。

　なんと、結局そこですか。
　仕方ない、解決策はというと…

SEO系プラグインを導入する

例：All in One SEO、Yoast SEOなど
これらはタグを自動生成してくれます。

　うーむ、できたらプラグインは増やしたくないなと…

functions.phpにOGPタグを追加する

自力でテーマにOGPタグを追加する方法もあります。以下は簡易的な例です：

註）見栄え上スクショしましたが、一応データも置いておきます。

function add_ogp_tags() {
  if (is_single()) {
    global $post;
    $image = get_the_post_thumbnail_url($post->ID, 'full');
    echo '<meta property="og:image" content="' . esc_url($image) . '" />';
  }
}
add_action('wp_head', 'add_ogp_tags');

　まあ、できんこたないけど…そうですか、やっぱりfunctions.phpですか。今更怖がってられませんが勇気は要りますよ、一応。

CocoonなどOGP対応済みテーマに切り替える

最も簡単で確実な方法です。

　全く以てその通りなんだけど、身も蓋もないですな。

　柳としては2.functions.phpにOGPタグを追加する　を選択したいところ。
　ただまぁ、手数が多ければ失敗する確率も跳ね上がるので、一応確認するための手順も教えて貰いました。

OGPタグ追加後に行うべき作業一覧

✅ 1. アイキャッチ画像の設定

WordPressの投稿にアイキャッチ画像（Featured Image）を必ず設定してください。
get_the_post_thumbnail_url()はこの画像を参照するため、未設定だとOGPタグが空になります。

✅ 2. metaタグの出力確認

投稿ページを開いて、ブラウザで「ページのソースを表示」し、以下のように画像URLが正しく出力されていればOKです。

✅ 3. キャッシュのクリア

キャッシュ系プラグイン（例：W3 Total Cache、WP Super Cache）を使っている場合は、キャッシュをクリアしてください。
古いHTMLが残っていると、OGPタグが反映されません。

✅ 4. noteやSNSでの表示確認

noteにURLを再埋め込みして、画像が表示されるか確認します。

　以上の手順を踏みまして、ようやく無事に画房もサムネ入りリンクを付けることができました。

　お客さん、増えるといいなぁ。

追記。

画房のトップページは投稿でなく固定ページになっているので、実際には以下のように変更を加えています。

function add_og_image_tag() {
if (is_single() || is_page()) {

※黄色線部、投稿（single）と固定ページ（page）でog_image_tagを挿入するよ、という意味。

それと、Twenty Twenty-Fourだとそもそもwp_headが機能していない可能性があるというコワい指摘があったために、やはりfunctions.phpに以下のようなコードを付加してwp_headが機能しているかの確認をするという業ワザも伝授していただきましたのでメモしておきます。

add_action('wp_head', 'add_og_image_tag'); 
function test_wp_head_output() { echo "<!-- wp_head() is working -->\n"; } 
add_action('wp_head', 'test_wp_head_output');

これでトップページのソース、＜head＞内に
<!– wp_head() is working –>
が表示されていれば、wp_head()は機能しているという確認が可能とのこと。
　実際、このコードで上記コメントが差し込まれたのを確認しました。最終的に、サムネも表示されたので間違っちゃいなかったようです。（基準はソコ…結局、柳の理解なんてそんなもんです）

　いわゆるブロックテーマは、今までのテーマで当然とされていたことが通用しない、というのがままあるようです。ご用心、ご用心。