Markdownでリンクカードを表示する「remark-link-card」の使い方

ブログなどでは、リンクを埋め込む際にリンクカードを表示することがあります。リンクカードは、リンク先のページのタイトルやサムネイル、概要などを一覧表示でき、リンク先の情報を簡単に把握できるため、ユーザーにとって便利な機能です。

この記事では、Markdownでリンクカードを表示するための 「remark-link-card」の使い方について解説します。

remark-link-cardとは？

remark-link-cardは、OGPのリンクカードを表示するための、Markdownパーサーのremark用のプラグインです。

remark-link-cardを使うと、Markdownファイル内のベアリンクを自動でリンクカードに変換できます。リンクカードにはサムネイルやタイトル、概要、favicon、リンク先のURLが表示されます。

remark-link-cardの使い方

remak-link-cardを使うには、まずプロジェクトにインストールします。

npm install remark-link-card

インストールが完了したら、remarkにremark-link-cardを追加します。

1
import remark from "remark";
2
import rlc from "remark-link-card";
3

4
(async () => {
5
    const result = await remark()
6
        .use(rlc)
7
        .process(exampleMarkdown)
8

9
    console.log(result.contents);
10
})();

Astroを使っている場合は、astro.config.mjsにremark-link-cardを追加します。

1
import { defineConfig } from "astro/config";
2
import rlc from "remark-link-card";
3

4
// https://astro.build/config
5
export default defineConfig({
6
    // ...
7
    markdown: {
8
        remarkPlugins: [rlc]
9
    }
10
});

オプション

remark-link-cardには、次のオプションがあります。

• cache：trueに設定すると、faviconやサムネイルなどのデータを./public/remark-link-card/にキャッシュします。デフォルトはfalseです
• shortenUrl：trueに設定すると、リンクカードに表示するURLをホスト名のみにします。デフォルトはfalseで、完全なURLを表示します

オプションを利用する場合は、次のように設定します。

1
import remark from "remark";
2
import rlc from "remark-link-card";
3

4
(async () => {
5
    const result = await remark()
6
        .use(rlc, {
7
            cache: true,
8
            shortenUrl: true
9
        })
10
        .process(exampleMarkdown)
11

12
    console.log(result.contents);
13
})();

1
import { defineConfig } from "astro/config";
2
import rlc from "remark-link-card";
3

4
// https://astro.build/config
5
export default defineConfig({
6
    // ...
7
    markdown: {
8
        remarkPlugins: [
9
            [
10
                rlc,
11
                {
12
                    cache: true,
13
                    shortenUrl: true
14
                }
15
            ]
16
        ]
17
    }
18
});

リンクカードを表示する方法

リンクカードを表示するには、Markdownファイル内にベアリンク（むき出しのURL）を記述します。ベアリンクではないリンクは、カードに変換されません。また、1行に複数のリンクがある場合も変換されません。

次のコードは、リンクカードが表示される例です。

1
## リンクカードが表示される
2

3
https://example.com
4

5
<https://example.com>

次のコードは、リンクカードが表示されない例です。

1
## リンクカードが表示されない
2

3
[リンクカードが表示されない](https://example.com)
4

5
https://example.com https://example.com

Markdownではリンクを< >で囲っても囲わなくても動作します。MDXではエラーが出るため、リンクを< >で囲わないことをオススメします。

まとめ

この記事では、Markdownでリンクカードを表示するための「remark-link-card」の使い方について解説しました。

リンクカードを手軽に実装できるので、ぜひ使ってみてください。

参考

• gladevise/remark-link-card