GitHub/storybook
1
0
Fork 0
mirror of https://github.com/storybookjs/storybook.git synced 2025-04-05 16:11:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #18682 from storybookjs/seo-page-2

Browse Source 
docs: Update SEO documentation for `7.0` features
This commit is contained in:
jonniebigodes 2022-07-11 17:40:10 +01:00 committed by GitHub
commit ad1b593921
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
docs/sharing/publish-storybook.md
View File

@ -147,6 +147,20 @@ Examples: [Netlify](https://www.netlify.com/), [S3](https://aws.amazon.com/en/s3
If your Storybook is publically viewable, you may wish to configure how it is represented in search engine result pages. If your Storybook is publically viewable, you may wish to configure how it is represented in search engine result pages.
### Title
Storybook will generate the document title (i.e. `<title>`) for you automatically, to include the currently-viewed component and story. By default, it looks something like "Components / Button - Primary ⋅ Storybook". You can modify the "Storybook" portion by adding the following to the `main.js` file in your config directory:
<!-- prettier-ignore-start -->
<CodeSnippets
paths={[
'common/seo-title.js.mdx',
]}
/>
<!-- prettier-ignore-end -->
### Description ### Description
You can provide a description for search engines to display in the results listing, by adding the following to the `manager-head.html` file in your config directory: You can provide a description for search engines to display in the results listing, by adding the following to the `manager-head.html` file in your config directory:
@ -161,10 +175,6 @@ You can provide a description for search engines to display in the results listi
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
<div class="aside">
💡 You cannot also define <code>&lt;title></code> in this file, because Storybook generates the document title for you to include information about the currently-viewed component and story.
</div>
### Preventing your Storybook from being crawled ### Preventing your Storybook from being crawled
You can prevent your published Storybook from appearing in search engine results by including a noindex meta tag, which you can do by adding the following to the `manager-head.html` file in your config directory: You can prevent your published Storybook from appearing in search engine results by including a noindex meta tag, which you can do by adding the following to the `manager-head.html` file in your config directory:

5
docs/snippets/common/seo-title.js.mdx Normal file
View File

@ -0,0 +1,5 @@
```js
// .storybook/main.js
export const title = 'My awesome project';
```