この記事はQiitaに投稿されたものの転載です。


Twitter cardsを設定するためにこちらの記事を参考にテンプレートを書いた。

Jekyll で作成したサイトを Twitter Card に対応させる

しかしこのまま使うとHTMLでエスケープすべき文字もそのまま埋め込まれてしまうため、うまく動かない時がある。

<meta name="twitter:title" content="JekyllでテキストをHTML用にエスケープする" />

具体例

たとえばこちらの記事のように、タイトルにセミコロンが入っていたりするとおかしくなる。

Jekyllのtheme”minima”のハンバーガーメニューがiOSで動作しないバグ

Screenshot from 2016-12-31 14-52-55.png

Screenshot from 2016-12-31 14-51-38.png

| escape

escapeフィルタをつければ大丈夫。

<meta name="twitter:title" content="JekyllでテキストをHTML用にエスケープする" />

Screenshot from 2016-12-31 15-31-44.png

Screenshot from 2016-12-31 15-37-09.png

でもちょっとタイトルが長すぎるかもしれない。