Ideal Reality

パソコンのある生活を良くするためのサイト

SlackでURLが展開されないのを修正する

当ブログのテーマはフルスクラッチで自作していて、Twitter CardとOpen Graphに対応させているのですが、SlackでURLを投稿した時に内容が展開されなかったので修正しました。

Contents
スポンサーリンク

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">は常に書いておいた方がいいのかもと思いました。

スポンサーリンク

コメント

投稿されたコメントはありません

名前

メールアドレス(任意)

コメント

関連する投稿

[WordPress]記事のもくじをJavascriptで生成する

SELinux環境でのEWWW Image Optimizer

CentOS 8でNginxを使ったWordPressサーバーを構築する

Raspberry Pi (Raspbian)上にNginxを使ったWordPressサーバーを構築する

[WordPress]メディアライブラリから画像を選べるカスタムフィールドを作成する