검색 엔진 최적화(SEO)
도큐사우루스는 다양한 방식으로 검색 엔진 최적화를 지원합니다.
Global metadata
Provide global meta attributes for the entire site through the site configuration. The metadata will all be rendered in the HTML <head> using the key-value pairs as the prop name and value. The metadata attribute is a convenient shortcut to declare <meta> tags, but it is also possible to inject arbitrary tags in <head> with the headTags attribute.
export default {
themeConfig: {
// Declare some <meta> tags
metadata: [
{name: 'keywords', content: 'cooking, blog'},
{name: 'twitter:card', content: 'summary_large_image'},
],
},
headTags: [
// Declare a <link> preconnect tag
{
tagName: 'link',
attributes: {
rel: 'preconnect',
href: 'https://example.com',
},
},
// Declare some json-ld structured data
{
tagName: 'script',
attributes: {
type: 'application/ld+json',
},
innerHTML: JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
}),
},
],
};
도큐사우루스는 일부 메타데이터를 기본 제공합니다. For example, if you have configured i18n, you will get a hreflang alternate link.
To read more about types of meta tags, visit the MDN docs.
Single page metadata
Similar to global metadata, Docusaurus also allows for the addition of meta-information to individual pages. Follow this guide for configuring the <head> tag. 다음과 같은 형태입니다.
# A cooking guide
<head>
<meta name="keywords" content="cooking, blog" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</head>
Some content...
Docusaurus automatically adds description, title, canonical URL links, and other useful metadata to each Markdown page. They are configurable through front matter:
---
title: Title for search engines; can be different from the actual heading
description: A short description of this page
image: a thumbnail image to be shown in social media cards
keywords: [keywords, describing, the main topics]
---
When creating your React page, adding these fields in Layout would also improve SEO.
Prefer to use front matter for fields like description and keywords: Docusaurus will automatically apply this to both description and og:description, while you would have to manually declare two metadata tags when using the <head> tag.
The official plugins all support the following front matter: title, description, keywords and image. Refer to their respective API documentation for additional front matter support:
For JSX pages, you can use the Docusaurus <Head> component.
import React from 'react';
import Layout from '@theme/Layout';
import Head from '@docusaurus/Head';
export default function page() {
return (
<Layout title="Page" description="A React page demo">
<Head>
<meta property="og:image" content="image.png" />
<meta name="twitter:card" content="summary_large_image" />
<link rel="preconnect" href="https://example.com" />
<script type="application/ld+json">
{JSON.stringify({
'@context': 'https://schema.org/',
'@type': 'Organization',
name: 'Meta Open Source',
url: 'https://opensource.fb.com/',
logo: 'https://opensource.fb.com/img/logos/Meta-Open-Source.svg',
})}
</script>
</Head>
{/* ... */}
</Layout>
);
}
For convenience, the default theme <Layout> component accept title and description as props.
Static HTML generation
도큐사우루스는 정적 사이트 생성 도구입니다. 모든 URL 경로에 HTML 파일이 정적으로 생성됩니다. 이런 방식은 검색 엔진이 여러분의 콘텐츠를 좀 더 쉽게 찾을 수 있도록 도와줍니다.
Image meta description
이미지 alt 태그는 검색 엔진에게 어떤 이미지인지 알려주며 이미지를 시각적으로 사용할 수 없을 때 사용되기도 합니다. 예를 들면 스크린 리더를 사용하거나 또는 이미지 로딩에 실패했을 때입니다. 마크다운에서 alt 태그는 기본적으로 지원되는 기능입니다.
이미지에 제목을 추가할 수도 있습니다. SEO에 영향을 미치지는 않지만 이미지 위로 마우스를 가져갔을 때 툴팁으로 표시되어 이미지에 대한 정보를 제공할 수 있습니다.
Rich search information
Docusaurus blogs support rich search results out-of-the-box to get maximum search engine experience. 블로그/글로벌 구성의 메타 정보에 따라 정보가 생성됩니다. 풍부한 검색 정보의 혜택을 누리기 위해 게시물의 발행일, 작성자, 이미지 등의 정보를 입력하세요. Read more about the meta-information here.
Robots file
A robots.txt file regulates search engines' behavior about which should be displayed and which shouldn't. You can provide it as static asset. 아래 설정은 모든 하위 페이지에 대한 모든 요청의 접근을 허용합니다.
User-agent: *
Disallow:
Read more about the robots file in the Google documentation.
Important: the robots.txt file does not prevent HTML pages from being indexed.
To prevent your whole Docusaurus site from being indexed, use the noIndex site config. Some hosting providers may also let you configure a X-Robots-Tag: noindex HTTP header (GitHub Pages does not support this).
To prevent a single page from being indexed, use <meta name="robots" content="noindex"> as page metadata. Read more about the robots meta tag.
Sitemap file
Docusaurus provides the @docusaurus/plugin-sitemap plugin, which is shipped with preset-classic by default. It autogenerates a sitemap.xml file which will be available at https://example.com/[baseUrl]/sitemap.xml after the production build. 사이트맵 메타데이터는 검색 엔진 크롤러가 여러분의 사이트를 좀 더 정확하게 수집할 수 있도록 도와줍니다.
The sitemap plugin automatically filters pages containing a noindex robots meta directive.
For example, /examples/noIndex is not included in the Docusaurus sitemap.xml file because it contains the following page metadata:
<head>
<meta name="robots" content="noindex, nofollow" />
</head>
Human readable links
Docusaurus uses your file names as links, but you can always change that using slugs, see this tutorial for more details.
Structured content
Search engines rely on the HTML markup such as <h2>, <table>, etc., to understand the structure of your webpage. When Docusaurus renders your pages, semantic markup, e.g. <aside>, <nav>, <main>, are used to divide the different sections of the page, helping the search engine to locate parts like sidebar, navbar, and the main page content.
Most CommonMark syntaxes have their corresponding HTML tags. 프로젝트에서 일관성 있게 마크다운을 사용하면 검색 엔진이 페이지 콘텐츠를 좀 더 쉽게 이해할 수 있습니다.