ブログカードのURLに日本語があっても正しく表示出来る様になった

🔧 論旨

WordPressテーマ「Cocoon」のブロック一覧から「ブログカード」を選択し、日本語を含む外部サイトのURLを入力してプレビューすると、ブログカードにならずただのURL文字列が表示されてしまうことがあります。
原因はURLスラッグに日本語文字がそのまま含まれているためです。Webツールの 「URLエンコード」を使ってURL内の日本語部分をUTF-8のパーセントエンコーディング（%E3%82...）に変換して貼り直す ことで、正しいブログカードとして表示できるようになります。

※本記事は2020年9月当時、当ブログをWordPress（テーマ：Cocoon）で運用していた際の実機解決記録です（当サイト自体は現在Astroによる静的サイト環境へ移行済みです。その後のCocoonアップデートで日本語URLの扱いも改善されていますが、参照先サーバーの仕様や各種CMS・SNS等で日本語入りURLが正しく認識されない際の共通解決策として現在も有効です）。

🔧 対象となる方

WordPressテーマ「Cocoon」を使っていて、外部サイトのURLがブログカード化されない現象に困っている方
参照したいページのURL末尾（スラッグ）に日本語が含まれている方

日本語を含むURLがブログカード化されない現象

Cocoonでブロック一覧から「ブログカード」を選択し、外部ブログとして日本語を含むURL（例：.../products/クエン酸結晶/）を入れてプレビューすると、カードにならずURLがそのまま表示されてしまいました。

① ブログカードに日本語を含むURLを入力

② プレビューするとカード化されずURL文字列が表示される

解決策：日本語部分をUTF-8でURLエンコードする

開発元のCocoonフォーラム（Q&A）に、この件に関する原因と解決方法が載っていました。

参考：外部ブログカードで参照URLに日本語表記が入っているとブログカード化されない｜Cocoonフォーラム

要約すると、URLスラッグに日本語文字がそのまま入っているとカード取得処理が通らないため、URLの日本語部分をUTF-8でURLエンコード（変換） すれば解決します。

🔧 🔧 URLエンコードでブログカードを表示させる手順

① Web便利ツール URLエンコード(URL Encode)｜ツールタロウ を開く。

② URLに含まれている日本語の部分（例：クエン酸結晶）を入力欄に入れ、「エンコード」 をクリックする。

③ 出力されたURLエンコード結果（%E3%82%AF%E3%82%A8%E3%83%B3%E9%85%B8%E7%B5%90%E6%99%B6）をコピーする。

④ Cocoonのブログカードに入力したURLの「日本語部分」だけを、③のエンコード文字列に置き換える。

ブログカード内の クエン酸結晶 の部分を %E3%82%AF%E3%82%A8%E3%83%B3%E9%85%B8%E7%B5%90%E6%99%B6 に置き換えます。

置き換え前（日本語のまま）

置き換え後（URLエンコード済み）

プレビュー結果（正しくブログカードが表示された！）

なお、ブラウザのアドレスバーからURLをコピーしてテキストエディタ等に貼り付けると自動的に %E3... の形式になる場合もありますが、日本語のままコピーされてしまう環境ではこの手順で確実にブログカード化できます。

URLエンコード時の注意点と時短テクニック

🔧 🔗 変換ミス防止・機密保護とパーマリンク設計のコツ

https:// ごと丸ごと変換しない＆機密URLは外部ツールに入れない（安全） ：通常のURLエンコード欄にURL全体を入れて変換すると、先頭の https:// のコロン（:）やスラッシュ（/）まで %3A%2F%2F に変換されてリンクが機能しなくなります。必ず「パス内の日本語の部分だけ」を変換して置き換えましょう（※もしドメイン名自体が 〇〇.jp のような日本語ドメインの場合は、URLエンコードではなくPunycode［xn--...］への変換が必要です）。また、パスワード再設定用URLや限定公開トークン付きの非公開URLを無料の外部Webツールへ貼り付けるのは情報漏洩リスクがあるため、公開記事のURLのみに使用してください。
自分が書く記事のスラッグは最初から「半角英数字」にする（生産性） ：自分のブログで新規記事を書く際にURL末尾（スラッグ）を日本語のまま公開すると、SNSや他サイトで共有された際に長い %E3%82... 文字列になって見栄えが悪くなります。公開前にスラッグを短い半角英単語とハイフンに直しておくと、どの環境でも一発で綺麗にカード表示されます（なお、PCブラウザの開発者コンソールで new URL("日本語入りURL").href や encodeURI("日本語入りURL") を実行すれば、https:// を壊さず手元だけで安全に一発変換することも可能です。特に new URL(...).href なら日本語ドメインのPunycode変換とパス部分のUTF-8エンコードの両方に自動対応できます）。