背景
slackとはチャットツールのことです。自分は仕事で利用しています。
さて、そのslackでこのブログのリンクを共有してもurlしか表示されず、画像や詳細が出てきませんでした。
画像が出てきたら記事の概要を把握しやすくなって良いと思うので、bloggerの記事をslack上でをカード形式表示する方法を探し、適用してみました。
備忘録を兼ねて方法を共有します。
slackに画像や詳細を表示させる記述
Slackのリンクと共有とプレビューの説明で社内ブログを参考にするよう促されていて、そこではOpen Graph ProtocolというSNSで配信する情報を扱うための規格に沿ったメタタグを配置する方法が紹介されていました。下記のようなmetaタグを埋め込めば、slackに表示されるようになるようです。
<meta property="og:url" content="記事のurl"/> <meta property="og:title" content="記事のタイトル"/> <meta property="og:description" content="記事の概要"/> <meta property="og:site_name" content="ブログ名"/> <meta property="og:image" content="記事の紹介に使いたい画像のurl"/>
標準設定のbloggerのOpenGraphの設定を確認
OpenGraphCheckというurlを入力するとOpen Graph情報を調べてくれるサイトがあったので、そこに記事（bloggerのindex（一覧ページ）で記事の一部だけを見せる方法）のurlを入力して確認してみました。
op:descriptionは空で、op:site_nameはありませんでした。
なお、slackはdescriptionが空だとリンクが展開されないようです。（参考: URLがSlackで展開されない理由 - Qiita）
op:descriptionとop:site_nameを追加すれば、リンクが展開されるようになるはずです。
op:descriptionの対応: 「説明」に関するメタタグの設定を無効にする
bloggerの設定 -> 検索設定 -> メタタグ -> 説明 を無効にすれば、記事本文冒頭の文章が自動的にop:descriptionに適用されるようになります。
説明のメタタグが有効だと、各記事のdescription設定で情報を入力しないとop:descriptionが空のままになるようです。
今まで説明のメタタグ機能を有効にしていましたが、各記事に対して要約を手動で入力する気は今の所無いので無効にしました。
op:site_nameのタグを追加
タグを追加するために、bloggerのテンプレートのhtmlを編集します。編集画面を開くために、まず「テーマ」の設定画面を表示します。
テーマ設定画面右上の「・・・」をクリックすると隠れている機能を表示できます。
出てきたメニューから「HTMLを編集」を選択します。
編集画面で Ctrl + f を入力すると文言検索ができるので、「all-head-content」で検索してください。
多分レイアウトデータの上部にall-head-contentのb:includableタブが見つかると思うので、その行の後に下記のようにop:site_naeのメタタグを追記します。
<b:include data='blog' name='all-head-content'/> <meta expr:content='data:blog.title' property="og:site_name"/>
「expr:content='data:blog.title'」という記述はbloggerの値展開機能を利用していて、blog.titleで呼び出せる変数をcontentに展開するということを意味します。
変更できたら不具合なく動くことを確認するためにプレビューボタンを押して試してみます。
編集画面右下の目のマークがプレビューボダンです。
変更内容に異常がなければ、左上に「プレビュー」と表示されたプレビュー画面が表示されます。
異常があって表示されない場合はどこかで間違った記述をしているので、プレビューボタンをもう一度押して編集画面を表示して間違いを探すか、保存せずに編集画面を閉じて編集をやり直してください。
プレビューが表示されたら変更が成功していると思うので、フロッピーボタンを押して保存して編集画面を閉じてください。
結果確認
bloggerの設定変更を行ってOpenGraphCheckで再度確認してみました。
すると、descriptionに記事の冒頭が、op:site_nameにブログ名が、それぞれ記述されてていました。
この状態でslackにリンクを貼り付けると、期待通りにリンクが展開されました。
余談: 調べて試したけど期待するようには動かなかったこと
op:descriptionに割り当てられている記事冒頭の文章は、data:blog.metaDescriptionでは取得できない
「説明」のメタタグを有効にして記事の編集画面で「検索向け説明」を記述した場合は、下記のようにdata:blog.metaDescriptionを展開する記述で情報が取得できます。<meta property="og:description" expr:content="data:blog.metaDescription"/>しかし、今回のように「説明」のメタタグを無効にして記事冒頭の文章を割り当てる場合は、blog.metaDescriptionでは情報を取得できませんでした。
includableでall-head-contentを上書きできない
「説明」のメタタグを無効にすれば良いと気づく前に、includable機能を使えばall-head-contentを書き換えられるという情報を発見しました。Blogger Header Inclusion all-head-content
Bloggerブログのテンプレートのhead内のカスタマイズのために独自タグのall-head-contentを分解する
しかし、bloggerの仕様が変わったのか、headに下記のようなincludableタブを記述すると
ブログ テーマの読み取り中にエラーが発生しました
Unknown runtime binding: includable in widgetruntime eror
となって動きませんでした。
この記事では設定変更で事足りましたが、もし最近のbloggerでincludableなどを利用してall-head-contentを書き換える方法をご存知の方がいらっしゃれば、コメントなどで情報共有していただけると嬉しいです。
0 件のコメント :
コメントを投稿