Blueskyでリンクカードを表示させる方法
Blueskyは、X(Twitter)の代替として注目されている、分散型のSNSです。
この記事では、BlueskyでURLのリンクカードを表示させたり、YouTubeの埋め込みプレイヤーを表示したりする方法を詳しく解説します。
目次
Blueskyとは?
Blueskyは、従来の中央集権型のSNSのとは異なる、分散型のSNSです。
ATプロトコルという仕組みを採用しており、ATプロトコルを採用したほかのSNSと相互にやり取りできます。
ThreadsやMisskey、Mastodonなどは、ActivityPubという別の仕組みを採用しており、Blueskyとは互換性がないので注意が必要です。
Blueskyのカスタムフィード機能では、技術的な知識があれば自分でタイムラインのアルゴリズムを開発できるなど、自由度の高さも特徴的です。
リンクカードとは?

リンクカード機能は、投稿にリンクを添付したときに、そのリンク先のタイトルやサムネイルなどの情報を自動的に表示する機能です。
Xを含む多くのSNSで利用されており、開く前にリンク先の情報がわかるというメリットがあります。
この機能は、OGP(Open Graph Protocol)という仕組みを利用しています。
BlueskyではXと同様に、ポストにリンクを添付すると自動的にリンクカードが表示されます。
リンクカードを削除したい場合は、リンクカードの右上のバツマークをタップしてください。

なお、YouTubeなどの埋め込みのメディアプレイヤーはデフォルトで無効化されているため、次のセクションで説明する方法で有効化する必要があります。
YouTubeなどの埋め込みのメディアプレイヤーを表示する
リンクカードを表示させると、埋め込みのメディアプレイヤーを利用できるようになりますが、デフォルトでは無効化されています。
埋め込みのメディアプレイヤーを有効化する方法については、こちらの記事で解説しています。

エラーが発生した場合の対処法
リンクカードの追加時にいくつかのエラーが発生することがあります。主なエラーとその対処法は次のとおりです。
Error: Unable to extract link meta
このエラーは、リンク先がOGPに対応していないか、URLが間違っているときに発生します。
URLが正しいか確認してください。
AbortError: Aborted
このエラーは、何らかの理由でOGPのデータの取得が中断したときに発生します。
このエラーが出た場合は、リンクを一度削除してから、もう一度追加してみてください。
まとめ
Blueskyでリンクカードを活用する方法を紹介しました。
リンクカードを活用することで、リンク先に移動する前にWebページの内容がわかって便利です。
ぜひ、この記事を参考にして活用してみてください。
更新履歴
- 2025年12月25日:最新の情報に更新しました
- 2024年4月29日:記事の内容を最新の情報に更新しました
記事をシェア
フォローして最新情報を入手
Googleの優先ソースに追加すると、このサイトの記事をGoogleで見つけやすくなります。また、ぜひXやRSSフィードもフォローしてください。
関連記事
-1.png&w=1080&q=75)
生まれた時から、母国語よりも先にJavaScriptを使っていました。ネットの海のどこにもいなくてどこにでもいます。
Webフロントエンドプログラマーとして、TypeScriptを用いたWebアプリやブラウザー拡張機能を制作。Xのシャドウバン検知ツール「Shadowban Scanner」やリンクカード復活ツール「Restore Link Card」を公開し、国内外のメディアで紹介されました。iGEM 2023ではJapan-UnitedチームのWikiを制作してGrand Prizeの獲得に貢献。ブログではXやSNSの最新ニュース、不具合の検証と対処法、フロントエンド開発の知見を発信しています。



![[新しいXチャットへようこそ]というテキストが画面に大きく表示されており、その下には次の3つの説明が表示されている。[エンドツーエンドの暗号化:メッセージは、端末にかかわらずエンドツーエンドで暗号化されています。][最先端のプライバシー:Xを含め、他の人がメッセージを読むことはできません。][パスコードを設定:メッセージを保護するため、4桁のパスコードを設定してください。]これらの説明の下には、[パスコードを作成]という大きなボタンが配置されている](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fwelcome-to-new-chat.png&w=1920&q=75)




![VS Codeの設定画面で[Workbench > Experimental: Modern UI]が赤い枠線で強調されているスクリーンショット](/_next/image/?url=%2Fapi%2Fmedia%2Ffile%2Fvs-code-experimental-modern-ui-setting.png&w=3840&q=75)





