From c3f5ac9069ba5b835a59718bace470246eac6b06 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Mon, 23 Dec 2019 22:22:12 +0700
Subject: [PATCH] Add keywords and description tags to all pages

---
 client/index.html                                      | 2 --
 client/pages/ExplorePage.tsx                           | 5 +++++
 client/pages/HomePage.tsx                              | 5 +++++
 client/patterns/accordion/Details.tsx                  | 5 +++++
 client/patterns/avatar-list/Details.tsx                | 5 +++++
 client/patterns/avatar/Details.tsx                     | 5 +++++
 client/patterns/badge/Details.tsx                      | 5 +++++
 client/patterns/breadcrumb/Details.tsx                 | 5 +++++
 client/patterns/button-with-icon/Details.tsx           | 5 +++++
 client/patterns/card/Details.tsx                       | 5 +++++
 client/patterns/centering/Details.tsx                  | 5 +++++
 client/patterns/chip/Details.tsx                       | 5 +++++
 client/patterns/circular-navigation/Details.tsx        | 5 +++++
 client/patterns/close-button/Details.tsx               | 5 +++++
 client/patterns/cookie-banner/Details.tsx              | 5 +++++
 client/patterns/corner-ribbon/Details.tsx              | 5 +++++
 client/patterns/custom-checkbox-button/Details.tsx     | 5 +++++
 client/patterns/custom-radio-button/Details.tsx        | 5 +++++
 client/patterns/docked-at-corner/Details.tsx           | 5 +++++
 client/patterns/dot-leader/Details.tsx                 | 5 +++++
 client/patterns/dot-navigation/Details.tsx             | 5 +++++
 client/patterns/drawer/Details.tsx                     | 5 +++++
 client/patterns/drop-area/Details.tsx                  | 5 +++++
 client/patterns/drop-cap/Details.tsx                   | 8 +++++---
 client/patterns/dropdown/Details.tsx                   | 5 +++++
 client/patterns/feature-comparison/Details.tsx         | 5 +++++
 client/patterns/feature-list/Details.tsx               | 5 +++++
 client/patterns/fixed-at-corner/Details.tsx            | 5 +++++
 client/patterns/fixed-at-side/Details.tsx              | 5 +++++
 client/patterns/floating-label/Details.tsx             | 5 +++++
 client/patterns/full-screen-menu/Details.tsx           | 5 +++++
 client/patterns/holy-grail/Details.tsx                 | 5 +++++
 client/patterns/initial-avatar/Details.tsx             | 5 +++++
 client/patterns/input-addon/Details.tsx                | 5 +++++
 client/patterns/keyboard-shortcut/Details.tsx          | 9 +++++++--
 client/patterns/media-object/Details.tsx               | 5 +++++
 client/patterns/menu/Details.tsx                       | 5 +++++
 client/patterns/modal/Details.tsx                      | 5 +++++
 client/patterns/notification/Details.tsx               | 5 +++++
 client/patterns/overlay-play-button/Details.tsx        | 5 +++++
 client/patterns/pagination/Details.tsx                 | 5 +++++
 client/patterns/popover-arrow/Details.tsx              | 5 +++++
 client/patterns/presence-indicator/Details.tsx         | 5 +++++
 client/patterns/previous-next-buttons/Details.tsx      | 5 +++++
 client/patterns/pricing-table/Details.tsx              | 5 +++++
 client/patterns/progress-bar/Details.tsx               | 5 +++++
 client/patterns/property-list/Details.tsx              | 5 +++++
 client/patterns/questions-and-answers/Details.tsx      | 5 +++++
 client/patterns/radial-progress-bar/Details.tsx        | 5 +++++
 client/patterns/radio-button-group/Details.tsx         | 5 +++++
 client/patterns/radio-switch/Details.tsx               | 5 +++++
 client/patterns/rating/Details.tsx                     | 5 +++++
 client/patterns/resizable-element/Details.tsx          | 5 +++++
 client/patterns/ribbon/Details.tsx                     | 5 +++++
 client/patterns/same-height-columns/Details.tsx        | 5 +++++
 client/patterns/search-box/Details.tsx                 | 5 +++++
 client/patterns/separator/Details.tsx                  | 5 +++++
 client/patterns/sidebar/Details.tsx                    | 5 +++++
 client/patterns/simple-grid/Details.tsx                | 5 +++++
 client/patterns/slider/Details.tsx                     | 5 +++++
 client/patterns/spin-button/Details.tsx                | 5 +++++
 client/patterns/split-navigation/Details.tsx           | 5 +++++
 client/patterns/split-screen/Details.tsx               | 5 +++++
 client/patterns/stepper-input/Details.tsx              | 5 +++++
 client/patterns/sticky-footer/Details.tsx              | 5 +++++
 client/patterns/sticky-header/Details.tsx              | 5 +++++
 client/patterns/sticky-sections/Details.tsx            | 5 +++++
 client/patterns/switch/Details.tsx                     | 5 +++++
 client/patterns/tab/Details.tsx                        | 5 +++++
 client/patterns/timeline/Details.tsx                   | 5 +++++
 client/patterns/toggle-password-visibility/Details.tsx | 5 +++++
 client/patterns/tooltip/Details.tsx                    | 5 +++++
 client/patterns/upload-button/Details.tsx              | 6 +++++-
 client/patterns/validation-icon/Details.tsx            | 5 +++++
 client/patterns/video-background/Details.tsx           | 5 +++++
 client/patterns/wizard/Details.tsx                     | 5 +++++
 76 files changed, 377 insertions(+), 8 deletions(-)

