【OGP】Next.js + microCMSを使って、リンクカードを作ってみた

<meta property="og:title" content="ページのタイトル">
<meta property="og:description" content="ページの説明文">
<meta property="og:image" content="画像のURL">
<meta property="og:url" content="ページのURL">

'use server';

import ogs from 'open-graph-scraper';

interface OgpResult {
  title: string;
  image: string;
  domain: string;
  url: string;
  favicon: string;
}

export async function getOgp(url: string): Promise<OgpResult> {
  const domain = new URL(url).hostname; // URLからドメイン名を取得
  const defaultFavicon = new URL('/favicon.ico', url).toString(); // デフォルトのファビコンURL

  try {
    const { result } = await ogs({ url }); // open-graph-scraperでOGP情報を取得

    // 取得した情報からタイトル、画像、ファビコンを抽出
    // 型アサーションを使って型を明示的に指定

    const title = (result.ogTitle as string) ?? '';
    const image = (result.ogImage && result.ogImage[0]?.url as string) ?? ''; // 画像は配列で返ってくることがあるので注意

    const favicon = (result.favicon as string) ?? defaultFavicon; // ファビコンがなければデフォルト画像を適用する
    return { title, image, domain, url, favicon };
  } catch (error) {
    // エラーが発生した場合も、最低限の情報を返す
    console.error(`OGP取得エラー for ${url}:`, error);
    return { title: '', image: '', domain, url, favicon: defaultFavicon };
  }
}

import Link from 'next/link';
import Image from 'next/image';
import { getOgp } from '@/app/_action/getOgp'; // サーバーアクションをインポート

interface LinkCardProps {
  url: string;
}

const LinkCard = async ({ url }: LinkCardProps) => {
  // サーバーアクションを呼び出してOGP情報を取得
  const ogp = await getOgp(url);
  const serverDomain = process.env.SERVER_DOMAIN; // 環境変数から自分のサイトのドメインを取得
  let isDomainFlag = false; // 自分のサイト内のリンクかどうかを判定するフラグ

  // --- 同ドメイン判定ロジック ---
  if (serverDomain) {
    // www. の有無を無視してドメインを比較するため、正規化します
    const normalizedDomain = ogp.domain.replace(/^www\./, '');
    const normalizedServerDomain = new URL(serverDomain).hostname.replace(/^www\./, '');

    if (normalizedDomain === normalizedServerDomain) {
      // 自分のサイト内のリンクの場合、パスだけにする
      const parsed = new URL(ogp.url);
      ogp.url = parsed.pathname + parsed.search + parsed.hash;
      isDomainFlag = true;
    }
  }

  return (
   // Linkコンポーネントでリンク全体を囲む
   <Link
     href={ogp.url}
     target={isDomainFlag ? '_self' : '_blank'} // 自分のサイトなら同じタブで、外部サイトなら新しいタブで開く
     rel={isDomainFlag ? '' : 'noopener noreferrer'} // セキュリティ対策
     className="block border border-gray-200 rounded-lg overflow-hidden shadow-md hover:shadow-lg transition-shadow duration-300 mb-4"
   >
     <div className="flex items-center p-4">
       {ogp.image ? (
         <div className="w-24 h-24 mr-4 flex-shrink-0">
           <Image
             src={ogp.image}
             alt={ogp.title || 'OGP Image'}
             width={96}
             height={96}
             className="object-cover rounded-md"
           />
         </div>
       ) : (
         <div className="w-24 h-24 mr-4 flex-shrink-0 bg-gray-100 flex items-center justify-    center rounded-md text-gray-500">
           {/* 画像がない場合のプレースホルダー */}
           No Image
         </div>
       )}
       <div className="flex-grow">
         <h3 className="text-lg font-semibold text-gray-800 line-clamp-2">
           {ogp.title || ogp.url}
         </h3>
         <p className="text-sm text-gray-600 line-clamp-1 mt-1">
           {ogp.domain}
         </p>
       </div>
     </div>
   </Link>
  );
};

export default LinkCard;

// features/article/components/ArticleRichEditor/ArticleRichEditor.tsx
import parse, { DOMNode, Element } from 'html-react-parser';
import React from 'react';
import LinkCard from '../LinkCard/LinkCard'; // 作成したLinkCardコンポーネントをインポート

type ArticleRichEditorProps = {
  richEditor: string; // microCMSから取得したHTML文字列
};

const ArticleRichEditor = async ({
  richEditor,
}: ArticleRichEditorProps): Promise<React.ReactElement> => {
  // microCMSのリッチエディタのカスタムクラス「link-card」に対応するための正規化処理
  // span.link-card を含む様々なパターンを a.link-card に正規化します。
  // これにより、後続のparse処理でaタグとして認識しやすくなります。

  const normalizedHtml = richEditor
   // <p><span class="link-card">URL</span></p> パターンを a.link-card に変換
   .replace(
     /<p[^>]*>\s*<span class="link-card">([^<]+)<\/span>\s*<\/p>/g,
     '<a href="$1" class="link-card">$1</a>',
   )  

   // <span class="link-card">URL</span> 単体パターンを a.link-card に変換
   .replace(
     /<span class="link-card">([^<]+)<\/span>/g,
     '<a href="$1" class="link-card">$1</a>',
   )

   // 既存のaタグ内に span.link-card があるパターンも a.link-card に変換
   .replace(
     /<a([^>]*)href="([^"]+)"([^>]*)>\s*<span class="link-card">(.*?)<\/span>\s*<\/a>/g,
     '<a href="$2" class="link-card">$4</a>',
   );

   const options = {
       // HTMLの各ノードを解析する際のオプション
     replace: (domNode: DOMNode) => {
       // もし現在のノードがHTML要素（例: <a>タグ）で、
       // かつ、そのタグ名が'a'であり、
       // さらに、class属性に'link-card'が含まれている場合
       if (
         domNode instanceof Element &&
         domNode.name === 'a' &&
         domNode.attribs.class?.split(' ').includes('link-card')
       ) {
         // そのaタグのhref属性からURLを取得
         const href = domNode.attribs.href;
         // 取得したURLを使ってLinkCardコンポーネントをレンダリング
         return <LinkCard url={href} />; 
       }
      // それ以外のノードはデフォルトの処理に任せる（そのままレンダリングする）
    },
  };

  return (
    <div className="aricleContents pb-14">{parse(normalizedHtml, options)}</div>
  );
};

export default ArticleRichEditor;

import ArticleRichEditor from '@/features/article/components/ArticleRichEditor/ArticleRichEditor';

export default async function ArticleDetailPage({ params }: { params: { id: string } }) {
  const article = await getArticleById(params.id); // microCMSのAPIから記事データを取得する関数
  if (!article) {
    return <div>記事が見つかりません。</div>;
  }

  return (
    <div>
      <h1>{article.title}</h1>
      {/* microCMSのリッチエディタのコンテンツを渡す */}
      <ArticleRichEditor richEditor={article.body} />
    </div>
  );
}