Linkpreview、ソーシャルメディアおよびチャットアプリでのサイトURLプレビュー

• LinkPreviewは、Webサイトのリンクのプレビューを生成するプロジェクト
• 特定のURLが Google / X / Facebook / Discord / WhatsApp でどのように表示されるかを一目で確認可能
• 他の製品や既存のオープンソースプロジェクトと比べて、シンプルで使いやすいインターフェースを提供

[GN⁺]

Hacker Newsのコメント

• よくできていて、触って遊ぶのにちょうどいい。各プラットフォームの標準インターフェース内で見えるようにした細部が特によかった
  ただ、プラットフォームごとにメタクローラーの挙動が違うようで、よく知っている WhatsApp と Discord の2つでは、プレビューがどちらも実際のものと一致していなかった
  リンクをたどる際に発生するリダイレクトも表示してほしいし、対象 URL をクエリパラメータやフラグメントで渡せるようにしてほしい
  https://linkpreview.xyz/#example.com
  https://linkpreview.xyz/#url=https://example.com
  https://linkpreview.xyz/?url=https://example.com
  URL でデータを指定できないなら、かわいいWebページ上のツールにとどまるが、URL で制御できれば共有可能なネイティブWebユーティリティになる。クールな URL は変わらないものだし、Web では URL が API だ
  ツイート https://x.com/fayazara/status/1830272619637047359 を見て補足すると、HN のトップ掲載とありとあらゆる批判を同時に受けているところだ
• 小さなツールとしては素晴らしいが、https:// を強制入力させるのではなく、example.com のように入力したら自動で付けてほしい
  • type="url" の入力フィールドを使うのも手だ。モバイルのキーボードで自動大文字化や自動修正が無効になりそうだ
  • その通り、直します。本当にいらいらする部分です
• すっきりしたツールだ。いくつか提案すると、プレビューを表示するサービスのユーザーエージェント文字列でメタタグや画像を取得するとよい
  たとえば Twitter/X は Twitterbot/1.0 のユーザーエージェント文字列でメタタグを取得する。サイトによっては、そのサービスでの表示に合わせて画像を最適化するため、サービスごとに異なるコンテンツを返すことがある
  また、API は Twitter 専用メタタグ [0] を見ていないようだ。すべてのプレビューに使うメタデータ一式だけを返している。たとえば https://govukvue.org では、名前と説明の横に小さな画像が出る summary カード形式を使っているが、このツールは summary_large_image のようにレンダリングしている
  [0] https://developer.x.com/en/docs/x-for-websites/cards/overvie...
  • 改善してみます。実際、2時間くらいで急いで作ったものなので
• Open Graph を正しく処理できていないようだ。たとえば head タグの og:image の代わりに、ピクセルの荒いファビコンをコンテナに合わせて拡大表示していた
  • ひとまずサイト上にあるものを取ってきて表示しているだけです。確認してみます。どの URL でテストしたのか知りたいです
  • それを言いに来た。ファビコンを使っているせいで、完全に不正確な表現になっている
• 普段は https://socialsharepreview.com/ を使っているが、似たようなツールはたくさんある。このツールがどう違うのか、あるいは何が優れているのか、そして既存の解決策ではなく自作した理由が気になる
  • 上のツールはいくつかのプレビューで壊れていた。複数のプレビューを見るにはクリックが必要で遅い。元記事のツールは1ページに全部表示し、よりすっきりしていて、プレビューの種類も多く、スタイルも適切だ。かなり明確な理由だと思う
  • 昨夜、暇だった
• このツールの逆方向版を作った。特定のプラットフォームでどのメタタグがプレビュー生成に使われるのか確認できるページを生成してくれる
  https://getoutofmyhead.dev/link-preview-tester/
• 標準に沿ってWebサイトを作り、ブラウザでテストしたら、当然ほかのブラウザでも動くだろうと満足できる日をいまだに夢見ている
  ところが今では、無数の独自チャットツールが自分のページプレビューをどうレンダリングするかを手作業で確認するツールがある
  しかも皆それを紙の発明以来最高のもののようにもてはやしている。面白いメディア業界フォーラムならまだしも、HN でこういう流れを見ると興味深い時代だ
• なぜ https://socialsharepreview.com/ や https://www.opengraph.xyz/、https://socialmediasharepreview.com/ の代わりにこのツールを使うべきなのかわからない
  フィードバックすると、HTTPS のない URL で失敗するのは不自然だ。どんなサイトを入力しても自動で URL に移動し、最終的に解決された URL を基準にスキャンするくらい賢いべきだ。たとえば "blizzard.com" と入力したら "https://www.blizzard.com/en-us/"; を読み込んでほしい
  Discord と WhatsApp が見えるのはよいが、LinkedIn や Pinterest はどうだろうし、Slack はどうなるのか気になる。Slack は Discord と同じであるべきだと思う
  何を直すべきかも教えてくれない。socialsharepreview.com がどうやっているか見るとよい
  https://socialsharepreview.com/?url=https%3A%2F%2Fnews.ycomb...
  https://i.imgur.com/LDXNYYR.png

コンテンツが正しく展開されるように何を修正すべきかについて、有用なヒントをたくさん提供している。こういうものを好むマーケティング系の人たちには本当に役立つ。サイトごとに形式や文字数制限が異なるので、修正すべき情報を共有するとよい。たとえば Twitterカード と Open Graph メタデータの違いのようなもの。確認はしていないが、各サイト向けのメタデータを正しく読み取ることまで保証できるとよい

• すでに https://socialmediasharepreview.com/ のような無料プレビュー ツールがこの問題を解決しているので、よく分からない
  唯一の説明は、これがフルスタック キットを売るための 無料ツール のおとりだということだけ
• かなり良い。ただ、毎月最新の状態に保つ準備をしておかないと、すぐに役に立たなくなるはず
  こうしたツールの欠点の一つは、URL がオンラインでアクセス可能である必要があるため、問題が起きると 反復改善サイクル がかなり長くなる点。
  Polypane [1] には、ローカル URL でも動作するソーシャルメディア プレビューがあり、そのソーシャルメディアが表示する URL を上書きすることもできる。X/Twitter、Facebook、Slack、LinkedIn、Discord、Mastodon、Discord、Google Search、Bluesky、Mastodon、Threads のプレビューを作成しており、頻繁にメンテナンスしている。それぞれにライトモードとダークモードのデザインもあり、実際にすべてテストできる。不足しているものや互換性のないものも教えてくれる。ここで見られる: https://polypane.app/social-media-previews/
  [1] https://polypane.app/
  • HN の人たちが役立つ助言のように見せかけて自分の製品の宣伝を差し込むのは嫌い
• LinkedIn と Mastodon が抜けている。すっきりしたツールだ。ページに足りないものがある場合に何をすべきか、といった 改善ガイダンス文言 があると役立つと思う
  • 私もまったく同じことを考えていた。それに理由は分からないが、LinkedIn はうちのページを全部まちがった画像で表示する。
    誰か原因を突き止められるなら教えてほしい。godotengine.org サイトのどのブログ記事でも LinkedIn に貼り付けると、記事のサムネイルの代わりに著者画像が引っ張られてくるのが分かる。解決できていない
  • 今夜 LinkedIn、Telegram などをいくつか追加する予定