diff --git a/client/index.html b/client/index.html
index e08e50a..fb038a8 100644
--- a/client/index.html
+++ b/client/index.html
@@ -3,8 +3,6 @@
     <meta charset="utf-8" />
     <title>CSS layout</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="description" content="CSS layouts and patterns" />
-    <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
     <meta name="author" content="Nguyen Huu Phuoc" />
     <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro&display=swap" rel="stylesheet">
 </head>
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 01414d5..b64e66b 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import CoverCard from '../components/CoverCard';
@@ -14,6 +15,10 @@ const ExplorePage = () => {
 
     return (
         <Layout>
+            <Helmet>
+                <meta name="description" content="CSS layouts and patterns" />
+                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
+            </Helmet>
             <div style={{ margin: '32px 0' }}>
                 <Link
                     to="/"
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index 274c508..d882dfe 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import './home.css';
@@ -16,6 +17,10 @@ const HomePage = () => {
 
     return (
         <Layout>
+            <Helmet>
+                <meta name="description" content="CSS layouts and patterns" />
+                <meta name="keywords" content="css display, css flexbox, css grid, css layouts, flex, flexbox, flexbox cheatsheet, web design, web template" />
+            </Helmet>
             <div
                 style={{
                     border: '1px solid rgba(0, 0, 0, 0.2)',
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index 09ac3b3..ecc91d3 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -52,6 +53,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Accordion">
+            <Helmet>
+                <meta name="description" content="Create an accordion with CSS flexbox" />
+                <meta name="keywords" content="css accordion, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index 88665c6..78a9faa 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -28,6 +29,10 @@ const Avatar: React.FC<{}> = ({ children }) => {
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Avatar list">
+            <Helmet>
+                <meta name="description" content="Create an avatar list with CSS flexbox" />
+                <meta name="keywords" content="css avatar, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 281e7e8..dff9624 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -8,6 +9,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Avatar">
+            <Helmet>
+                <meta name="description" content="Create an avatar component with CSS flexbox" />
+                <meta name="keywords" content="css avatar, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 39db928..26044d7 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -8,6 +9,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Badge">
+            <Helmet>
+                <meta name="description" content="Create a badge component with CSS flexbox" />
+                <meta name="keywords" content="css badge, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index 51aa618..c1ce2f2 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Breadcrumb">
+            <Helmet>
+                <meta name="description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="keywords" content="css breadcrumb, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 1169e47..01abac7 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Button with icon">
+            <Helmet>
+                <meta name="description" content="Create an icon button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css icon button" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index 901e954..1ee33bf 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Card">
+            <Helmet>
+                <meta name="description" content="Create a card with CSS flexbox" />
+                <meta name="keywords" content="css card, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 121dee8..16095ba 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Centering">
+            <Helmet>
+                <meta name="description" content="Center an element with CSS flexbox" />
+                <meta name="keywords" content="css centering, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index bae45e6..ab13eed 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -10,6 +11,10 @@ import InputChip from './InputChip';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Chip">
+            <Helmet>
+                <meta name="description" content="Create a chip component with CSS flexbox" />
+                <meta name="keywords" content="css chip, css flexbox, css tag" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use a <Link to='/patterns/close-button'>close button</Link> to remove a chip.
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index d9df121..0e5b4ad 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -43,6 +44,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Circular navigation">
+            <Helmet>
+                <meta name="description" content="Create a circular navigation with CSS flexbox" />
+                <meta name="keywords" content="css circular navigation, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 313482e..563cc56 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -8,6 +9,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Close button">
+            <Helmet>
+                <meta name="description" content="Create a close button with CSS flexbox" />
+                <meta name="keywords" content="css close button, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index 73fecfb..3d75fba 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -10,6 +11,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Cookie banner">
+            <Helmet>
+                <meta name="description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="keywords" content="css cookie banner, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 8252c7f..2b73342 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import Heading from '../../components/Heading';
@@ -10,6 +11,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Corner ribbon">
+            <Helmet>
+                <meta name="description" content="Create a corner ribbon with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css ribbon" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index fbef519..dac6876 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -56,6 +57,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Custom checkbox button">
+            <Helmet>
+                <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="keywords" content="css checkbox, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index f601017..8fca33e 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -57,6 +58,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Custom radio button">
+            <Helmet>
+                <meta name="description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index d62b6b4..48b9db0 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -10,6 +11,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Docked at corner">
+            <Helmet>
+                <meta name="description" content="Dock an element at corner with CSS" />
+                <meta name="keywords" content="css docked, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index 165a44a..3cc1cbb 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -11,6 +12,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Dot leader">
+            <Helmet>
+                <meta name="description" content="Create dot leaders with CSS flexbox" />
+                <meta name="keywords" content="css dot leader, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index fbfe2d2..9edba0e 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -31,6 +32,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Dot navigation">
+            <Helmet>
+                <meta name="description" content="Create dot navigation with CSS flexbox" />
+                <meta name="keywords" content="css dot navigation, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
index 584cf27..f0dfe25 100644
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -7,6 +8,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Drawer">
+            <Helmet>
+                <meta name="description" content="Create a drawer navigation with CSS" />
+                <meta name="keywords" content="css drawer, css off-canvas" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     This pattern is also known as off-canvas.
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index 77b4def..810b553 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -7,6 +8,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Drop area">
+            <Helmet>
+                <meta name="description" content="Create a dropping area with CSS flexbox" />
+                <meta name="keywords" content="css dropping area, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index f17e8d9..3bbb1a0 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -1,16 +1,18 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import './dropcap.css';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
-import Block from '../../placeholders/Block';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Rectangle from '../../placeholders/Rectangle';
-import Square from '../../placeholders/Square';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Drop cap">
+            <Helmet>
+                <meta name="description" content="Create a drop cap with CSS" />
+                <meta name="keywords" content="css drop cap" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index 1644afb..da64ed8 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import './dropdown.css';
 
@@ -13,6 +14,10 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Dropdown">
+            <Helmet>
+                <meta name="description" content="Create a dropdown with CSS" />
+                <meta name="keywords" content="css dropdown, css menu" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouse over the button to see the dropdown.
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 607430b..23fcdd7 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -11,6 +12,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Feature comparison">
+            <Helmet>
+                <meta name="description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="keywords" content="css feature comparison, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index 0f271d0..03c5ae5 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -11,6 +12,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Feature list">
+            <Helmet>
+                <meta name="description" content="Create a feature list with CSS flexbox" />
+                <meta name="keywords" content="css feature list, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index 4517860..1e7dda5 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Fixed at corner">
+            <Helmet>
+                <meta name="description" content="Fix an element at corner with CSS" />
+                <meta name="keywords" content="css fixed" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index b0ffaff..03be3db 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -9,6 +10,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Fixed at side">
+            <Helmet>
+                <meta name="description" content="Fix an element at the middle of side with CSS" />
+                <meta name="keywords" content="css fixed" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index f3eb89f..d3710ce 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import './floating-label.css';
 
@@ -8,6 +9,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Floating label">
+            <Helmet>
+                <meta name="description" content="Create a floating label with CSS" />
+                <meta name="keywords" content="css floating label, placeholder shown" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Type something in the input to see how the label is shown up.
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
index 3af91c7..791bc26 100644
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Full screen menu">
+            <Helmet>
+                <meta name="description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="keywords" content="css fixed, css flexbox, css menu" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index 1c91cba..d430295 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Holy grail">
+            <Helmet>
+                <meta name="description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 25f1fc5..4fb3541 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -9,6 +10,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Initial avatar">
+            <Helmet>
+                <meta name="description" content="Create an initial avatar with CSS" />
+                <meta name="keywords" content="css avatar" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     To center the content, you also can use other technique demonstrated in
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index caf053d..7ede896 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Input add-on">
+            <Helmet>
+                <meta name="description" content="Create an input add-on with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css input add-on" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index a65b390..33f76fe 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import Heading from '../../components/Heading';
@@ -12,7 +13,7 @@ interface ItemProps {
 
 const Item: React.FC<ItemProps> = ({ action, keys }) => {
     return (
-        <dl
+        <div
             style={{
                 alignItems: 'center',
                 display: 'flex',
@@ -33,13 +34,17 @@ const Item: React.FC<ItemProps> = ({ action, keys }) => {
             >
                 {keys}
             </kbd>
-        </dl>
+        </div>
     );
 };
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Keyboard shortcut">
+            <Helmet>
+                <meta name="description" content="Create a keyboard shortcut with CSS" />
+                <meta name="keywords" content="kbd tag, keyboard shortcut" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     We use the native <code>kbd</code> tag to display the keyboard shortcut.
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index 7bb3c47..52ee04e 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ import Square from '../../placeholders/Square';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Media object">
+            <Helmet>
+                <meta name="description" content="Create a media object with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, media object" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index 248b9df..a503a68 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import './menu.css';
 
@@ -12,6 +13,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Menu">
+            <Helmet>
+                <meta name="description" content="Create a menu with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css menu" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index 775143f..8bc1553 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -10,6 +11,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Modal">
+            <Helmet>
+                <meta name="description" content="Create a modal with CSS flexbox" />
+                <meta name="keywords" content="css dialog, css flexbox, css modal" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use the <Link to='/patterns/close-button'>close button</Link> to
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 6607bd4..f321cab 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -9,6 +10,10 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Notification">
+            <Helmet>
+                <meta name="description" content="Create a notification with CSS flexbox" />
+                <meta name="keywords" content="css alert, css flexbox, css notification" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can use the <Link to='/patterns/close-button'>close button</Link> to
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index 9dad788..3d4e0b0 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import Triangle from '../../placeholders/Triangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Overlay play button">
+            <Helmet>
+                <meta name="description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index 53778e2..9c9e903 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pagination">
+            <Helmet>
+                <meta name="description" content="Create a pagination with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pagination" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index 7de1436..cae3762 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -8,6 +9,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Popover arrow">
+            <Helmet>
+                <meta name="description" content="Create a popover arrow with CSS" />
+                <meta name="keywords" content="css arrow, css popover" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index 177fc68..a5f61d6 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Presence indicator">
+            <Helmet>
+                <meta name="description" content="Create a presence indicator with CSS" />
+                <meta name="keywords" content="css indicator" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index d0bc1c1..20969b2 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Previous and next buttons">
+            <Helmet>
+                <meta name="description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pagination" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index da4d633..142ed06 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 import { Link } from 'react-router-dom';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -12,6 +13,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Pricing table">
+            <Helmet>
+                <meta name="description" content="Create a pricing table with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css pricing table" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can <Link to='/patterns/ribbon'>add</Link> <Link to='/patterns/corner-ribbon'>a ribbon</Link> to
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index c650709..44eb0bd 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import useInterval from '../../hooks/useInterval';
 import DetailsLayout from '../../layouts/DetailsLayout';
@@ -12,6 +13,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Progress bar">
+            <Helmet>
+                <meta name="description" content="Create a progress bar with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css progress bar" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index f235b7d..b9dd46b 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -28,6 +29,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Property list">
+            <Helmet>
+                <meta name="description" content="Create a property list with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, property list" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index abf0a70..5e2c0b3 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -48,6 +49,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Questions and answers">
+            <Helmet>
+                <meta name="description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="keywords" content="css accordion, css faq, css flexbox" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
index e88277f..a158658 100644
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -67,6 +68,10 @@ const RadialProgress: React.FC<RadialProgressProps> = ({ percentages }) => {
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Radial progress bar">
+            <Helmet>
+                <meta name="description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index f26397b..dc78139 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import './radioButtonGroup.css';
 
@@ -42,6 +43,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Radio button group">
+            <Helmet>
+                <meta name="description" content="Create a radio button group with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio button" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index ebe30f0..8c4ecbf 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import Heading from '../../components/Heading';
 import RelatedPatterns from '../../components/RelatedPatterns';
@@ -12,6 +13,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Radio switch">
+            <Helmet>
+                <meta name="description" content="Create a radio switch with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css radio switch, css switch" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index c13c0dc..9eee712 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Star from './Star';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Rating">
+            <Helmet>
+                <meta name="description" content="Create a star rating with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css star rating" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
index 413c91f..481ac87 100644
--- a/client/patterns/resizable-element/Details.tsx
+++ b/client/patterns/resizable-element/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Resizable element">
+            <Helmet>
+                <meta name="description" content="Create resizable indicators with CSS" />
+                <meta name="keywords" content="css resizable, css resize cursor" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can move the mouse over each squares located at the corners and the middle of sides to see
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index 39c6aea..354ec53 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Ribbon">
+            <Helmet>
+                <meta name="description" content="Create a ribbon with CSS" />
+                <meta name="keywords" content="css ribbon" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 9e6d3c3..00aed9a 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Same height columns">
+            <Helmet>
+                <meta name="description" content="Create same height columns with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css same height columns" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index 6011a0b..f0efe6d 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Circle from '../../placeholders/Circle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Search box">
+            <Helmet>
+                <meta name="description" content="Create a search box with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css search box" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index 0dc84ed..b9a50fb 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Separator">
+            <Helmet>
+                <meta name="description" content="Create a separator with CSS flexbox" />
+                <meta name="keywords" content="css divider, css flexbox, css separator" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index d97b713..9921966 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -7,6 +8,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sidebar">
+            <Helmet>
+                <meta name="description" content="Create a sidebar with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css sidebar" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>Try to scroll the main content!</div>
                 <BrowserFrame
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 998dbad..596d3a3 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -7,6 +8,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Simple grid">
+            <Helmet>
+                <meta name="description" content="Create a simple grid with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 3e81e34..6cfa552 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Slider">
+            <Helmet>
+                <meta name="description" content="Create a slider with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css slider" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index bdd8f6c..292173a 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -14,6 +15,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Spin button">
+            <Helmet>
+                <meta name="description" content="Create a spin button with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css spin button" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index 1edf3e3..a2359d0 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split navigation">
+            <Helmet>
+                <meta name="description" content="Create a split navigation with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index bacc847..da3fa74 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Split screen">
+            <Helmet>
+                <meta name="description" content="Create a split screen with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css split screen" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 411b07c..cd707d3 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -13,6 +14,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Stepper input">
+            <Helmet>
+                <meta name="description" content="Create a stepper input with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css stepper input" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index 1339118..291e4be 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky footer">
+            <Helmet>
+                <meta name="description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     The footer always sticks to the bottom if the main content is short.
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index bfa96c1..7605eaa 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -8,6 +9,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky header">
+            <Helmet>
+                <meta name="description" content="Create a sticky header with CSS" />
+                <meta name="keywords" content="css layout, css sticky, css sticky header" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content to see the header sticks to the top of page.
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
index 160fc41..241a9f2 100644
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Sticky sections">
+            <Helmet>
+                <meta name="description" content="Create sticky sections with CSS" />
+                <meta name="keywords" content="css layout, css sticky, css sticky sections" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Try to scroll the main content to see each section sticks to the top of page.
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index 7949848..04a357d 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -11,6 +12,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Switch">
+            <Helmet>
+                <meta name="description" content="Create a switch with CSS flexbox" />
+                <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px'}}>
                     The checkbox is placed inside a label. So when clicking on the label,
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 69e4150..4269f44 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -33,6 +34,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Tab">
+            <Helmet>
+                <meta name="description" content="Create tabs with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css navigation, css tab" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index c904b24..936da15 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Timeline">
+            <Helmet>
+                <meta name="description" content="Create a timeline with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css timeline" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index 9df6cbb..a92a01c 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -9,6 +10,10 @@ const Details: React.FC<{}> = () => {
 
     return (
         <DetailsLayout title="Toggle password visibility">
+            <Helmet>
+                <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, toggle password visibility" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index 4e8f06b..6009b0e 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import './tooltip.css';
 
@@ -12,6 +13,10 @@ import Rectangle from '../../placeholders/Rectangle';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Tooltip">
+            <Helmet>
+                <meta name="description" content="Create a tooltip with CSS" />
+                <meta name="keywords" content="css tooltip" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     Move the mouser over the main element to see the tooltip.
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index 783fd49..d26f7ca 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -1,13 +1,17 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
-import Circle from '../../placeholders/Circle';
 import Rectangle from '../../placeholders/Rectangle';
 
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Upload button">
+            <Helmet>
+                <meta name="description" content="Create an upload button with CSS flexbox" />
+                <meta name="keywords" content="css file input, css flexbox, css upload button" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     You can click the button to choose a file.
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
index 2309fe6..4a3320c 100644
--- a/client/patterns/validation-icon/Details.tsx
+++ b/client/patterns/validation-icon/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import BrowserFrame from '../../placeholders/BrowserFrame';
@@ -6,6 +7,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Validation icon">
+            <Helmet>
+                <meta name="description" content="Add validation icons to input with CSS" />
+                <meta name="keywords" content="css validation icon" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index aa080ed..c53da83 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import RelatedPatterns from '../../components/RelatedPatterns';
 import Pattern from '../../constants/Pattern';
@@ -9,6 +10,10 @@ import BrowserFrame from '../../placeholders/BrowserFrame';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Video background">
+            <Helmet>
+                <meta name="description" content="Add video background with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, object fit cover" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <div style={{ lineHeight: 1.5, marginBottom: '16px' }}>
                     In this pattern, the video is displayed in the background.
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index 5933dff..d1b9bcf 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import { Helmet } from 'react-helmet';
 
 import DetailsLayout from '../../layouts/DetailsLayout';
 import Block from '../../placeholders/Block';
@@ -9,6 +10,10 @@ import Line from '../../placeholders/Line';
 const Details: React.FC<{}> = () => {
     return (
         <DetailsLayout title="Wizard">
+            <Helmet>
+                <meta name="description" content="Create a wizard with CSS flexbox" />
+                <meta name="keywords" content="css flexbox, css stepper, css wizard" />
+            </Helmet>
             <div style={{ padding: '64px 32px' }}>
                 <BrowserFrame
                     content={(