검색 엔진 최적화(SEO)
도큐사우루스는 다양한 방식으로 검색 엔진 최적화를 지원합니다.
글로벌 메타데이터
사이트 구성을 통해 전체 사이트에 대한 글로벌 메타 속성을 제공합니다. 메타데이터는 모두 키-값 쌍을 속성 이름과 값으로 사용해 HTML <head>
로 렌더링됩니다. 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',
}),
},
],
},
};
도큐사우루스는 일부 메타데이터를 기본 제공합니다. 예를 들어 i18n을 설정하면 hreflang
대체 링크가 생성됩니다.
메타 태그 유형에 대해서는 MDN 문서를 참고하세요.
단일 페이지 메타데이터
도큐사우루스에서는 글로벌 메타데이터와 비슷하게 개별 페이지에 메타 정보를 추가할 수 있 습니다. <head>
태그 설정에 대해서는 이 문서를 참고하세요. 다음과 같은 형태입니다.
# 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...
도큐사우루스는 자동으로 각 마크다운 페이지에 description
, title
, 표준 URL 링크와 함께 다른 유용한 메타데이터를 추가합니다. 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]
---
리액트 페이지를 만들 때 Layout
에 이런 필드를 추가하면 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:
JSX 페이지에서 도큐사우루스 <Head>
컴포넌트를 사용할 수 있습니다.
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>
);
}