diff --git a/lib/ui/src/components/preview/preview.js b/lib/ui/src/components/preview/preview.js
index dbbf46926d73..9009ffddc530 100644
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@@ -195,6 +195,10 @@ const getTools = memoize(10)(
   }
 );
 
+const getDocumentTitle = description => {
+  return description ? `${description} ⋅ Storybook` : 'Storybook';
+};
+
 class Preview extends Component {
   shouldComponentUpdate({ storyId, viewMode, options, queryParams }) {
     const { props } = this;
@@ -280,7 +284,7 @@ class Preview extends Component {
         <Fragment>
           {id === 'main' && (
             <Helmet key="description">
-              <title>{description ? `${description} ⋅ ` : ''}Storybook</title>
+              <title>{getDocumentTitle(description)}</title>
             </Helmet>
           )}
           <Toolbar key="toolbar" shown={options.isToolshown} border>
diff --git a/lib/ui/src/containers/preview.js b/lib/ui/src/containers/preview.js
index 216d7a52fb62..4d7771f935d8 100644
--- a/lib/ui/src/containers/preview.js
+++ b/lib/ui/src/containers/preview.js
@@ -10,12 +10,16 @@ const doubleSpace = /\s\s/gi;
 const replacer = match => ` ${match} `;
 const addExtraWhiteSpace = input =>
   input.replace(nonAlphanumSpace, replacer).replace(doubleSpace, ' ');
+const getDescription = (storiesHash, storyId) => {
+  const storyInfo = storiesHash[storyId];
+  return storyInfo ? addExtraWhiteSpace(`${storyInfo.kind} - ${storyInfo.name}`) : '';
+};
 
-const mapper = ({ api, state: { layout, location, selected, customQueryParams } }) => ({
+const mapper = ({ api, state: { layout, location, customQueryParams, storiesHash, storyId } }) => ({
   api,
   getElements: api.getElements,
   options: layout,
-  description: selected ? addExtraWhiteSpace(`${selected.kind} - ${selected.name}`) : '',
+  description: getDescription(storiesHash, storyId),
   ...api.getUrlState(),
   queryParams: customQueryParams,
   location,