組み込みの SEO 機能

このページ

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 はそれを使用します。