参考資料：https://ogp.me/
皆さんは気づいたことがあるでしょうか、リンクがソーシャルメディアプラットフォームで共有されると、プラットフォームはリンクのプレビュー画像、タイトル、サブタイトルなどのコンテンツを表示します（下図参照）。
それでは、ソーシャルメディアプラットフォームはどのようにプレビューコンテンツを取得しているのでしょうか？それには Open Graph Protocol（オープングラフプロトコル）について話さなければなりません。
Open Graph Protocol とは？#
略称：OG プロトコル、Facebook が 2010 年に公開した、ソーシャルメディアプラットフォームでウェブページのコンテンツを共有する際にメタデータを指定するためのものです。
簡単に言えば、OG プロトコルは、リンクが指すウェブサイトの情報をグラフィカルに表示することで、リンクの露出とクリック率を向上させるためのものです。その中には画像、タイトルなどの情報が含まれています。これがメタデータ / Metadataです。
つまり、自分のウェブサイトをソーシャルメディアプラットフォームで共有し、OG プロトコルに準拠したメタデータを表示するには、まずウェブサイトにmetaタグを追加し、ソーシャルメディアプラットフォームが取得できるように準備する必要があります。
ウェブサイトに OG プロトコルに準拠したメタデータを追加する方法#
先述の通り、OG プロトコルは本質的にはメタタグの一種です。したがって、単にウェブサイトにproperty=ogのメタタグを追加するだけです。
<meta property="og:title" content="yuanx" />
<meta property="og:description" content="yuanx's personal website" />
<meta property="og:image" content="https://yuanx.me/api/og" />
OG プロトコルのバリエーション#
一部のソーシャルメディアプラットフォームは OG プロトコルに加えて、他のカスタムプロトコルもサポートしている場合があります。例えば、Twitter が公開したTwitter Cardsです。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@nytimesbits" />
<meta name="twitter:creator" content="@nickbilton" />
他のウェブサイトの OG プロトコルに準拠したメタデータを取得する方法#
フローチャートでは、ソーシャルメディアプラットフォームが他のウェブサイトの OG メタデータを取得するプロセスが説明されていますが、ここではコードを使用して実装する方法について説明します。
全体のアイデア#
ターゲットウェブサイトの HTML を取得 -> HTML を解析 -> メタタグをマッチング -> データを取得
コードの実装#
// node.js
import * as cheerio from 'cheerio';
import axios from 'axios';
const TARGET_URL = 'https://yuanx.me';
axios
.get(TARGET_URL)
.then((response) => {
const html = response.data;
const $ = cheerio.load(html);
const ogTitle = $("meta[property='og:title']").attr('content');
const ogDescription = $('meta[property="og:description"]').attr('content');
const ogImage = $('meta[property="og:image"]').attr('content');
console.log('OG Metadata: ', ogTitle, ogDescription, ogImage);
})
.catch((error) => {
console.log('error', error);
});
まとめ#
Open Graph Protocol は、製品のマーケティングや SEO など、さまざまな側面で効果を発揮します。独立した開発者や製品の運営、マーケティングを行う企業にとって、Open Graph Protocol は見逃せない詳細です。
Open Graph Protocol に興味がある場合は、imyuanx/yuanxリポジトリをご覧いただくと、さらに技術的な詳細を知ることができます。
読んでいただきありがとうございました ❤️