EmDash は、コンテンツエントリ、ページの head、サイトマップ、robots.txt、リダイレクトに対する検索エンジン最適化(SEO)機能を提供します。ほとんどの機能は、コレクションで SEO を有効にし、サイトがページの head で <EmDashHead> をレンダリングすれば動作します。
| 機能 | 出力 | 必要なもの |
|---|---|---|
| SEO パネル | エントリごとのタイトル、説明、画像、正規 URL、no-index | コレクションで SEO を有効化 |
| head メタデータ | description、robots、canonical、Open Graph、Twitter Card のタグ | ページの head に <EmDashHead> |
| 構造化データ | JSON-LD の BlogPosting または WebSite | ページの head に <EmDashHead> |
| サイトマップ | /sitemap.xml と /sitemap-{collection}.xml | コレクションで SEO を有効化 |
robots.txt | サイトマップへの参照を含む /robots.txt | 不要 |
| サイト全体の設定 | 所有権確認タグ、デフォルトのソーシャル画像、タイトル区切り文字 | Settings > SEO の値 |
| 翻訳 | head とサイトマップ内の hreflang リンク | Astro i18n の設定 |
| リダイレクトと 404 ログ | リダイレクトと gone のルール、見つからなかった URL のログ | 不要 |
コレクションで SEO を有効にする
EmDash 管理画面の Content Types で、コレクションの SEO をオンにします。シードファイルでは、コレクションの supports 配列に "seo" を追加します。
{
"version": "1",
"collections": [
{
"slug": "posts",
"label": "Posts",
"urlPattern": "/posts/{slug}",
"supports": ["drafts", "revisions", "seo"],
"fields": [{ "slug": "title", "label": "Title", "type": "string", "required": true }]
}
]
}
SEO を有効にすると、保存済みエントリのエディターに SEO パネルが表示され、コレクションがサイトマップに含まれます。Routable がオフのコレクションはサイトマップに含まれません。
エントリごとの SEO フィールドを編集する
エントリエディターの SEO パネルには、次のフィールドがあります。
- OG Image は、ソーシャルプレビュー画像(
og:image)であり、サイトマップでそのエントリに対して記載される画像です。 - SEO Title は、ソーシャルプレビューと構造化データ内、およびページが
getSeoMeta()からタイトルをレンダリングする場合は<title>内で、エントリのタイトルに置き換わります。 - Meta Description は、検索結果のタイトルの下に表示される要約です。パネルは 160 文字の目安に対して文字数をカウントします。
- Canonical URL は、別の URL から複製されたページについて、元のバージョンを検索エンジンに示します。
- Hide from search engines は、ページに
noindex, nofollowを追加し、エントリをサイトマップとhreflangの代替リンクから除外します。
空のフィールドは、ページが createPublicPageContext() に渡す値にフォールバックします。getSeoMeta() は、エントリの title と excerpt フィールドにフォールバックします。
コンテンツページに SEO メタデータをレンダリングする
<EmDashHead> は、ページコンテキストに対する SEO メタデータをレンダリングします。コンテンツページでは、エントリのコレクションとデータベース ID を content として渡すと、<EmDashHead> がエントリの SEO パネルの値を適用します。
次の例は、投稿ページの head をレンダリングします。getSeoMeta() が <title> と正規 URL を解決し、<EmDashHead> が残りのタグをレンダリングします。
---
import { decodeSlug, getEmDashEntry, getSeoMeta, getSiteSettings } from "emdash";
import { createPublicPageContext } from "emdash/page";
import { EmDashHead } from "emdash/ui";
const slug = decodeSlug(Astro.params.slug);
if (!slug) return Astro.rewrite("/404");
const { entry: post } = await getEmDashEntry("posts", slug);
if (!post) return Astro.rewrite("/404");
const settings = await getSiteSettings();
const seo = getSeoMeta(post, {
siteTitle: settings.title,
siteUrl: settings.url || Astro.url.origin,
titleSeparator: settings.seo?.titleSeparator,
path: Astro.url.pathname,
});
const page = createPublicPageContext({
Astro,
kind: "content",
title: seo.title,
pageTitle: seo.ogTitle,
description: seo.description,
canonical: seo.canonical,
siteName: settings.title,
content: { collection: "posts", id: post.data.id, slug: post.data.slug },
});
---
<html lang="en">
<head>
<meta charset="utf-8" />
<title>{seo.title}</title>
<EmDashHead page={page} />
</head>
<body>
<h1>{post.data.title}</h1>
</body>
</html>
<EmDashHead> は次のタグをレンダリングします。
- メタ description。
- エントリが検索エンジンから非表示の場合の robots ディレクティブ。
- ページコンテキストまたはエントリが正規 URL を設定している場合の canonical リンクと
og:url。 - Open Graph タグ(
og:type、og:title、og:description、og:image、og:site_name)と Twitter Card タグ。ページに画像がない場合、og:imageにはサイト設定のデフォルトのソーシャル画像が使われます。 - ページコンテキストに
articleMetaが含まれる場合のarticle:published_time、article:modified_time、article:author。
<EmDashHead> は <title> 要素をレンダリングしません。例のように、ページまたはレイアウトでレンダリングしてください。
コンテンツエントリではないページには、kind: "custom" を使用します。サイト設定に、サイト設定からカスタムのページコンテキストを構築するレイアウトの例があります。
プラグインは、page:metadata フックを通じて head タグを追加または置き換えられます。同じタグについては、プラグインの値がサイト設定より優先され、サイト設定がページコンテキストから生成された値より優先されます。
構造化データ
ページコンテキストに必要なデータがある場合、<EmDashHead> はページに JSON-LD スクリプトを 1 つ追加します。
- 正規 URL を持つ記事ページには、ページコンテキストが提供する見出し、説明、画像、公開日と更新日、著者、発行者を含む
BlogPostingグラフが追加されます。kind: "content"は、ページコンテキストが別のタイプを設定していない限り、pageTypeを"article"に設定します。 - それ以外のタイプのページには、ページコンテキストに
siteNameが含まれる場合、サイト名と URL を含むWebSiteグラフが追加されます。
JSON-LD は、エディターの SEO パネルの値を含め、Open Graph タグと同じタイトル、説明、画像を使用します。プラグインは page:metadata フックでこれを置き換えられます。
サイトマップ
EmDash は /sitemap.xml でサイトマップインデックスを提供します。掲載対象のエントリが 1 つ以上あるコレクションごとに、/sitemap-{collection}.xml の子サイトマップへリンクします。
コレクションのサイトマップには、公開済みで、削除されておらず、スラッグがあり、検索エンジンから非表示になっていないエントリが掲載されます。各 URL はコレクションの URL パターンから構築され、パターンがない場合は /{collection}/{slug} になります。エントリの SEO 画像は Google の画像サイトマップ拡張で掲載されます。
各子サイトマップには最大 2,000 件のエントリが含まれ、エントリ ID 順に並びます。そのため、エントリを編集しても別のページへ移動することはありません。これより大きなコレクションは、/sitemap-{collection}-2.xml、/sitemap-{collection}-3.xml と続きます。インデックスには、すべてのページが、そのページで最も最近更新されたエントリの日付とともに掲載されます。
サイトマップの URL を Google Search Console または Bing Webmaster Tools に追加すると、そこでインデックス状況を確認できます。
robots.txt
EmDash は /robots.txt を提供します。デフォルトでは、すべてのクローラーを許可し、/_emdash/ を禁止し、サイトマップを参照します。
User-agent: *
Allow: /
# Disallow admin and API routes
Disallow: /_emdash/
Sitemap: https://example.com/sitemap.xml
デフォルトを置き換えるには、Settings > SEO > robots.txt にカスタムの内容を入力します。カスタムの内容に Sitemap: 行がない場合、EmDash が追加します。
robots.txt とサイトマップは、Settings > General の Site URL、次に siteUrl オプションまたは環境変数 EMDASH_SITE_URL、最後にリクエストのオリジンの順で、絶対 URL を構築します。URL が公開ドメインと一致するよう、いずれかを設定してください。ブラウザーや共有キャッシュは、robots.txt を最大 1 日、サイトマップを最大 1 時間保持することがあります。
サイト全体の SEO 設定
EmDash 管理画面の Settings > SEO には、次の値があります。
- Title Separator は、ページタイトルとサイト名の間のテキストです。コンテンツページの例のように、ページが
settings.seo.titleSeparatorをtitleSeparatorとしてgetSeoMeta()に渡すと有効になります。 - Default Social Image は、独自の画像を持たないページの
og:imageです。<EmDashHead>が適用します。 - Google Verification と Bing Verification は、Google Search Console と Bing Webmaster Tools に対してサイトの所有権を証明する
google-site-verificationとmsvalidate.01のメタタグを追加します。<EmDashHead>がすべてのページに追加します。 - robots.txt は、デフォルトの
robots.txtを置き換えます。
翻訳されたコンテンツ
Astro i18n が設定されている場合、EmDash は検索エンジン向けにエントリの翻訳同士をリンクします。
<EmDashHead>は、公開済みの各翻訳に対する<link rel="alternate" hreflang="...">とx-defaultリンクを追加します。ページの head にhreflangリンクを追加するを参照してください。- 各コレクションのサイトマップは、すべての翻訳を、
xhtml:linkの代替リンク付きの個別の URL として掲載します。国際化ガイドのサイトマップを参照してください。
リダイレクトと 404 ログ
ルールは EmDash 管理画面の Redirects で管理します。ルールは、ソースパスをステータス 301、302、307、308 で宛先にリダイレクトするか、410 Gone または 451 Unavailable For Legal Reasons で応答します。ソースパスは、名前付きセグメント(/old/[slug])とキャッチオールセグメント(/old-blog/[...path])を受け付け、宛先で再利用できます。
公開済みエントリのスラッグが変わると、EmDash はコレクションの URL パターンに基づいて、古い URL から新しい URL への 301 リダイレクトを作成します。古い URL を指していた既存のリダイレクトチェーンは 1 つにまとめられます。翻訳など別のエントリがまだ古いスラッグを使っている間は、リダイレクトを作成しません。
EmDash は、404 レスポンスで終わるリクエストを記録します。Redirects ページの 404 Errors タブには、最も頻繁に見つからなかったパスが表示されます。それぞれについて、リダイレクトを追加するか、ページが削除されたことを検索エンジンに伝える gone(410)としてマークできます。ログには最大 10,000 件のパスが保持され、最も長く見られていないものから破棄されます。
シードファイルでもリダイレクトを定義できます。シードファイルリファレンスの Redirects を参照してください。
インポートされた SEO データ
EmDash Exporter を使った WordPress インポートでは、Yoast と Rank Math の SEO タイトルと説明を、ターゲットのコレクションの SEO Title と SEO Description フィールドにコピーできます。これらは SEO パネルとは別の通常のコンテンツフィールドなので、ページテンプレートでレンダリングする必要があります。
サイトの移行では、SEO パネルの値、SEO 設定、リダイレクトが別の EmDash サイトにコピーされます。ターゲットサイトは独自のサイト URL を保持し、そのサイトマップと robots.txt はそれを使用します。