はじめに
自分で作るシステムで、URLを入力したら、SlackでURLを入力した後にサマリが出るようにしたいなーと思い、それを実現するためにどうしたらいいかを調べました。
Slackで https://www.tokyo-np.co.jp/article/199815 を投稿すると出てくる、こういう情報 ↓
最初に結論
OGPでググれ！（Open Graph Protocol）
metaタグのog:titleとかog:descriptionとかを抽出すればよい。
詳細
上の方に張ったが記事サイトはそのうち消えるかもですが、OGPは一般的な話なので、ほかの記事・サイトでも通用すると思います。
その要素を１つずつ抜き出す方法を書いていきます。
アイコン
- faviconといわれているアイコンです。ブラウザのタイトルのとこにも出る小さなアイコンです。
- OGPではなく、大昔からある仕組みです。
<link rel="icon" href="https://static.tokyo-np.co.jp/tokyo-np/appconfig/favicon.ico">
サイト名
- OGPの
property="og:site_name"。
<meta property="og:site_name" content="東京新聞 TOKYO Web ">
タイトル
- OGPの
property="og:title"。 - titleタグでもいいかもしれませんが、タイトルってサイト名と一緒に、"最新のニュースがわかる"とかそういうことがしつこく書かれていることがありますね。ここに書かれてないという保証はありませんが。
<meta property="og:title" content="＜新型コロナ・3日＞東京都で1万2561人感染、10歳未満男児、30代男性ら27人死亡：東京新聞 TOKYO Web">
本文
- OGPの
property="og:description"。 - これが一番大事。本文から抜くのは至難の業。
- あんまり長くない方がよい（長いと利用者が見てくれなくなる）ということから、下記の例でも、途中で「...」と途切れています。なので省略するロジックとかをわざわざ入れる必要はなく、そのまま使えます。
<meta property="og:description" content="東京都は3日、新型コロナウイルスの新たな感染者1万2561人と、10歳未満の男児1人と30代男性１人を含む27人の死亡を確認したと発...">
容量
- 不明。普通に取得したサイズを出しているのでは。
- でもそもそも必要なのか、よくわからない。私なら表示しない。
画像
- OGPの
property="og:image"。 - 記事を作った人が、多数の画像の中から一番見せたい画像を置いているので、これを使うべき。
- これもこの情報がなかったら、数多くの画像の中から１つを選ぶのは至難の業。
<meta property="og:image" content="https://static.tokyo-np.co.jp/image/article/size1/4/5/b/f/45bf413fe14e5f166d7a130c9914c4c1_1.jpg">
そもそもOGP(Open graph Protocol)とは
サイトを作る側の人が、webで少しでも自分のサイトを見つけてもらいやすくするための仕組み。マーケティングの技術です。なので、サービス側の見やすくしたいという要件と合致していて、サービス側としては是非利用した方がいい仕組みです。
正式にはこちら。The Open Graph protocol (https://ogp.me)
所感
私はOGPというもの自体を知りませんでしたので、最初は「url 展開 画像」とかで検索してました。当然ですが全然見つけられなかったですｗ
Slackでいくつか実験してみて、htmlソースのどこにこの情報があるのか調べたら<meta property="og:description"とかに入っていることがわかって、og:descriptionをググってみたらOGPにたどり着いた次第です。
何気なく利用している機能ですが、いろいろな知らない技術に支えられているなと思いました。