NeatoJSConfiguration
SEO & Meta tags#
SEO is important to make your docs discoverable by search engine. By default, Guider does not provide much metadata. However it does make it very easy to add them through Next SEO.
The basics#
Page titles and descriptions can be set by creating a frontmatter section at the top of your MDX file.
---
title: "My title"
description: "My page description"
---
# A title
Some textBoth title and description are optional. If there are not specified, the title will be the first heading on the page and the description will be the first paragraph on the page.
Adding custom meta tags#
If you want to add more meta tags, you can do so by passing an object to the site options. You can check all the different options on the Next SEO Options page.
site('my-site', {
meta: {
titleTemplate: "%s - Guider",
openGraph: {
type: 'website',
url: 'https://www.example.com/page',
title: 'My site',
description: 'My description'
}
}
})In the case that you need more flexibility in meta tags or need to add JSON-LD, you can provide a function that returns a component, which can make use of the useGuiderPage() hook.
You will need to install next-seo into your project to use this method.
As the only parameter, default meta tags are passed into your function.
import { BreadcrumbJsonLd, NextSeo } from 'next-seo';
import { useGuiderPage } from '@neato/guider/client';
site('my-site', {
meta(pageMeta) {
const { site } = useGuiderPage();
return (
<>
<NextSeo
{...pageMeta} // Add default guider meta tags
titleTemplate={`%s - ${site.id}`}
/>
<BreadcrumbJsonLd
itemListElements={[
{
position: 1,
name: 'Docs',
item: 'https://example.com/docs',
}
]}
/>
</>
);
}
});When you're using a function to render the meta tags, the default meta tags aren't added. You will need to add them yourself as shown in the example.