はてなブログからWordPressへの移行後に404エラーが大量発生

こんにちは、はてなブログからWordPressに移行して5日目のNAEです。

どうやら、はてなブログユーザの方に貼ってもらったブログカード型のリンクで不具合が発生しているようです。

当ブログにも404エラーが大量発生しました。

その原因と、当ブログ側での対応について記録しておきます。

問題：はてなブログ製ブログカードの表示が崩れる

当ブログへリンクを貼っていただいているはてなブログにおいて、ブログカードの表示崩れが起きているようです。

具体的には、本来であれば下記のカードのような形式で表示されるはずのブログカードが・・・

下記のような、デッサンの崩れたハコのような表示になっています。

結果、リンクを貼っていただいている記事の見た目のクオリティにひどく影響しています。

それに加えて、当ブログ側においても404エラーが大量発生しました。（Search Consoleにて確認）

この問題の直接の原因は、当ブログがWordPressに移転したことです。

しかしなぜ移転しただけでリンク元まで表示崩れを起こすのか・・・

調べてみたところ、はてなブログにおけるブログカードの実現方式に原因があるようです。

はてなブログではiframeという仕組みでブログカードを作っています。

iframeとはWebページ内で別のWebページを読みこませる仕組みです。
詳しくは下記記事で解説しています。

さて、iframeでは「iframe内に読み込ませるページのURL」をsrcという属性値に指定するのですが・・・

どうやらはてなブログでは、ブログカードでリンクするページによってiframeで読み込ませるURL（src属性）の形式が異なるようなんです。

要するに、はてなブログ内のブログカード用に/embed/という特殊なパスを持った専用のURLを準備しているんですね。

これが今回、悪さをしました。

当ブログがはてなブログからWordPressに移転した事実を、はてなブログ側は（システム的に）把握できません。

そのため、リンク元のブログカードでは、当ブログの移転後もはてなブログ向けのURL形式（/embed/）を使い続けていたんです。

ところが、WordPressには/embed/というパスは存在しません。

そのためリンク元のはてなブログではずっと404エラー（そんなページ存在しないよエラー）が起きていたようです。

この問題の解消には2つのアプローチがあります。

前者については、Analyticsなどでリファラルがあるはてなブロガーさんに個別連絡が必要です。
ぼくは残置したはてなブログでお知らせ記事を作り、言及を飛ばして「可能であれば対応をお願いします」と連絡させていただきました。

後者については、301リダイレクトの設定を.htaccessに追記することで対応しました。詳細はこちらの記事に書いています。

というわけで、はてなブログからWordPressに移行したら404エラーが大量発生した原因と対応方法でした。

WordPress移行に伴ってはてなブログ独特の機能のためのURLが変わるので、気をつけたいですね。