Next.js

OGPを使ってMarkdownのリンクをカードリンクにする

Markdownを使用して記事やドキュメントを作成していると、リンクをクリックしたときに表示される内容をカスタマイズしたくなることがあります。特に、OGP（Open Graph Protocol）を活用すると、リンクをカード形式で表示することができます。カードリンクは、リンク先のタイトル、画像、説明をきれいに表示できるため、読者にとって魅力的なリンクになります。この記事では、OGPを使ってMarkdownのリンクをカードリンクにする方法について説明します。

#1. OGPとは？

OGP（Open Graph Protocol）は、Facebookをはじめとするソーシャルメディアサイトが、リンクをシェアした際にどのように表示するかを制御するためのメタデータ標準です。OGPを設定することで、URLが共有されたときに、リンク先の情報（タイトル、画像、説明文など）をカスタマイズできます。

#2. OGPを使ってリンクのカードを作成する

Markdownでリンクを挿入すると、基本的には次のようなシンプルなリンクになります：


[リンクテキスト](https://example.com)

しかし、OGPを使用してリンクをカード形式にするには、リンク先のウェブページにOGPメタタグを追加する必要があります。これらのメタタグは、リンクがソーシャルメディアにシェアされたときに、どのように表示されるかを指定します。

2.1 OGPメタタグの基本

OGPメタタグは、HTMLの<head>セクションに追加します。代表的なOGPタグは次の通りです：

<meta property="og:title" content="リンク先のタイトル" />
<meta property="og:description" content="リンク先の説明" />
<meta property="og:image" content="リンク先の画像URL" />
<meta property="og:url" content="リンク先のURL" />

例えば、https://example.comというページに対してOGPを設定する場合、次のようなタグを追加します：

<head>
    <meta property="og:title" content="Example Site" />
    <meta property="og:description" content="これは例のサイトです。" />
    <meta property="og:image" content="https://example.com/image.jpg" />
    <meta property="og:url" content="https://example.com" />
</head>

2.2 Markdownでリンクをカード形式に表示

リンク先のウェブページがOGPメタタグを適切に設定している場合、ソーシャルメディアプラットフォームでそのリンクがシェアされると、自動的にカード形式で表示されます。Markdown自体には、OGPを直接操作する機能はありませんが、OGPメタタグが正しく設定されたウェブページのリンクをMarkdownで記述すれば、シェア時にカードリンクとして表示されるようになります。

例えば、次のようにMarkdownでリンクを挿入します：

[Example Site](https://example.com)

このリンクがFacebookやTwitterなどでシェアされたとき、リンク先がOGPタグを適切に設定していれば、タイトル、説明、画像がカード形式で表示されます。

#3. OGPメタタグをテストする

OGPメタタグが正しく設定されているかを確認するために、FacebookやTwitterには専用のツールがあります。

  • Facebook: Sharing Debugger こちらにリンクを入力すると、Facebookがどのようにリンクを表示するかを確認できます。
  • Twitter: Card Validator こちらにリンクを入力すると、Twitterがどのようにカードリンクを表示するかを確認できます。

#4. OGPの制限と注意点

OGPによって表示されるカードリンクにはいくつかの制限や注意点があります。

  • 画像サイズ: OGPで設定する画像は、ソーシャルメディアプラットフォームによってサイズ制限があります。一般的に、画像は1200x630ピクセルが推奨されますが、各プラットフォームの仕様を確認することをお勧めします。
  • URLの更新: OGPメタタグが更新されても、ソーシャルメディアのキャッシュが反映されるまで時間がかかることがあります。キャッシュをクリアするために、上記のデバッガーツールを使って再読み込みを試みることができます。

#5. まとめ

OGPを使うことで、Markdownでリンクを挿入した際に、リンク先がカード形式で表示されるようになります。リンク先のウェブページがOGPメタタグを正しく設定していることが前提ですが、これにより、リンクをシェアする際に視覚的に魅力的なカードリンクを作成できます。OGPを活用することで、コンテンツのシェアがより効果的になり、読者の関心を引きやすくなります。

タグ一覧