E EmDash CMS Everything Guides, use cases, plugins, templates
한국어

기본 제공 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 스크립트를 하나 추가합니다.

  • 정규 URL이 있는 문서 페이지에는 페이지 컨텍스트가 제공하는 제목, 설명, 이미지, 게시일과 수정일, 작성자, 발행자가 담긴 BlogPosting 그래프가 추가됩니다. kind: "content"는 페이지 컨텍스트가 다른 유형을 설정하지 않는 한 pageType을 "article"로 설정합니다.
  • 그 외 유형의 페이지에는 페이지 컨텍스트에 siteName이 포함된 경우 사이트 이름과 URL이 담긴 WebSite 그래프가 추가됩니다.

JSON-LD는 편집기의 SEO 패널 값을 포함해 Open Graph 태그와 같은 제목, 설명, 이미지를 사용합니다. 플러그인은 page:metadata 훅으로 이를 대체할 수 있습니다.

사이트맵

EmDash는 /sitemap.xml에서 사이트맵 인덱스를 제공합니다. 나열된 항목이 하나 이상 있는 컬렉션마다 /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를 최대 하루, 사이트맵을 최대 한 시간 동안 보관할 수 있습니다.

사이트 전체 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을 가리키던 기존 리디렉션 체인은 하나로 합칩니다. 번역본처럼 다른 항목이 아직 이전 슬러그를 사용하는 동안에는 리디렉션을 만들지 않습니다.

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가 이를 사용합니다.