ブログ運営

rel=”noopener noreferrer”で文字化け?

ワードプレスに関する記事

死神くん
死神くん
あのね、突然あるページの内容が文字化けしたの。

色白おばけ
色白おばけ
ほんま、よートラブルなぁ。

死神くん
死神くん
ページの内容にアフィリエイトリンクを追加いて更新しただけ。

色白おばけ
色白おばけ
なんなんや、まったく。

rel=”noopener noreferrer”で文字化けが発生?

サイト内のページでアフィリエイトタグが普通の外部リンクのままになっている箇所を見つけました。

そこで、意図したアフィリエイトタグに置き換えることに。

それが”あだ”になってしまいました。

完全文字化け

WordPressサイトのページが突然文字化けしました。

しかもその1ページのみ。

アフィリエイトタグを追加して更新ボタンを押しただけ・・・表示確認するとページが文字化け。

でも記事のタイトルや、サイドバーの文字は正常に表示されていました。

色白おばけ
色白おばけ
さて困ったね。どうすべきか。

こういったことが起きた時は基本の「前にやった作業」を疑います。

なので、アフィリエイトタグを挿入した箇所をじっくり見ました。

・・・でも「これ」と言っておかしな箇所は見当たりません。

やったとは1行アフィリエイトタグを入れただけ。

削除してみても結果は変わらず。

色白おばけ
色白おばけ
こりゃ参ったね。

表示されたページを右クリックしてソースを表示させてみます。

すると記事の内容も文字化けせずに出力されている様子・・・では何が原因?

表示されているページのエンコーディングを「UTF-8」から「SJIS」や「自動判別」にしてみましたが、サイドバーなども文字化けし余計におかしくなるします。

色白おばけ
色白おばけ
もうこの記事すてるしかないかな・・・

ということで、記事の内容をコピー&ペーストで新規記事へ。
プレビューで確認すると・・・やっぱり文字化け・・・
色白おばけ
色白おばけ
なんで?

もうわけわかりません。

最終手段は細かくカット&ペースト

もう、手がないので、新規記事に全体から少しづつカット&ペーストしてプレビューで確認します。

色白おばけ
色白おばけ
OKやん。

色白おばけ
色白おばけ
おっ、OK。

色白おばけ
色白おばけ
ここも、OK。

色白おばけ
色白おばけ
あ、文字化け

ついに文字化けする箇所を見つけました。

それは自分で設定した外部リンクの行。

そこには

<a href="外部リンクのURL" target="_blank" rel="noopener noreferrer">サイト名</a>

とあります。

どう見ても普通の外部リンクです。でもこの行を消すと文字化け直るのです。

仕方がないので「rel=”noopener noreferrer”」の「noreferrer」を消してみました。

色白おばけ
色白おばけ
あ、ちゃんと表示できた。

この対応で元記事もちゃんと文字化けせずに表示できるようになりました。
色白おばけ
色白おばけ
でもなんで?原因は不明。

まとめ

これまで正常に表示ができていたので、不思議なのですが、「noreferrer」を消すだけで元に戻りました。
原因は不明のままですが。


なんだかわかりませんが、最近ツイてない気がします。