검색 엔진 최적화(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>
);
}