diff --git a/docs/sharing/publish-storybook.md b/docs/sharing/publish-storybook.md
index 9e874e7f4f2..adc3f2b6683 100644
--- a/docs/sharing/publish-storybook.md
+++ b/docs/sharing/publish-storybook.md
@@ -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.
 
+### 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
 
 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 -->
 
-<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
 
 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:
diff --git a/docs/snippets/common/seo-title.js.mdx b/docs/snippets/common/seo-title.js.mdx
new file mode 100644
index 00000000000..d6c918dabf6
--- /dev/null
+++ b/docs/snippets/common/seo-title.js.mdx
@@ -0,0 +1,5 @@
+```js
+// .storybook/main.js
+
+export const title = 'My awesome project';
+```