Astro + microCMSでOGPタグを設定する（トップ・記事詳細）

2024/11/08 (金) - 09:00　JavaScript PHP&CMS

フロントサイドのフレームワークのAstroとヘッドレスCMSのmicroCMSでブログを作った時の話。トップページと記事詳細ページにそれぞれOGPを実装したときのメモです。もっと完結でシンプルないい方法があればいいなァ…などと。

環境は以下の通りで、microcms-js-sdkを利用。実装方法は公式ドキュメントに準じました。

microcms-js-sdk 3.1.x
Astro 4.16.x

ずんだもんのずんずんブログ

やりたいこと

トップページと記事詳細でog:typeを分ける（トップページ：website、記事詳細ページ：article）
トップページと記事詳細でog:imageを分ける（トップページ：決められた看板画像、記事詳細ページ：記事のアイキャッチ画像）
トップページと記事詳細でog:descriptionを分ける（トップページ：決められた文字、記事詳細ページ：記事の抜粋）
canonical（カノニカル）も指定する

microCMSで取得するフィールド

記事ID（id）＜記事詳細のURLのスラッグとする＞
ページタイトル（title）
記事本文（content）
記事の抜粋（excerpt）
アイキャッチ画像URL（eyecatch）
公開日（publishedAt）

.envファイル

サイト名やディスクリプション、APIのエンドポイントを指定します。

SiteTitle=ずんずんブログ
SiteDescription=カワイイずんだもんのブログをみるのだ
MICROCMS_SERVICE_DOMAIN=*****
MICROCMS_API_KEY=*****

astro.config.mjsファイル

公開するドメインを指定します。

import { defineConfig } from 'astro/config';
export default defineConfig({
  site: 'https://example.com'
})

Layout.astroファイル

head要素内のSEO関連タグなどをPropsから取得し指定します。さらに、Astro.url.pathnameでトップページか否かをを判定し、og:typeの分岐をしています。

---
const SiteTitle = import.meta.env.SiteTitle;
const Url = new URL(Astro.url.pathname, Astro.site);
const {Meta} = Astro.props;
const IsHome = Astro.url.pathname === '/';
const OgType = IsHome ? 'website' : 'article';
const PageTitle = IsHome ? SiteTitle : `${Meta.title} - ${SiteTitle}`;
---
<!DOCTYPE html>
<html lang="ja">
 <head prefix="og: https://ogp.me/ns#">
  <meta charset="UTF-8" />
  <meta content="width=device-width" name="viewport" />
  <meta content={Astro.generator} name="generator" />
  <meta content={Meta.description} name="description" />
  <meta content="max-image-preview:large" name="robots" />
  <meta property="og:title" content={Meta.title} />
  <meta property="og:type" content={OgType} name="og_type" />
  <meta property="og:site_name" content={SiteTitle} name="og_site_name" />
  <meta property="og:url" content={Url} name="og_url" />
  <meta property="og:image" content={Meta.image} name="og_image" />
  <meta property="og:description" content={Meta.description} name="og_description" />
  <meta content="summary_large_image" name="twitter:card" />
  <meta content={Meta.title} name="twitter:title" />
  <meta content={Meta.description} name="twitter:description" />
  <meta content={Meta.image} name="twitter:image" />
  <link rel="canonical" href={Url} />
  <title>{PageTitle}</title>
 </head>
 <body>
  <header>
   <h1>{SiteTitle}</h1>
  </header>
  <slot />
 </body>
</html>

CSSの読み込みやtouch-icon、faviconなどの指定は省略しています。

index.astroファイル(トップページ)

metaのOGPに指定するディスクリプションとOGP画像を指定した値に設定します。

---
import Layout from '../layouts/Layout.astro';
import { getBlogs } from '../library/microcms';
import { format } from 'date-fns';
const Meta = {
 title: 'トップページ',
 description: import.meta.env.SiteDescription,
 image: new URL('/asset/images/ogp.png', Astro.site)
}
const res = await getBlogs({ fields: ['id','title','excerpt','publishedAt'] });
---
<Layout Meta={Meta}>
 <main>
  <ul>
  {
  res.contents.map((content) => (
   <li><a href={content.id}>
    <h2>{content.title}</h2>
    <p><time>{format(new Date(content.publishedAt), 'yyyy年MM月dd日')}</time></p>
    <p>{content.excerpt}</p>
   </a></li>
  ))
  }
  </ul>
 </main>
</Layout>

[id].astroファイル(記事詳細ページ)

SSGのためのgetStaticPathsを記述するほか、APIから取得した記事データを表示し、metaのOGPに指定する情報を格納します。

---
import Layout from '../layouts/Layout.astro';
import { getBlogs, getBlogDetail } from '../library/microcms';
import { format } from 'date-fns';
export async function getStaticPaths() {
 const response = await getBlogs({ fields: ['id'] });
  return response.contents.map((content) => ({
   params: {
   id: content.id,
  }
 }));
}
const { id } = Astro.params;
const res = await getBlogDetail(id);
const Meta = {
 title: res.title,
 description: res.excerpt,
 image: res.eyecatch.url
}
---
<Layout Meta={Meta}>
 <main>
  <h1>{res.title}</h1>
  <p><time>{format(new Date(res.publishedAt), 'yyyy年MM月dd日')}</time></p>
  <div set:html={res.content}></div>
 </main>
</Layout>

あとは巡回して正常にOGPが指定されているか確認すればOKです。

おしまい♥

トラックバック & ピンバック

この記事へのトラックバックURI：: https://weblog.walk-life.me/astro_microcms_ogp/trackback/

にゃるぴの備忘録

HTML5やCSS3.0等のWeb＆フロントエンド系ネタの備忘録やメモを投稿するよ

Astro + microCMSでOGPタグを設定する（トップ・記事詳細）

やりたいこと

microCMSで取得するフィールド

.envファイル

astro.config.mjsファイル

Layout.astroファイル

index.astroファイル(トップページ)

[id].astroファイル(記事詳細ページ)

トラックバック & ピンバック

コメント

Astro + microCMSでOGPタグを設定する（トップ・記事詳細）

やりたいこと

microCMSで取得するフィールド

.envファイル

astro.config.mjsファイル

Layout.astroファイル

index.astroファイル(トップページ)

[id].astroファイル(記事詳細ページ)

おすすめ記事

トラックバック & ピンバック

コメント