«« 映画館での許容すべきマナーは？ | ヴァイオレット・エヴァーガーデン外伝の劇場版は前半が素晴らし過ぎる！（バレ） »»

PasteTitleとget-thumbnail-from-pagepeekerをOGP対応へアップデートしました

2019年9月15日

ブックマークレットからブログカードなどを作成できるPasteTitleについて、サムネイルを表示する部分があります。
これについてOGPに対応しているページの場合は、OGP設定されたサムネイルの方をはめ込むようにアップデートしました。

Udon Watch - うどん時計

OGPとは、もともとはfacebookやtwitter向けにリンクを指定したらそこからサイトの情報を伝えることでブログカードを表示するための仕様です。
色々あるのですが、一例として<meta>タグ内にほかのOGPタグとともに以下の記述をすると、画像URLで記述サムネイルを記述した画像を当てはめて表示するというものです。

html <meta property="og:image" content="(画像URL)" />

利用者としてはページの内容が知りたいのだけど、いままでは（pagepeekerを使った）ページ全体をスクリーンショットで表示していたこともあり。
ページ周りの部分とか本編とは関係のない内容が含まれていて、よくわからないところがありました。

↑旧PasteTitle適応例、OGP対応サイトなのにページサムネイル画像を表示するので内容がわかりにくい

今回の修正で、よりリンク先のページが分かりやすくなるのではないかと思います。

このサムネイル部分なんですが、PasteTitleから独立しているAPI・get-thumbnail-from-pagepeekerを使って表示しています。
get-thumbnail-from-pagepeekerはGitHub上で無料公開しております。
phpが動作するサーバーをご用意いただければ、他のサービスにも使えますので、ご興味のある方はどうぞ。

■広告

【Amazon.co.jp 限定】和紙かわ澄 友禅和紙 型染め しおり ブックマーカー 6枚入 青色系 Aセット

posted with amazlet at 19.09.15

和紙かわ澄(Washi Kawasumi)
売り上げランキング: 7,097

Amazon.co.jpで詳細を見る

投稿者 kuze : 2019年9月15日 22:34

• PasteTitleをサムネイル対応しました
• Paste TitleがtextileやMarkdownにも対応！さらにホームページの紹介がしやすくなりました
• MovableTypeが出力する記事をThe Open Graph Protocolへ対応するようMTタグを試行錯誤してみる

• 手作り省エネデジタルフォトフレームの作り方が気になる
• Python3.4向けにつくったAPIが、Python3.6では動かなくなったので直してみた
• Windows 10 HomeやProfessionalにおいて行う設定やインストールしたいソフトをまとめてGithub Pagesにまとめてみた
• Office Lensで素早くその場で名刺や原稿などをスキャン！
• Amazon商品をより魅力的に紹介できるAmaQuickをテンプレート例とともに紹介してみた

«« 映画館での許容すべきマナーは？ | ヴァイオレット・エヴァーガーデン外伝の劇場版は前半が素晴らし過ぎる！（バレ） »»