辛宝Otto 的玄酒清谈

12.MP3

聴取方法#

• 小宇宙
• アップルポッドキャスト
• IPFS

AI 概要試水#

以下はポッドキャストの要点の要約です：

• OG 画像の詳細は、共有リンクが表示されるときにソーシャルメディアのプレビューに使用される Open Graph 画像です。これらは「OG」などの属性を持つメタタグを使用して定義されています。
• 動的に生成された OG 画像には、Satori/Vercel OG、Cloudinary などのパッケージを使用する方法や、Puppeteer や Playwright を使用してプログラム的にスクリーンショットを取得する方法など、さまざまな方法があります。
• Satori は React コンポーネントから画像を生成することを可能にしますが、CSS サポートには制限があります。Cloudinary は URL 内のコマンドを使用して画像を組み立てることに関与しており、これは複雑になる可能性があります。
• Puppeteer や Playwright を使用して動的に生成されたページのスクリーンショットを取得することは、簡単な方法です。これにより完全な CSS 制御が可能ですが、ページを先にレンダリングする必要があります。
• 考慮すべき要素には、カスタムフォントのサポート、レイアウト処理、マージン、レンダリング性能、ミラー保存 / キャッシュが含まれます。
• 例では、ブログ記事、動画、ポッドキャストなどの画像生成について議論されています。著者の写真、テキスト、日付などの動的データを含めることができます。

要するに、ポッドキャストでは OG 画像とは何か、Satori、Cloudinary、ヘッドレスブラウザなどの動的生成技術の違い、各方法のトレードオフについて議論されました。

内容紹介#

今回のテーマは：og image

元の Syntax.fm アドレス https://syntax.fm/show/659/og-image-options
20230907

基本概念#

facebook が 2010 年に発表した open graph の仕組みは、ソーシャルメディアのリンクをより表現力豊かにし、ソーシャルサイトのメタデータを表示するためのものです。画像をプレビューできるようにし、ユーザーにとっては SEO のためです。

OGには多くの種類があり、記事、動画、写真などがあります。画像の比率は異なるサイトで異なる要求があり、少し奇妙です。

作成と検証#

OG タグが異なるサイトでどのように表示されるかをテストする方法、つまり効果をテストする方法は？

OG をテストするためのソフトウェアがあり、プログラム polypane テストが非常に便利なサービスです。

雄心勃勃な Web 開発者のためのブラウザ。

独立したブラウザを使用して、より短い時間でより良いウェブサイトを構築し、サイトをより応答性が高く、アクセスしやすく、パフォーマンスを向上させます。各プロジェクトで数時間を節約し、そのすべての瞬間を楽しんでください。

Twitter と Facebook には、専用のデバッグツールがあります OFFICIAL DEBUGGERS

• Facebook
• Twitter
• Linkedin
• Structured Data

これらのリンクは役に立つかもしれません。

記事が更新された場合、情報を更新する必要があり、キャッシュを手動で更新して再取得する場所もあります。

動的 SVG と Puppeteer ソリューションの探求#

OG を生成するための多くの動的生成ソリューションがあります：

• vercel/satori: HTML と CSS を SVG に変換するための啓発されたライブラリ フレームワークの動的生成、パラメータを渡し、jsx を使用して動的 SVG を生成
• 画像動画圧縮 Cloudinary URL 内のコマンドを使用して画像を組み立てることに関与
• Puppeteer を使用してレンダリングスクリーンショットを取得することもでき、動的スクリーンショットを中心に、Puppeteer の sls バージョンを使用
• Cloudflare Puppeteer ドキュメント は非常に強力で、ワーカー内で Puppeteer を使用
• ホストは動的な観察 URL と効果を作成しました アドレス
• もちろんキャッシュサポートを提供し、繰り返し操作を行わず、必要に応じて操作
• E2E を使用してスクリーンショットを取得することもできます。例えば、Playwright

知識点ガイド#

og image
比較的正式なウェブサイトで Open Graph プロトコルを紹介しています ogp.me

オープングラフプロトコルは、任意のウェブページをソーシャルグラフ内のリッチオブジェクトにします。例えば、これにより Facebook 上で任意のウェブページが Facebook 上の他のオブジェクトと同じ機能を持つことができます。多くの異なる技術とパターンが存在し、組み合わせることができますが、要するに、十分な情報を提供する技術はありません。オープングラフプロトコルは、これらの既存の技術に基づいて、開発者に 1 つのことを実現するためのものです。開発者の簡素さはオープングラフプロトコルの重要な目標の 1 つであり、多くの技術設計決定に情報を提供します。

記事と拡張リンク

• meta dev の紹介記事 developers.facebook.com
• meta tags メタタグツールキット - プレビュー、編集、生成
• Vercel の og 紹介 vercel
• 異なる実装とデバッガーツールがいくつかあります ogp.me
• Canva api 設定、開発者ドキュメント

Yoast SEO は WordPress のプラグインの 1 つで、コンテンツ制作者が投稿にメタタグを追加できるようにします。これにはタイトルと説明が含まれ、Google 検索結果に表示され、ページの内容を潜在的な読者に広めます。

Yoast SEO は、WordPress 上の任意の記事に OG 画像を追加することも可能ですが、この機能にアクセスするには企業アカウントにアップグレードする必要があります。

Canva api 設定、開発者ドキュメント

Yoast SEO は WordPress のプラグインの 1 つで、コンテンツ制作者が投稿にメタタグを追加できるようにします。これにはタイトルと説明が含まれ、Google 検索結果に表示され、ページの内容を潜在的な読者に広めます。

Yoast SEO は、WordPress 上の任意の記事に OG 画像を追加することも可能ですが、この機能にアクセスするには企業アカウントにアップグレードする必要があります。

関連リンク#

• syntax.fm 659

補足#

元のタグに基づいて、以下のオープングラフ属性を構築しました