getOgpData.ts
import openGraphScraper, {
  OpenGraphImage,
  OpenGraphProperties,
} from 'open-graph-scraper';

export type OgpData = OpenGraphProperties & {
  ogImage?: OpenGraphImage | OpenGraphImage[] | undefined;
};

const getOgpData = async (floatingUrls: string[]): Promise<OgpData[]> => {
  const ogpDatas: OgpData[] = [];
  if (floatingUrls.length === 0) return ogpDatas;

  await Promise.all(
    floatingUrls.map(async (url) => {
      const options = { url, onlyGetOpenGraphInfo: true };
      return openGraphScraper(options)
        .then((data) => {
          // OGP によるデータ取得が失敗した場合
          if (!data.result.success) {
            return;
          }
          // OGP によるデータ取得が成功した場合
          ogpDatas.push(data.result);
        })
        .catch((error) => {
          // error を throw するとビルドできないため、コンソールに出力して return する
          // eslint-disable-next-line no-console
          console.log(error);
        });
    })
  );

  return ogpDatas;
};

export default getOgpData;

getFloatingUrls.ts
const getFloatingUrls = (md: string): string[] => {
  const regFloatUrl = /(?<!\()https?:\/\/[-_.!~*\\'()a-zA-Z0-9;\\/?:\\@&=+\\$,%#]+/g;
  const floatUrls = md.match(regFloatUrl);

  return floatUrls ?? [];
};

export default getFloatingUrls;

getDomainFromUrl.ts
/* eslint-disable prefer-destructuring */
const getDomainFromUrl = (url: string | undefined): string | undefined => {
  if (!url) return undefined;
  let result;
  let match;
  match = url.match(/^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:/\n?=]+)/im);
  if (match) {
    result = match[1];
    match = result.match(/^[^.]+\.(.+\..+)$/);
    if (match) {
      result = match[1];
    }
  }
  return result;
};

export default getDomainFromUrl;

getStaticProps
export const getStaticProps: GetStaticProps<Props, Params> = async (
  context
) => {
   /**
   * 省略
   * ここでMarkdownの記事を取得する。
   * 記事は post (string型) とする。
   */
  const floatingUrls = getFloatingUrls(post ?? '');
  const ogpDatas = await getOgpData(floatingUrls);
  return {
    props: {
      // 略
    },
  };
};

renderer.link
// Link の Renderer
renderer.link = (href, title, text) => {
  const sanitizedUrl = sanitizeUrl(href ?? undefined);
  const ogpData = ogpDatas.find(
    (data) => data.ogUrl && href?.startsWith(data.ogUrl)
  );

  if ((text !== href && `${text}/` !== href) || !ogpData) {
    return `
      <a href="${sanitizedUrl}" target="_blanck" 
        ${title ? `title="${title}">` : ''}
      >${text}</a>`;
  }

  const { ogImage } = ogpData;
  const image = Array.isArray(ogImage) ? ogImage[0] : ogImage;

  const domain = getDomainFromUrl(ogpData?.ogUrl);

  return `
    <div class="og-container">
      <a href=${ogpData?.ogUrl} target="_blanck" class="og-link">
        <div class="MuiPaper-root MuiPaper-outlined MuiPaper-rounded og-card">
          <div class="og-thumbnail-container">
            <img src="${image?.url}" alt="${ogpData?.ogTitle}" class="og-thumbnail"/>
          </div>
          <div class="og-text-container">
            <h1 class="og-title">${ogpData?.ogTitle}</h1>
            <p class="MuiTypography-colorTextSecondary og-description">${ogpData?.ogDescription}</p>
            <div class="og-domain-container">
              <img src="https://www.google.com/s2/u/0/favicons?domain=${domain}" alt="${domain}"/>
              <div class="og-domain-name">${domain}</div>
            </div>
          </div>
        </div>
      </a>
    </div>`;
};

og.scss
.og-container {
  .og-link {
    text-decoration: none;
    word-break: break-all;

    .og-card {
      width: 100%;
      height: 80px;
      overflow: hidden;
      display: flex;
      margin: 12px 0px;

      .og-thumbnail-container {
        position: relative;
        width: 80px;
        height: 80px;
        min-width: 80px;
        min-height: 80px;

        &::before {
          display: block;
          padding-top: 100%;
        }

        img.og-thumbnail {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          margin: auto;
          object-fit: cover;
        }
      }

      .og-text-container {
        width: calc(100% - 80px);
        transition: background-color 0.25s ease-in-out;
        letter-spacing: -0.15px;

        &:hover {
          background-color: rgba(128, 128, 128, 0.1);
          transition: background-color 0.25s ease-in-out;
        }

        .og-title {
          font-size: 1.1rem;
          line-height: 32px;
          margin: 4px 8px 0px 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .og-description {
          font-size: 0.85rem;
          line-height: 1rem;
          margin: 0px 8px 0px 12px;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .og-domain-container {
          height: 1rem;
          margin: 4px;
          display: flex;
          align-items: center;
          justify-content: flex-end;

          .og-domain-name {
            display: inline-block;
            font-size: 0.85rem;
            line-height: 1rem;
            margin: 0px 4px 0px 6px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}