Makonote

AstroブログでcanonicalとsitemapとOGPを最初に設定する

Astroでブログを作るなら、記事を書く前にcanonical、sitemap、OGPを入れておくと後が楽です。

デザインは後から直せますが、URLまわりの設定は記事が増えるほど直しにくくなります。

siteを設定する

astro.config.mjs に site を設定します。

import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap()],
});

site はcanonical URLやsitemap生成で使われます。

Astroの設定項目はConfiguration Referenceにまとまっています。

https://docs.astro.build/en/reference/configuration-reference/#site

sitemapを入れる

Astro公式のsitemap integrationを使います。

npm install @astrojs/sitemap
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  site: 'https://example.com',
  integrations: [sitemap()],
});

公式ドキュメントはこちらです。

https://docs.astro.build/en/guides/integrations-guide/sitemap/

静的ブログなら、build時にsitemapが生成されます。

canonicalを出す

共通レイアウトでcanonicalを作ります。

---
const { title, description } = Astro.props;
const canonicalUrl = new URL(Astro.url.pathname, Astro.site).href;
---

<head>
  <title>{title}</title>
  <meta name="description" content={description} />
  <link rel="canonical" href={canonicalUrl} />
</head>

Astro.url.pathname と Astro.site から、現在ページのcanonicalを作る形です。

OGPも同じ場所で出す

SNS共有を考えるなら、OGPもレイアウトに寄せます。

<meta property="og:site_name" content="Makonote" />
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:url" content={canonicalUrl} />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary" />

記事ページだけ og:type を article にしたい場合は、layoutのpropsで渡すようにします。

<BaseLayout title="..." description="..." ogType="article">

まとめ

AstroブログのSEOまわりは、最初に共通レイアウトへ寄せます。

  • astro.config.mjs に site
  • @astrojs/sitemap を追加
  • レイアウトでcanonicalを出す
  • OGPもレイアウトで出す
  • 記事ページは og:type=article

記事を書き始める前にここまで入れておくと、後から全ページを直す必要が減ります。

関連記事

参考