NHK公式サイトのtitleタグの中にbrタグが入っていた結果→ダサい

気になったFacebookで共有されていた記事の表示がこちらです。

ここ。

ダサい。

「CYBER SHOCK」と「サイバーショック」という、そっち系で格好つけた言葉の間に挟まった「<br>」。

これは見ていてつらい。

HTMLソースを見てみると、titleタグの中身はこうなっていました。

titleタグの中に、「<br>」タグが、文字実体参照に変換されたものが含まれてしまっています。

これは、シェアした際に、「<br>」と表示されてしまって当然です（OGPも設定されていません）。

ページ表示上のタイトル（h3）には、見た目を整えるためにbrが含まれています。

なので、自動的にそこがtitleタグに取り込まれてしまって（設定したものが共通化されて…）、かと思ったのですが、実際のh3には、brが2つありました。

というわけなので、この推測は間違いのようです。

他のページを見てみると。。。

実は、他の記事を見てみると、他の記事の表示上のタイトル（h3）にも改行が含まれていました。

しかし、titleタグにその改行は含まれておらず、やはりtitleとh3のタイトルとは、別々に設定されているようです（共通化されているなら、brが自動で取り除かれるはずだが、今回そうではない様子なので）。

手動でtitleにbrを入れてしまった？

となるとどうやらやはり、手動でbrタグをtitleタグの中身を入力するところに、不注意か、知らないのかで、突っ込んでしまい（コピー後の削除が不十分？）、その後多数の人の目に触れても直らないままになっているということのようです。

というわけで、「HTMLのタグの使い方が多少間違っていても『表示』上問題ないから大丈夫」と思っていても、実はtitleタグがこんなことになっていて、「共有されたときの『表示』がおかしい」というのはあるあるなので、「注意すべき『表示』は、共有したときの『表示』もあるよ」ということに注意しましょう。

ちなみに、本当に共有のことを考えるなら、「OGP」でぐぐって、そちらを使って共有したときの見た目を設定することをおすすめします。

もともとは、CYBER(サイバー)WARS(ウォーズ)だったみたいですね。。。（はてぶに残っていたタイトルを見る限り