SlackでURLが展開されないのを修正する
当ブログのテーマはフルスクラッチで自作していて、Twitter CardとOpen Graphに対応させているのですが、SlackでURLを投稿した時に内容が展開されなかったので修正しました。
スポンサーリンク
og
Qiitaの記事がSlackで展開されない理由 - Qiita
Qiitaの記事URLをslackに貼ると、概要を自動で取得してプレビューを表示してくれます。 技術情報を共有する際に便利な機能ですが、中には展開されない記事もあるようです。 同じサイトなのになぜ？と思い、原因を調べてみました。 ...
ここを見ると、og:descriptionの値にHTMLタグが存在するとダメみたい。
<p></p>が入ってしまってますね。
これはthe_excerpt関数を使うと自動的に入ってしまうので、以下のようにget_the_excerptに置き換えます。
- <meta property="og:description" content="<?php the_excerpt(); ?>" />
+ <meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />これでog:description内のHTMLタグはなくなったはずなのに、まだURLが展開されない。なぜだ。
UTF-8
opengraphcheck.comで確認してみることに。
なんと文字化けしていやがる。ちゃんとUTF-8で認識されていない？
そこで、<head></head>の間に<meta charset="UTF-8">を入れてみると
直った！
そして、
Slackでもちゃんと認識されるようになりました。
Wordpressのテーマ作る時に、<meta charset="UTF-8">を書かなくてもブラウザが文字化けしなかったから、書かなくてもいいと思ってた。というか、実際今までそれで全然問題がなかったわけだし。
ただ、今回のようなケースがあるので、ブラウザが文字化けしてなくても<meta charset="UTF-8">は常に書いておいた方がいいのかもと思いました。
スポンサーリンク
コメント