SlackのURL展開条件おさらい
前回、Qiitaの記事がSlackで展開されない理由を調べ、
og:descriptionにHTMLタグが混じるとプレビューが展開されないという事実が判明しました。
SlackのURL展開にはOGP用に設定されたメタデータが利用されます。
具体的には<meta property="og:description" value="hogehoge">というタグが必要です。
（他にog:titleやog:imageも使われますが、og:descrptionだけでも存在すれば展開はされるようです）
Qiitaの場合は、本文の先頭117文字がog:descriptionに採用されるため、
ここにHTMLタグを含ませると、og:descriptionにもHTMLタグが含まれる状態となってしまいます。
こうなるとslackで展開されない記事になってしまう、というのが前回の記事での結論でした。
slack側でのパースがうまくいってないってことですかね。
※HTMLタグというよりも、<が含まれているとアウトで、>だけであればセーフのようです。
また、特殊文字にエンコードされていてもダメです。
展開されないページ
こちらのURL。
Windows 10 / Windows Server 2016 の Windows Update 後の自動再起動の制御方法
https://blogs.technet.microsoft.com/jpwsus/2018/02/08/manage-reboot/
ソースを見ると、ちゃんとog:descriptionが設定されてます。
また、内容にも、>は含まれているものの、<は含まれていません。
ちゃんと展開されるように見えますが、このURLをslackに張り付けても、展開されません。
調査
元ページの<meta property="og:description">を空のページにコピペして試してみると・・・展開されます。
しかし、<head>～</head>をコピペしてみると・・・展開されません。
うーむ・・・<head>の中に原因がありそうです。
内容を少しずつ減らしたりもとに戻したりしながら調べてみたところ、
以下の<div>タグが<head>内に含まれているのを見つけました。
<div id='msccBanner' dir='ltr'>（省略）</div>
これはアヤシイ！
原因
HTMLでは、いくつかの閉じタグは省略することができます。
</head>も省略可能です。
前述のページのソースコードには、<div>の後ちゃんと</head>が出てきます。
しかし本来、<div>は<head>内に含めることはできません。
slack側のHTMLパーサがHTMLを解析する際、<div>が来た時点で<head>の終わりと判断され、
その後の<meta>が認識されなかった（<head>の中ではないので無視された）
のではないかと思います。
試しに件の<div>を<head>の一番下に持ってくると、ちゃんと展開されます。
感想
マイクロソフト公式のブログでこういった問題が発生しているのはなんだか不思議な感じです。
slackでちゃんと展開されるページを作りたければ、正しいHTMLでページを作りましょう。