Markdownでリンクカードを表示する「remark-link-card」の使い方
ブログなどでは、リンクを埋め込む際にリンクカードを表示することがあります。リンクカードは、リンク先のページのタイトルやサムネイル、概要などを一覧表示でき、リンク先の情報を簡単に把握できるため、ユーザーにとって便利な機能です。
この記事では、Markdownでリンクカードを表示するための 「remark-link-card」の使い方について解説します。
remark-link-cardとは?
![remark-link-cardのnpmページ](/_astro/image._W9UMJgW_Z56RD.webp)
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を追加します。
1import remark from "remark";2import 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を追加します。
1import { defineConfig } from "astro/config";2import rlc from "remark-link-card";3
4// https://astro.build/config5export 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を表示します
オプションを利用する場合は、次のように設定します。
1import remark from "remark";2import rlc from "remark-link-card";3
4(async () => {5 const result = await remark()6 .use(rlc, {7 cache: true,8 shortenUrl: true9 })10 .process(exampleMarkdown)11
12 console.log(result.contents);13})();
1import { defineConfig } from "astro/config";2import rlc from "remark-link-card";3
4// https://astro.build/config5export default defineConfig({6 // ...7 markdown: {8 remarkPlugins: [9 [10 rlc,11 {12 cache: true,13 shortenUrl: true14 }15 ]16 ]17 }18});
リンクカードを表示する方法
リンクカードを表示するには、Markdownファイル内にベアリンク(むき出しのURL)を記述します。ベアリンクではないリンクは、カードに変換されません。また、1行に複数のリンクがある場合も変換されません。
次のコードは、リンクカードが表示される例です。
1## リンクカードが表示される2
3https://example.com4
5<https://example.com>
次のコードは、リンクカードが表示されない例です。
1## リンクカードが表示されない2
3[リンクカードが表示されない](https://example.com)4
5https://example.com https://example.com
Markdownではリンクを< >
で囲っても囲わなくても動作します。MDXではエラーが出るため、リンクを< >
で囲わないことをオススメします。
まとめ
この記事では、Markdownでリンクカードを表示するための「remark-link-card」の使い方について解説しました。
リンクカードを手軽に実装できるので、ぜひ使ってみてください。