こんにちは、はてなブログからWordPressに移行して5日目のNAEです。
どうやら、はてなブログユーザの方に貼ってもらったブログカード型のリンクで不具合が発生しているようです。
当ブログにも404エラーが大量発生しました。
その原因と、当ブログ側での対応について記録しておきます。
問題：はてなブログ製ブログカードの表示が崩れる#
当ブログへリンクを貼っていただいているはてなブログにおいて、ブログカードの表示崩れが起きているようです。
具体的には、本来であれば下記のカードのような形式で表示されるはずのブログカードが・・・
ブログタイトルにおすすめ！雰囲気たっぷりの英語Webフォント16選
下記のような、デッサンの崩れたハコのような表示になっています。
結果、リンクを貼っていただいている記事の見た目のクオリティにひどく影響しています。
それに加えて、当ブログ側においても404エラーが大量発生しました。（Search Consoleにて確認）
原因：はてなブログにおけるブログカードの実現方式#
この問題の直接の原因は、当ブログがWordPressに移転したことです。
しかしなぜ移転しただけでリンク元まで表示崩れを起こすのか・・・
調べてみたところ、はてなブログにおけるブログカードの実現方式に原因があるようです。
はてなブログのブログカードはiframeでできている#
はてなブログではiframeという仕組みでブログカードを作っています。
iframeとはWebページ内で別のWebページを読みこませる仕組みです。 詳しくは下記記事で解説しています。
「ブログカードは死ぬほどクリックされない」はウソ。Ptengineの仕様から見えた真実
さて、iframeでは「iframe内に読み込ませるページのURL」をsrcという属性値に指定するのですが・・・
はてなブログ製ブログカードの独特な仕様#
どうやらはてなブログでは、ブログカードでリンクするページによってiframeで読み込ませるURL（src属性）の形式が異なるようなんです。
- はてなブログ内のブログ：
src="ブログのドメイン/embed/[パス]" - はてなブログ以外の外部サイト：
src="//hatenablog-parts.com/embed?url=[表示するサイトのURL]"
要するに、はてなブログ内のブログカード用に/embed/という特殊なパスを持った専用のURLを準備しているんですね。
これが今回、悪さをしました。
WordPressに移行して起こったこと#
当ブログがはてなブログからWordPressに移転した事実を、はてなブログ側は（システム的に）把握できません。
そのため、リンク元のブログカードでは、当ブログの移転後もはてなブログ向けのURL形式（/embed/）を使い続けていたんです。
ところが、WordPressには/embed/というパスは存在しません。
そのためリンク元のはてなブログではずっと404エラー（そんなページ存在しないよエラー）が起きていたようです。
対応方法#
この問題の解消には2つのアプローチがあります。
- リンク元で正しいリンクに貼り直してもらう
- リンク先（当ブログ）でリダイレクトを設定する
前者については、Analyticsなどでリファラルがあるはてなブロガーさんに個別連絡が必要です。 ぼくは残置したはてなブログでお知らせ記事を作り、言及を飛ばして「可能であれば対応をお願いします」と連絡させていただきました。
後者については、301リダイレクトの設定を.htaccessに追記することで対応しました。詳細はこちらの記事に書いています。
はてなブログからのWordPress移行で必要な301リダイレクト設定一覧（.htaccess版）
まとめ：はてなブログからWordPress移行の際は301リダイレクトを忘れずに#
というわけで、はてなブログからWordPressに移行したら404エラーが大量発生した原因と対応方法でした。
WordPress移行に伴ってはてなブログ独特の機能のためのURLが変わるので、気をつけたいですね。
