From 365f43047dedea7e45628e808cf49a70d48a9395 Mon Sep 17 00:00:00 2001
From: Phuoc Nguyen <me@phuoc.ng>
Date: Sun, 18 Apr 2021 12:56:19 +0700
Subject: [PATCH] Add meta tags for patterns

---
 client/index.html                               |  4 +---
 client/layouts/Layout.tsx                       | 17 -----------------
 client/pages/ExplorePage.tsx                    | 17 ++++++++++++++++-
 client/pages/HomePage.tsx                       | 15 +++++++++++++++
 client/patterns/accordion/Details.tsx           |  2 ++
 client/patterns/arrow-buttons/Details.tsx       |  2 ++
 client/patterns/avatar-list/Details.tsx         |  2 ++
 client/patterns/avatar/Details.tsx              |  2 ++
 client/patterns/badge/Details.tsx               |  2 ++
 client/patterns/breadcrumb/Details.tsx          |  2 ++
 client/patterns/button-with-icon/Details.tsx    |  2 ++
 client/patterns/card-layout/Details.tsx         |  2 ++
 client/patterns/card/Details.tsx                |  2 ++
 client/patterns/centering/Details.tsx           |  2 ++
 client/patterns/chip/Details.tsx                |  2 ++
 client/patterns/circular-navigation/Details.tsx |  2 ++
 client/patterns/close-button/Details.tsx        |  2 ++
 client/patterns/cookie-banner/Details.tsx       |  2 ++
 client/patterns/corner-ribbon/Details.tsx       |  2 ++
 client/patterns/curved-background/Details.tsx   |  2 ++
 .../patterns/custom-checkbox-button/Details.tsx |  2 ++
 client/patterns/custom-radio-button/Details.tsx |  2 ++
 client/patterns/diagonal-section/Details.tsx    |  2 ++
 client/patterns/docked-at-corner/Details.tsx    |  2 ++
 client/patterns/dot-leader/Details.tsx          |  2 ++
 client/patterns/dot-navigation/Details.tsx      |  2 ++
 client/patterns/drawer/Details.tsx              |  2 ++
 client/patterns/drop-area/Details.tsx           |  2 ++
 client/patterns/drop-cap/Details.tsx            |  2 ++
 client/patterns/dropdown/Details.tsx            |  2 ++
 client/patterns/fading-long-section/Details.tsx |  2 ++
 client/patterns/feature-comparison/Details.tsx  |  2 ++
 client/patterns/feature-list/Details.tsx        |  2 ++
 client/patterns/fixed-at-corner/Details.tsx     |  2 ++
 client/patterns/fixed-at-side/Details.tsx       |  2 ++
 client/patterns/floating-label/Details.tsx      |  2 ++
 client/patterns/folder-structure/Details.tsx    |  2 ++
 client/patterns/full-background/Details.tsx     |  2 ++
 client/patterns/full-screen-menu/Details.tsx    |  2 ++
 client/patterns/holy-grail/Details.tsx          |  2 ++
 client/patterns/initial-avatar/Details.tsx      |  2 ++
 client/patterns/input-addon/Details.tsx         |  2 ++
 client/patterns/keyboard-shortcut/Details.tsx   |  2 ++
 client/patterns/layered-card/Details.tsx        |  2 ++
 client/patterns/lined-paper/Details.tsx         |  2 ++
 client/patterns/media-object/Details.tsx        |  2 ++
 client/patterns/mega-menu/Details.tsx           |  2 ++
 client/patterns/menu/Details.tsx                |  2 ++
 client/patterns/modal/Details.tsx               |  2 ++
 client/patterns/nested-dropdowns/Details.tsx    |  2 ++
 client/patterns/notification/Details.tsx        |  2 ++
 client/patterns/overlay-play-button/Details.tsx |  2 ++
 client/patterns/pagination/Details.tsx          |  2 ++
 client/patterns/popover-arrow/Details.tsx       |  2 ++
 client/patterns/presence-indicator/Details.tsx  |  2 ++
 .../patterns/previous-next-buttons/Details.tsx  |  2 ++
 client/patterns/price-tag/Details.tsx           |  2 ++
 client/patterns/pricing-table/Details.tsx       |  2 ++
 client/patterns/progress-bar/Details.tsx        |  2 ++
 client/patterns/property-list/Details.tsx       |  2 ++
 .../patterns/questions-and-answers/Details.tsx  |  2 ++
 client/patterns/radial-progress-bar/Details.tsx |  2 ++
 client/patterns/radio-button-group/Details.tsx  |  2 ++
 client/patterns/radio-switch/Details.tsx        |  2 ++
 client/patterns/rating/Details.tsx              |  2 ++
 client/patterns/resizable-element/Details.tsx   |  2 ++
 client/patterns/ribbon/Details.tsx              |  2 ++
 client/patterns/same-height-columns/Details.tsx |  2 ++
 client/patterns/search-box/Details.tsx          |  2 ++
 client/patterns/separator/Details.tsx           |  2 ++
 client/patterns/sidebar/Details.tsx             |  2 ++
 client/patterns/simple-grid/Details.tsx         |  2 ++
 client/patterns/slider/Details.tsx              |  2 ++
 client/patterns/spin-button/Details.tsx         |  2 ++
 client/patterns/split-navigation/Details.tsx    |  2 ++
 client/patterns/split-screen/Details.tsx        |  2 ++
 client/patterns/stacked-cards/Details.tsx       |  2 ++
 client/patterns/stamp-border/Details.tsx        |  2 ++
 client/patterns/statistic/Details.tsx           |  2 ++
 client/patterns/status-light/Details.tsx        |  2 ++
 client/patterns/stepper-input/Details.tsx       |  2 ++
 client/patterns/sticky-footer/Details.tsx       |  2 ++
 client/patterns/sticky-header/Details.tsx       |  2 ++
 client/patterns/sticky-sections/Details.tsx     |  2 ++
 client/patterns/sticky-table-column/Details.tsx |  2 ++
 .../patterns/sticky-table-headers/Details.tsx   |  2 ++
 client/patterns/switch/Details.tsx              |  2 ++
 client/patterns/tab/Details.tsx                 |  2 ++
 client/patterns/teardrop/Details.tsx            |  7 +++----
 .../patterns/three-dimensions-card/Details.tsx  |  2 ++
 client/patterns/timeline/Details.tsx            |  2 ++
 .../toggle-password-visibility/Details.tsx      |  2 ++
 client/patterns/tooltip/Details.tsx             |  2 ++
 client/patterns/tree-diagram/Details.tsx        |  2 ++
 client/patterns/triangle-buttons/Details.tsx    |  2 ++
 client/patterns/upload-button/Details.tsx       |  2 ++
 client/patterns/validation-icon/Details.tsx     |  2 ++
 client/patterns/video-background/Details.tsx    |  2 ++
 client/patterns/voting/Details.tsx              |  2 ++
 client/patterns/watermark/Details.tsx           |  2 ++
 client/patterns/wizard/Details.tsx              |  2 ++
 101 files changed, 227 insertions(+), 25 deletions(-)

diff --git a/client/index.html b/client/index.html
index 5d65dfc..2513372 100644
--- a/client/index.html
+++ b/client/index.html
@@ -1,10 +1,8 @@
 <html lang="en">
 <head>
     <meta charset="utf-8" />
-    <title>CSS layout</title>
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="author" content="Nguyen Huu Phuoc" />
-    <meta name="description" content="A collection of popular layouts and patterns made with CSS" />
+    <meta name="author" content="Nguyen Huu Phuoc" />    
     <link href="/assets/favicon.png" rel="icon">
     <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro&family=Lato&display=swap" rel="stylesheet">
 </head>
diff --git a/client/layouts/Layout.tsx b/client/layouts/Layout.tsx
index 7cc3915..0633eb8 100644
--- a/client/layouts/Layout.tsx
+++ b/client/layouts/Layout.tsx
@@ -4,7 +4,6 @@
  */
 
 import * as React from 'react';
-import { Helmet } from 'react-helmet';
 
 import Footer from './Footer';
 import Header from './Header';
@@ -16,22 +15,6 @@ const Layout: React.FC<{}> = ({ children }) => {
 
     return (
         <>
-            <Helmet>
-                <meta property="og:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="og:site_name" content="CSS Layout" />
-                <meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="og:type" content="website" />
-                <meta property="og:url" content="https://csslayout.io" />
-
-                <meta property="twitter:card" content="summary_large_image" />
-                <meta property="twitter:creator" content="@nghuuphuoc" />
-                <meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
-                <meta property="twitter:site" content="@nghuuphuoc" />
-                <meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
-                <meta property="twitter:url" content="https://csslayout.io" />
-            </Helmet>
             <Header />
             {children}
             <Footer />
diff --git a/client/pages/ExplorePage.tsx b/client/pages/ExplorePage.tsx
index 0e6ac5b..a785c98 100644
--- a/client/pages/ExplorePage.tsx
+++ b/client/pages/ExplorePage.tsx
@@ -22,9 +22,24 @@ const ExplorePage = () => {
         <Layout>
             <Helmet>
                 <title>CSS Layout ∙ Explore</title>
-                <meta name="title" content="CSS Layout ∙ Explore" />
+                <meta name="title" content="CSS Layout ∙ Patterns" />
                 <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 property="og:description" content="CSS layouts and patterns" />
+                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="og:site_name" content="CSS Layout" />
+                <meta property="og:title" content="CSS Layout ∙ Patterns" />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content="https://csslayout.io/patterns" />
+
+                <meta property="twitter:card" content="summary_large_image" />
+                <meta property="twitter:creator" content="@nghuuphuoc" />
+                <meta property="twitter:description" content="CSS layouts and patterns" />
+                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="twitter:site" content="@nghuuphuoc" />
+                <meta property="twitter:title" content="CSS Layout ∙ Patterns" />
+                <meta property="twitter:url" content="https://csslayout.io/patterns" />
             </Helmet>
             <div className="hero">
                 <div className="container">
diff --git a/client/pages/HomePage.tsx b/client/pages/HomePage.tsx
index d19af96..5734023 100644
--- a/client/pages/HomePage.tsx
+++ b/client/pages/HomePage.tsx
@@ -29,6 +29,21 @@ const HomePage = () => {
                 <meta name="title" content="CSS Layout" />
                 <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 property="og:description" content="A collection of popular layouts and patterns made with CSS" />
+                <meta property="og:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="og:site_name" content="CSS Layout" />
+                <meta property="og:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content="https://csslayout.io" />
+
+                <meta property="twitter:card" content="summary_large_image" />
+                <meta property="twitter:creator" content="@nghuuphuoc" />
+                <meta property="twitter:description" content="A collection of popular layouts and patterns made with CSS" />
+                <meta property="twitter:image" content="https://csslayout.io/assets/screenshot.png" />
+                <meta property="twitter:site" content="@nghuuphuoc" />
+                <meta property="twitter:title" content="CSS Layout ∙ A collection of popular layouts and patterns made with CSS" />
+                <meta property="twitter:url" content="https://csslayout.io" />
             </Helmet>
             <div className="hero">
                 <div className="container">
diff --git a/client/patterns/accordion/Details.tsx b/client/patterns/accordion/Details.tsx
index ca70dc2..23d6a77 100644
--- a/client/patterns/accordion/Details.tsx
+++ b/client/patterns/accordion/Details.tsx
@@ -60,6 +60,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Accordion}>
             <Helmet>
                 <meta name="description" content="Create an accordion with CSS flexbox" />
+                <meta name="og:description" content="Create an accordion with CSS flexbox" />
+                <meta name="twitter:description" content="Create an accordion with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/arrow-buttons/Details.tsx b/client/patterns/arrow-buttons/Details.tsx
index 35888e3..7557c75 100644
--- a/client/patterns/arrow-buttons/Details.tsx
+++ b/client/patterns/arrow-buttons/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ArrowButtons}>
             <Helmet>
                 <meta name="description" content="Create arrow buttons with CSS" />
+                <meta name="og:description" content="Create arrow buttons with CSS" />
+                <meta name="twitter:description" content="Create arrow buttons with CSS" />
                 <meta name="keywords" content="css arrow buttons" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/avatar-list/Details.tsx b/client/patterns/avatar-list/Details.tsx
index c6be124..a457c6c 100644
--- a/client/patterns/avatar-list/Details.tsx
+++ b/client/patterns/avatar-list/Details.tsx
@@ -36,6 +36,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.AvatarList}>
             <Helmet>
                 <meta name="description" content="Create an avatar list with CSS flexbox" />
+                <meta name="og:description" content="Create an avatar list with CSS flexbox" />
+                <meta name="twitter:description" content="Create an avatar list with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/avatar/Details.tsx b/client/patterns/avatar/Details.tsx
index 82b8c55..c63bf76 100644
--- a/client/patterns/avatar/Details.tsx
+++ b/client/patterns/avatar/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Avatar}>
             <Helmet>
                 <meta name="description" content="Create an avatar component with CSS flexbox" />
+                <meta name="og:description" content="Create an avatar component with CSS flexbox" />
+                <meta name="twitter:description" content="Create an avatar component with CSS flexbox" />
                 <meta name="keywords" content="css avatar, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/badge/Details.tsx b/client/patterns/badge/Details.tsx
index 68717bb..b9164b4 100644
--- a/client/patterns/badge/Details.tsx
+++ b/client/patterns/badge/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Badge}>
             <Helmet>
                 <meta name="description" content="Create a badge component with CSS flexbox" />
+                <meta name="og:description" content="Create a badge component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a badge component with CSS flexbox" />
                 <meta name="keywords" content="css badge, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/breadcrumb/Details.tsx b/client/patterns/breadcrumb/Details.tsx
index d3936c1..d137565 100644
--- a/client/patterns/breadcrumb/Details.tsx
+++ b/client/patterns/breadcrumb/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Breadcrumb}>
             <Helmet>
                 <meta name="description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="og:description" content="Create a breadcrumb with CSS flexbox" />
+                <meta name="twitter:description" content="Create a breadcrumb with CSS flexbox" />
                 <meta name="keywords" content="css breadcrumb, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/button-with-icon/Details.tsx b/client/patterns/button-with-icon/Details.tsx
index 40ae1da..fcf1325 100644
--- a/client/patterns/button-with-icon/Details.tsx
+++ b/client/patterns/button-with-icon/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ButtonWithIcon}>
             <Helmet>
                 <meta name="description" content="Create an icon button with CSS flexbox" />
+                <meta name="og:description" content="Create an icon button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an icon button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css icon button" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/card-layout/Details.tsx b/client/patterns/card-layout/Details.tsx
index cc9941c..e8e9b47 100644
--- a/client/patterns/card-layout/Details.tsx
+++ b/client/patterns/card-layout/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CardLayout}>
             <Helmet>
                 <meta name="description" content="Create a card layout with CSS flexbox" />
+                <meta name="og:description" content="Create a card layout with CSS flexbox" />
+                <meta name="twitter:description" content="Create a card layout with CSS flexbox" />
                 <meta name="keywords" content="css card layout, css flexbox, css layout" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/card/Details.tsx b/client/patterns/card/Details.tsx
index e857d2b..5104ac8 100644
--- a/client/patterns/card/Details.tsx
+++ b/client/patterns/card/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Card}>
             <Helmet>
                 <meta name="description" content="Create a card with CSS flexbox" />
+                <meta name="og:description" content="Create a card with CSS flexbox" />
+                <meta name="twitter:description" content="Create a card with CSS flexbox" />
                 <meta name="keywords" content="css card, css flexbox" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/centering/Details.tsx b/client/patterns/centering/Details.tsx
index 1a32c80..9cfdbfd 100644
--- a/client/patterns/centering/Details.tsx
+++ b/client/patterns/centering/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Centering}>
             <Helmet>
                 <meta name="description" content="Center an element with CSS flexbox" />
+                <meta name="og:description" content="Center an element with CSS flexbox" />
+                <meta name="twitter:description" content="Center an element with CSS flexbox" />
                 <meta name="keywords" content="css centering, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/chip/Details.tsx b/client/patterns/chip/Details.tsx
index 7d5fb20..9c838b8 100644
--- a/client/patterns/chip/Details.tsx
+++ b/client/patterns/chip/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Chip}>
             <Helmet>
                 <meta name="description" content="Create a chip component with CSS flexbox" />
+                <meta name="og:description" content="Create a chip component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a chip component with CSS flexbox" />
                 <meta name="keywords" content="css chip, css flexbox, css tag" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/circular-navigation/Details.tsx b/client/patterns/circular-navigation/Details.tsx
index 1122c9c..5f55b75 100644
--- a/client/patterns/circular-navigation/Details.tsx
+++ b/client/patterns/circular-navigation/Details.tsx
@@ -52,6 +52,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CircularNavigation}>
             <Helmet>
                 <meta name="description" content="Create a circular navigation with CSS flexbox" />
+                <meta name="og:description" content="Create a circular navigation with CSS flexbox" />
+                <meta name="twitter:description" content="Create a circular navigation with CSS flexbox" />
                 <meta name="keywords" content="css circular navigation, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/close-button/Details.tsx b/client/patterns/close-button/Details.tsx
index 4468587..e99fc6e 100644
--- a/client/patterns/close-button/Details.tsx
+++ b/client/patterns/close-button/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CloseButton}>
             <Helmet>
                 <meta name="description" content="Create a close button with CSS flexbox" />
+                <meta name="og:description" content="Create a close button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a close button with CSS flexbox" />
                 <meta name="keywords" content="css close button, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/cookie-banner/Details.tsx b/client/patterns/cookie-banner/Details.tsx
index 59d2f29..a1d7efe 100644
--- a/client/patterns/cookie-banner/Details.tsx
+++ b/client/patterns/cookie-banner/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CookieBanner}>
             <Helmet>
                 <meta name="description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="og:description" content="Create a cookie banner with CSS flexbox" />
+                <meta name="twitter:description" content="Create a cookie banner with CSS flexbox" />
                 <meta name="keywords" content="css cookie banner, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/corner-ribbon/Details.tsx b/client/patterns/corner-ribbon/Details.tsx
index 9656450..4294e43 100644
--- a/client/patterns/corner-ribbon/Details.tsx
+++ b/client/patterns/corner-ribbon/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CornerRibbon}>
             <Helmet>
                 <meta name="description" content="Create a corner ribbon with CSS flexbox" />
+                <meta name="og:description" content="Create a corner ribbon with CSS flexbox" />
+                <meta name="twitter:description" content="Create a corner ribbon with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css ribbon" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/curved-background/Details.tsx b/client/patterns/curved-background/Details.tsx
index 21284f5..f099015 100644
--- a/client/patterns/curved-background/Details.tsx
+++ b/client/patterns/curved-background/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CurvedBackground}>
             <Helmet>
                 <meta name="description" content="Create an element with curved background" />
+                <meta name="og:description" content="Create an element with curved background" />
+                <meta name="twitter:description" content="Create an element with curved background" />
                 <meta name="keywords" content="css border radius, css curved background" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/custom-checkbox-button/Details.tsx b/client/patterns/custom-checkbox-button/Details.tsx
index 92740d7..bfebb40 100644
--- a/client/patterns/custom-checkbox-button/Details.tsx
+++ b/client/patterns/custom-checkbox-button/Details.tsx
@@ -66,6 +66,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CustomCheckboxButton}>
             <Helmet>
                 <meta name="description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="og:description" content="Create a custom checkbox button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a custom checkbox button with CSS flexbox" />
                 <meta name="keywords" content="css checkbox, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/custom-radio-button/Details.tsx b/client/patterns/custom-radio-button/Details.tsx
index 004a666..520f6c9 100644
--- a/client/patterns/custom-radio-button/Details.tsx
+++ b/client/patterns/custom-radio-button/Details.tsx
@@ -67,6 +67,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.CustomRadioButton}>
             <Helmet>
                 <meta name="description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="og:description" content="Create a custom radio button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a custom radio button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/diagonal-section/Details.tsx b/client/patterns/diagonal-section/Details.tsx
index b46822a..28c9f37 100644
--- a/client/patterns/diagonal-section/Details.tsx
+++ b/client/patterns/diagonal-section/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DiagonalSection}>
             <Helmet>
                 <meta name="description" content="Create a diagonal section with CSS" />
+                <meta name="og:description" content="Create a diagonal section with CSS" />
+                <meta name="twitter:description" content="Create a diagonal section with CSS" />
                 <meta name="keywords" content="css diagonal section, css transform skew" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/docked-at-corner/Details.tsx b/client/patterns/docked-at-corner/Details.tsx
index b4d3265..583e3d1 100644
--- a/client/patterns/docked-at-corner/Details.tsx
+++ b/client/patterns/docked-at-corner/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DockedAtCorner}>
             <Helmet>
                 <meta name="description" content="Dock an element at corner with CSS" />
+                <meta name="og:description" content="Dock an element at corner with CSS" />
+                <meta name="twitter:description" content="Dock an element at corner with CSS" />
                 <meta name="keywords" content="css docked, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/dot-leader/Details.tsx b/client/patterns/dot-leader/Details.tsx
index b9a00a0..dcb05ad 100644
--- a/client/patterns/dot-leader/Details.tsx
+++ b/client/patterns/dot-leader/Details.tsx
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DotLeader}>
             <Helmet>
                 <meta name="description" content="Create dot leaders with CSS flexbox" />
+                <meta name="og:description" content="Create dot leaders with CSS flexbox" />
+                <meta name="twitter:description" content="Create dot leaders with CSS flexbox" />
                 <meta name="keywords" content="css dot leader, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/dot-navigation/Details.tsx b/client/patterns/dot-navigation/Details.tsx
index 854c106..7ffcb85 100644
--- a/client/patterns/dot-navigation/Details.tsx
+++ b/client/patterns/dot-navigation/Details.tsx
@@ -40,6 +40,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DotNavigation}>
             <Helmet>
                 <meta name="description" content="Create dot navigation with CSS flexbox" />
+                <meta name="og:description" content="Create dot navigation with CSS flexbox" />
+                <meta name="twitter:description" content="Create dot navigation with CSS flexbox" />
                 <meta name="keywords" content="css dot navigation, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/drawer/Details.tsx b/client/patterns/drawer/Details.tsx
index 3dad13a..5f72e9d 100644
--- a/client/patterns/drawer/Details.tsx
+++ b/client/patterns/drawer/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Drawer}>
             <Helmet>
                 <meta name="description" content="Create a drawer navigation with CSS" />
+                <meta name="og:description" content="Create a drawer navigation with CSS" />
+                <meta name="twitter:description" content="Create a drawer navigation with CSS" />
                 <meta name="keywords" content="css drawer, css off-canvas" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/drop-area/Details.tsx b/client/patterns/drop-area/Details.tsx
index 7b084b1..82582f6 100644
--- a/client/patterns/drop-area/Details.tsx
+++ b/client/patterns/drop-area/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DropArea}>
             <Helmet>
                 <meta name="description" content="Create a dropping area with CSS flexbox" />
+                <meta name="og:description" content="Create a dropping area with CSS flexbox" />
+                <meta name="twitter:description" content="Create a dropping area with CSS flexbox" />
                 <meta name="keywords" content="css dropping area, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/drop-cap/Details.tsx b/client/patterns/drop-cap/Details.tsx
index e774afb..cce9dfc 100644
--- a/client/patterns/drop-cap/Details.tsx
+++ b/client/patterns/drop-cap/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.DropCap}>
             <Helmet>
                 <meta name="description" content="Create a drop cap with CSS" />
+                <meta name="og:description" content="Create a drop cap with CSS" />
+                <meta name="twitter:description" content="Create a drop cap with CSS" />
                 <meta name="keywords" content="css drop cap" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/dropdown/Details.tsx b/client/patterns/dropdown/Details.tsx
index 90725b9..9521a25 100644
--- a/client/patterns/dropdown/Details.tsx
+++ b/client/patterns/dropdown/Details.tsx
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Dropdown}>
             <Helmet>
                 <meta name="description" content="Create a dropdown with CSS" />
+                <meta name="og:description" content="Create a dropdown with CSS" />
+                <meta name="twitter:description" content="Create a dropdown with CSS" />
                 <meta name="keywords" content="css dropdown, css menu" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/fading-long-section/Details.tsx b/client/patterns/fading-long-section/Details.tsx
index 9cc23cf..a7ac997 100644
--- a/client/patterns/fading-long-section/Details.tsx
+++ b/client/patterns/fading-long-section/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FadingLongSection}>
             <Helmet>
                 <meta name="description" content="Fading long section to indicate there is more content" />
+                <meta name="og:description" content="Fading long section to indicate there is more content" />
+                <meta name="twitter:description" content="Fading long section to indicate there is more content" />
                 <meta name="keywords" content="css fading overflow, css linear gradient" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/feature-comparison/Details.tsx b/client/patterns/feature-comparison/Details.tsx
index 3f52538..05b1552 100644
--- a/client/patterns/feature-comparison/Details.tsx
+++ b/client/patterns/feature-comparison/Details.tsx
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FeatureComparison}>
             <Helmet>
                 <meta name="description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="og:description" content="Create a feature comparison list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a feature comparison list with CSS flexbox" />
                 <meta name="keywords" content="css feature comparison, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/feature-list/Details.tsx b/client/patterns/feature-list/Details.tsx
index b4bae8f..bf50729 100644
--- a/client/patterns/feature-list/Details.tsx
+++ b/client/patterns/feature-list/Details.tsx
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FeatureList}>
             <Helmet>
                 <meta name="description" content="Create a feature list with CSS flexbox" />
+                <meta name="og:description" content="Create a feature list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a feature list with CSS flexbox" />
                 <meta name="keywords" content="css feature list, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/fixed-at-corner/Details.tsx b/client/patterns/fixed-at-corner/Details.tsx
index b839414..376fe0e 100644
--- a/client/patterns/fixed-at-corner/Details.tsx
+++ b/client/patterns/fixed-at-corner/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FixedAtCorner}>
             <Helmet>
                 <meta name="description" content="Fix an element at corner with CSS" />
+                <meta name="og:description" content="Fix an element at corner with CSS" />
+                <meta name="twitter:description" content="Fix an element at corner with CSS" />
                 <meta name="keywords" content="css fixed" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/fixed-at-side/Details.tsx b/client/patterns/fixed-at-side/Details.tsx
index 28fca7a..3e9e539 100644
--- a/client/patterns/fixed-at-side/Details.tsx
+++ b/client/patterns/fixed-at-side/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FixedAtSide}>
             <Helmet>
                 <meta name="description" content="Fix an element at the middle of side with CSS" />
+                <meta name="og:description" content="Fix an element at the middle of side with CSS" />
+                <meta name="twitter:description" content="Fix an element at the middle of side with CSS" />
                 <meta name="keywords" content="css fixed" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/floating-label/Details.tsx b/client/patterns/floating-label/Details.tsx
index 4d73c46..fdb859f 100644
--- a/client/patterns/floating-label/Details.tsx
+++ b/client/patterns/floating-label/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FloatingLabel}>
             <Helmet>
                 <meta name="description" content="Create a floating label with CSS" />
+                <meta name="og:description" content="Create a floating label with CSS" />
+                <meta name="twitter:description" content="Create a floating label with CSS" />
                 <meta name="keywords" content="css floating label, placeholder shown" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/folder-structure/Details.tsx b/client/patterns/folder-structure/Details.tsx
index da2c053..4c34210 100644
--- a/client/patterns/folder-structure/Details.tsx
+++ b/client/patterns/folder-structure/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FolderStructure}>
             <Helmet>
                 <meta name="description" content="Create a folder structure with CSS" />
+                <meta name="og:description" content="Create a folder structure with CSS" />
+                <meta name="twitter:description" content="Create a folder structure with CSS" />
                 <meta name="keywords" content="css folder structure, css folder tree" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/full-background/Details.tsx b/client/patterns/full-background/Details.tsx
index bde3fb9..ff47c62 100644
--- a/client/patterns/full-background/Details.tsx
+++ b/client/patterns/full-background/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FullBackground}>
             <Helmet>
                 <meta name="description" content="Create a full background element with CSS" />
+                <meta name="og:description" content="Create a full background element with CSS" />
+                <meta name="twitter:description" content="Create a full background element with CSS" />
                 <meta name="keywords" content="css background size cover, css full background" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/full-screen-menu/Details.tsx b/client/patterns/full-screen-menu/Details.tsx
index f9e450e..8242e0f 100644
--- a/client/patterns/full-screen-menu/Details.tsx
+++ b/client/patterns/full-screen-menu/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.FullScreenMenu}>
             <Helmet>
                 <meta name="description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="og:description" content="Create a full screen menu with CSS flexbox" />
+                <meta name="twitter:description" content="Create a full screen menu with CSS flexbox" />
                 <meta name="keywords" content="css fixed, css flexbox, css menu" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/holy-grail/Details.tsx b/client/patterns/holy-grail/Details.tsx
index a5cc533..cadf394 100644
--- a/client/patterns/holy-grail/Details.tsx
+++ b/client/patterns/holy-grail/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.HolyGrail}>
             <Helmet>
                 <meta name="description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="og:description" content="Create a holy grail layout with CSS flexbox" />
+                <meta name="twitter:description" content="Create a holy grail layout with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css holy grail layout, css layout" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/initial-avatar/Details.tsx b/client/patterns/initial-avatar/Details.tsx
index 10627db..5ba2788 100644
--- a/client/patterns/initial-avatar/Details.tsx
+++ b/client/patterns/initial-avatar/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.InitialAvatar}>
             <Helmet>
                 <meta name="description" content="Create an initial avatar with CSS" />
+                <meta name="og:description" content="Create an initial avatar with CSS" />
+                <meta name="twitter:description" content="Create an initial avatar with CSS" />
                 <meta name="keywords" content="css avatar" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/input-addon/Details.tsx b/client/patterns/input-addon/Details.tsx
index 9ea3ce4..bf1a4bd 100644
--- a/client/patterns/input-addon/Details.tsx
+++ b/client/patterns/input-addon/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.InputAddon}>
             <Helmet>
                 <meta name="description" content="Create an input add-on with CSS flexbox" />
+                <meta name="og:description" content="Create an input add-on with CSS flexbox" />
+                <meta name="twitter:description" content="Create an input add-on with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css input add-on" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/keyboard-shortcut/Details.tsx b/client/patterns/keyboard-shortcut/Details.tsx
index e43fca1..cafcff9 100644
--- a/client/patterns/keyboard-shortcut/Details.tsx
+++ b/client/patterns/keyboard-shortcut/Details.tsx
@@ -49,6 +49,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.KeyboardShortcut}>
             <Helmet>
                 <meta name="description" content="Create a keyboard shortcut with CSS" />
+                <meta name="og:description" content="Create a keyboard shortcut with CSS" />
+                <meta name="twitter:description" content="Create a keyboard shortcut with CSS" />
                 <meta name="keywords" content="kbd tag, keyboard shortcut" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/layered-card/Details.tsx b/client/patterns/layered-card/Details.tsx
index 3423ada..e643dfe 100644
--- a/client/patterns/layered-card/Details.tsx
+++ b/client/patterns/layered-card/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.LayeredCard}>
             <Helmet>
                 <meta name="description" content="Create a layered card with CSS" />
+                <meta name="og:description" content="Create a layered card with CSS" />
+                <meta name="twitter:description" content="Create a layered card with CSS" />
                 <meta name="keywords" content="css layered card" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/lined-paper/Details.tsx b/client/patterns/lined-paper/Details.tsx
index bafb1d2..b6b50b7 100644
--- a/client/patterns/lined-paper/Details.tsx
+++ b/client/patterns/lined-paper/Details.tsx
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.LinedPaper}>
             <Helmet>
                 <meta name="description" content="Create lined paper with CSS" />
+                <meta name="og:description" content="Create lined paper with CSS" />
+                <meta name="twitter:description" content="Create lined paper with CSS" />
                 <meta name="keywords" content="css linear gradient, css lined paper, css multiple horizontal lines" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/media-object/Details.tsx b/client/patterns/media-object/Details.tsx
index af7ffb7..64afa34 100644
--- a/client/patterns/media-object/Details.tsx
+++ b/client/patterns/media-object/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.MediaObject}>
             <Helmet>
                 <meta name="description" content="Create a media object with CSS flexbox" />
+                <meta name="og:description" content="Create a media object with CSS flexbox" />
+                <meta name="twitter:description" content="Create a media object with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, media object" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/mega-menu/Details.tsx b/client/patterns/mega-menu/Details.tsx
index 5b8e28b..6de8dbd 100644
--- a/client/patterns/mega-menu/Details.tsx
+++ b/client/patterns/mega-menu/Details.tsx
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.MegaMenu}>
             <Helmet>
                 <meta name="description" content="Create a mega menu with CSS" />
+                <meta name="og:description" content="Create a mega menu with CSS" />
+                <meta name="twitter:description" content="Create a mega menu with CSS" />
                 <meta name="keywords" content="css mega menu" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/menu/Details.tsx b/client/patterns/menu/Details.tsx
index 8fed6d4..1f8626c 100644
--- a/client/patterns/menu/Details.tsx
+++ b/client/patterns/menu/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Menu}>
             <Helmet>
                 <meta name="description" content="Create a menu with CSS flexbox" />
+                <meta name="og:description" content="Create a menu with CSS flexbox" />
+                <meta name="twitter:description" content="Create a menu with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/modal/Details.tsx b/client/patterns/modal/Details.tsx
index d031833..bd13a15 100644
--- a/client/patterns/modal/Details.tsx
+++ b/client/patterns/modal/Details.tsx
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Modal}>
             <Helmet>
                 <meta name="description" content="Create a modal with CSS flexbox" />
+                <meta name="og:description" content="Create a modal with CSS flexbox" />
+                <meta name="twitter:description" content="Create a modal with CSS flexbox" />
                 <meta name="keywords" content="css dialog, css flexbox, css modal" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/nested-dropdowns/Details.tsx b/client/patterns/nested-dropdowns/Details.tsx
index b3b1977..58fadab 100644
--- a/client/patterns/nested-dropdowns/Details.tsx
+++ b/client/patterns/nested-dropdowns/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.NestedDropdowns}>
             <Helmet>
                 <meta name="description" content="Create nested dropdown menu with CSS" />
+                <meta name="og:description" content="Create nested dropdown menu with CSS" />
+                <meta name="twitter:description" content="Create nested dropdown menu with CSS" />
                 <meta name="keywords" content="css dropdown menu, css multi-level dropdown menu, css nested dropdown menu" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/notification/Details.tsx b/client/patterns/notification/Details.tsx
index 4e2ceda..99a1c43 100644
--- a/client/patterns/notification/Details.tsx
+++ b/client/patterns/notification/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Notification}>
             <Helmet>
                 <meta name="description" content="Create a notification with CSS flexbox" />
+                <meta name="og:description" content="Create a notification with CSS flexbox" />
+                <meta name="twitter:description" content="Create a notification with CSS flexbox" />
                 <meta name="keywords" content="css alert, css flexbox, css notification" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/overlay-play-button/Details.tsx b/client/patterns/overlay-play-button/Details.tsx
index d22454a..706c48e 100644
--- a/client/patterns/overlay-play-button/Details.tsx
+++ b/client/patterns/overlay-play-button/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.OverlayPlayButton}>
             <Helmet>
                 <meta name="description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="og:description" content="Create an overlay play button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an overlay play button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/pagination/Details.tsx b/client/patterns/pagination/Details.tsx
index 538afa2..61e499b 100644
--- a/client/patterns/pagination/Details.tsx
+++ b/client/patterns/pagination/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Pagination}>
             <Helmet>
                 <meta name="description" content="Create a pagination with CSS flexbox" />
+                <meta name="og:description" content="Create a pagination with CSS flexbox" />
+                <meta name="twitter:description" content="Create a pagination with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/popover-arrow/Details.tsx b/client/patterns/popover-arrow/Details.tsx
index 9f05d81..6bffa7a 100644
--- a/client/patterns/popover-arrow/Details.tsx
+++ b/client/patterns/popover-arrow/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PopoverArrow}>
             <Helmet>
                 <meta name="description" content="Create a popover arrow with CSS" />
+                <meta name="og:description" content="Create a popover arrow with CSS" />
+                <meta name="twitter:description" content="Create a popover arrow with CSS" />
                 <meta name="keywords" content="css arrow, css popover" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/presence-indicator/Details.tsx b/client/patterns/presence-indicator/Details.tsx
index 5ad8fc1..7848215 100644
--- a/client/patterns/presence-indicator/Details.tsx
+++ b/client/patterns/presence-indicator/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PresenceIndicator}>
             <Helmet>
                 <meta name="description" content="Create a presence indicator with CSS" />
+                <meta name="og:description" content="Create a presence indicator with CSS" />
+                <meta name="twitter:description" content="Create a presence indicator with CSS" />
                 <meta name="keywords" content="css indicator" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/previous-next-buttons/Details.tsx b/client/patterns/previous-next-buttons/Details.tsx
index 386b962..cda4f86 100644
--- a/client/patterns/previous-next-buttons/Details.tsx
+++ b/client/patterns/previous-next-buttons/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PreviousNextButtons}>
             <Helmet>
                 <meta name="description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="og:description" content="Create previous and next buttons with CSS flexbox" />
+                <meta name="twitter:description" content="Create previous and next buttons with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pagination" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/price-tag/Details.tsx b/client/patterns/price-tag/Details.tsx
index 56cb403..6399870 100644
--- a/client/patterns/price-tag/Details.tsx
+++ b/client/patterns/price-tag/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PriceTag}>
             <Helmet>
                 <meta name="description" content="Create a price tag with CSS" />
+                <meta name="og:description" content="Create a price tag with CSS" />
+                <meta name="twitter:description" content="Create a price tag with CSS" />
                 <meta name="keywords" content="css price tag" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/pricing-table/Details.tsx b/client/patterns/pricing-table/Details.tsx
index 5c46842..ea72d7d 100644
--- a/client/patterns/pricing-table/Details.tsx
+++ b/client/patterns/pricing-table/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PricingTable}>
             <Helmet>
                 <meta name="description" content="Create a pricing table with CSS flexbox" />
+                <meta name="og:description" content="Create a pricing table with CSS flexbox" />
+                <meta name="twitter:description" content="Create a pricing table with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css pricing table" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/progress-bar/Details.tsx b/client/patterns/progress-bar/Details.tsx
index 4bf869c..175152b 100644
--- a/client/patterns/progress-bar/Details.tsx
+++ b/client/patterns/progress-bar/Details.tsx
@@ -21,6 +21,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ProgressBar}>
             <Helmet>
                 <meta name="description" content="Create a progress bar with CSS flexbox" />
+                <meta name="og:description" content="Create a progress bar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a progress bar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css progress bar" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/property-list/Details.tsx b/client/patterns/property-list/Details.tsx
index e121bfa..eece0e4 100644
--- a/client/patterns/property-list/Details.tsx
+++ b/client/patterns/property-list/Details.tsx
@@ -36,6 +36,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.PropertyList}>
             <Helmet>
                 <meta name="description" content="Create a property list with CSS flexbox" />
+                <meta name="og:description" content="Create a property list with CSS flexbox" />
+                <meta name="twitter:description" content="Create a property list with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, property list" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/questions-and-answers/Details.tsx b/client/patterns/questions-and-answers/Details.tsx
index 49f5a56..d8c30b7 100644
--- a/client/patterns/questions-and-answers/Details.tsx
+++ b/client/patterns/questions-and-answers/Details.tsx
@@ -56,6 +56,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.QuestionsAndAnswers}>
             <Helmet>
                 <meta name="description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="og:description" content="Create a questions and answers section with CSS flexbox" />
+                <meta name="twitter:description" content="Create a questions and answers section with CSS flexbox" />
                 <meta name="keywords" content="css accordion, css faq, css flexbox" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/radial-progress-bar/Details.tsx b/client/patterns/radial-progress-bar/Details.tsx
index 630c5ed..f41d4cb 100644
--- a/client/patterns/radial-progress-bar/Details.tsx
+++ b/client/patterns/radial-progress-bar/Details.tsx
@@ -76,6 +76,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.RadialProgressBar}>
             <Helmet>
                 <meta name="description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="og:description" content="Create a radial progress bar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radial progress bar with CSS flexbox" />
                 <meta name="keywords" content="css clip rect, css flexbox, css progress bar" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/radio-button-group/Details.tsx b/client/patterns/radio-button-group/Details.tsx
index 24b28af..2dae615 100644
--- a/client/patterns/radio-button-group/Details.tsx
+++ b/client/patterns/radio-button-group/Details.tsx
@@ -52,6 +52,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.RadioButtonGroup}>
             <Helmet>
                 <meta name="description" content="Create a radio button group with CSS flexbox" />
+                <meta name="og:description" content="Create a radio button group with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radio button group with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio button" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/radio-switch/Details.tsx b/client/patterns/radio-switch/Details.tsx
index e3d245c..721e7ab 100644
--- a/client/patterns/radio-switch/Details.tsx
+++ b/client/patterns/radio-switch/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.RadioSwitch}>
             <Helmet>
                 <meta name="description" content="Create a radio switch with CSS flexbox" />
+                <meta name="og:description" content="Create a radio switch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a radio switch with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css radio switch, css switch" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/rating/Details.tsx b/client/patterns/rating/Details.tsx
index d004843..5756dc2 100644
--- a/client/patterns/rating/Details.tsx
+++ b/client/patterns/rating/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Rating}>
             <Helmet>
                 <meta name="description" content="Create a star rating with CSS flexbox" />
+                <meta name="og:description" content="Create a star rating with CSS flexbox" />
+                <meta name="twitter:description" content="Create a star rating with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css star rating" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/resizable-element/Details.tsx b/client/patterns/resizable-element/Details.tsx
index 707333c..5c56c43 100644
--- a/client/patterns/resizable-element/Details.tsx
+++ b/client/patterns/resizable-element/Details.tsx
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ResizableElement}>
             <Helmet>
                 <meta name="description" content="Create resizable indicators with CSS" />
+                <meta name="og:description" content="Create resizable indicators with CSS" />
+                <meta name="twitter:description" content="Create resizable indicators with CSS" />
                 <meta name="keywords" content="css resizable, css resize cursor" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/ribbon/Details.tsx b/client/patterns/ribbon/Details.tsx
index f2b644a..eb9f5ec 100644
--- a/client/patterns/ribbon/Details.tsx
+++ b/client/patterns/ribbon/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Ribbon}>
             <Helmet>
                 <meta name="description" content="Create a ribbon with CSS" />
+                <meta name="og:description" content="Create a ribbon with CSS" />
+                <meta name="twitter:description" content="Create a ribbon with CSS" />
                 <meta name="keywords" content="css ribbon" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/same-height-columns/Details.tsx b/client/patterns/same-height-columns/Details.tsx
index 5f7a8dc..7cf0b39 100644
--- a/client/patterns/same-height-columns/Details.tsx
+++ b/client/patterns/same-height-columns/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SameHeightColumns}>
             <Helmet>
                 <meta name="description" content="Create same height columns with CSS flexbox" />
+                <meta name="og:description" content="Create same height columns with CSS flexbox" />
+                <meta name="twitter:description" content="Create same height columns with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css same height columns" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/search-box/Details.tsx b/client/patterns/search-box/Details.tsx
index 2e380ed..47671fc 100644
--- a/client/patterns/search-box/Details.tsx
+++ b/client/patterns/search-box/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SearchBox}>
             <Helmet>
                 <meta name="description" content="Create a search box with CSS flexbox" />
+                <meta name="og:description" content="Create a search box with CSS flexbox" />
+                <meta name="twitter:description" content="Create a search box with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css search box" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/separator/Details.tsx b/client/patterns/separator/Details.tsx
index 40d342c..786089f 100644
--- a/client/patterns/separator/Details.tsx
+++ b/client/patterns/separator/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Separator}>
             <Helmet>
                 <meta name="description" content="Create a separator with CSS flexbox" />
+                <meta name="og:description" content="Create a separator with CSS flexbox" />
+                <meta name="twitter:description" content="Create a separator with CSS flexbox" />
                 <meta name="keywords" content="css divider, css flexbox, css separator" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sidebar/Details.tsx b/client/patterns/sidebar/Details.tsx
index 917bf49..03fe7ee 100644
--- a/client/patterns/sidebar/Details.tsx
+++ b/client/patterns/sidebar/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Sidebar}>
             <Helmet>
                 <meta name="description" content="Create a sidebar with CSS flexbox" />
+                <meta name="og:description" content="Create a sidebar with CSS flexbox" />
+                <meta name="twitter:description" content="Create a sidebar with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sidebar" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/simple-grid/Details.tsx b/client/patterns/simple-grid/Details.tsx
index 2633e6a..0f18d59 100644
--- a/client/patterns/simple-grid/Details.tsx
+++ b/client/patterns/simple-grid/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SimpleGrid}>
             <Helmet>
                 <meta name="description" content="Create a simple grid with CSS flexbox" />
+                <meta name="og:description" content="Create a simple grid with CSS flexbox" />
+                <meta name="twitter:description" content="Create a simple grid with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css flexbox grid, css grid, css layout" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/slider/Details.tsx b/client/patterns/slider/Details.tsx
index 8e2d232..239b629 100644
--- a/client/patterns/slider/Details.tsx
+++ b/client/patterns/slider/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Slider}>
             <Helmet>
                 <meta name="description" content="Create a slider with CSS flexbox" />
+                <meta name="og:description" content="Create a slider with CSS flexbox" />
+                <meta name="twitter:description" content="Create a slider with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css slider" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/spin-button/Details.tsx b/client/patterns/spin-button/Details.tsx
index 999ea83..9568f69 100644
--- a/client/patterns/spin-button/Details.tsx
+++ b/client/patterns/spin-button/Details.tsx
@@ -22,6 +22,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SpinButton}>
             <Helmet>
                 <meta name="description" content="Create a spin button with CSS flexbox" />
+                <meta name="og:description" content="Create a spin button with CSS flexbox" />
+                <meta name="twitter:description" content="Create a spin button with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css spin button" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/split-navigation/Details.tsx b/client/patterns/split-navigation/Details.tsx
index 462e882..6386ab3 100644
--- a/client/patterns/split-navigation/Details.tsx
+++ b/client/patterns/split-navigation/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SplitNavigation}>
             <Helmet>
                 <meta name="description" content="Create a split navigation with CSS flexbox" />
+                <meta name="og:description" content="Create a split navigation with CSS flexbox" />
+                <meta name="twitter:description" content="Create a split navigation with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css menu, css navigation, css split navigation" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/split-screen/Details.tsx b/client/patterns/split-screen/Details.tsx
index c68edc1..6639267 100644
--- a/client/patterns/split-screen/Details.tsx
+++ b/client/patterns/split-screen/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.SplitScreen}>
             <Helmet>
                 <meta name="description" content="Create a split screen with CSS flexbox" />
+                <meta name="og:description" content="Create a split screen with CSS flexbox" />
+                <meta name="twitter:description" content="Create a split screen with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css split screen" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/stacked-cards/Details.tsx b/client/patterns/stacked-cards/Details.tsx
index 318ca24..3df76bf 100644
--- a/client/patterns/stacked-cards/Details.tsx
+++ b/client/patterns/stacked-cards/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StackedCards}>
             <Helmet>
                 <meta name="description" content="Create stacked cards with CSS" />
+                <meta name="og:description" content="Create stacked cards with CSS" />
+                <meta name="twitter:description" content="Create stacked cards with CSS" />
                 <meta name="keywords" content="css card, css stacked cards, css transform rotate" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/stamp-border/Details.tsx b/client/patterns/stamp-border/Details.tsx
index 6ff4cd2..03a755c 100644
--- a/client/patterns/stamp-border/Details.tsx
+++ b/client/patterns/stamp-border/Details.tsx
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StampBorder}>
             <Helmet>
                 <meta name="description" content="Create stamp border with CSS" />
+                <meta name="og:description" content="Create stamp border with CSS" />
+                <meta name="twitter:description" content="Create stamp border with CSS" />
                 <meta name="keywords" content="css radial gradient, css stamp border" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/statistic/Details.tsx b/client/patterns/statistic/Details.tsx
index bde5d00..a8a8539 100644
--- a/client/patterns/statistic/Details.tsx
+++ b/client/patterns/statistic/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Statistic}>
             <Helmet>
                 <meta name="description" content="Create a statistic component with CSS flexbox" />
+                <meta name="og:description" content="Create a statistic component with CSS flexbox" />
+                <meta name="twitter:description" content="Create a statistic component with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css statistic" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/status-light/Details.tsx b/client/patterns/status-light/Details.tsx
index 92badfd..2088f14 100644
--- a/client/patterns/status-light/Details.tsx
+++ b/client/patterns/status-light/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StatusLight}>
             <Helmet>
                 <meta name="description" content="Create a status light with CSS flexbox" />
+                <meta name="og:description" content="Create a status light with CSS flexbox" />
+                <meta name="twitter:description" content="Create a status light with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css status light" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/stepper-input/Details.tsx b/client/patterns/stepper-input/Details.tsx
index 67ab73d..528db75 100644
--- a/client/patterns/stepper-input/Details.tsx
+++ b/client/patterns/stepper-input/Details.tsx
@@ -25,6 +25,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StepperInput}>
             <Helmet>
                 <meta name="description" content="Create a stepper input with CSS flexbox" />
+                <meta name="og:description" content="Create a stepper input with CSS flexbox" />
+                <meta name="twitter:description" content="Create a stepper input with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper input" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sticky-footer/Details.tsx b/client/patterns/sticky-footer/Details.tsx
index e40b581..7a4ef89 100644
--- a/client/patterns/sticky-footer/Details.tsx
+++ b/client/patterns/sticky-footer/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StickyFooter}>
             <Helmet>
                 <meta name="description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="og:description" content="Create a sticky footer with CSS flexbox" />
+                <meta name="twitter:description" content="Create a sticky footer with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css layout, css sticky, css sticky footer" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sticky-header/Details.tsx b/client/patterns/sticky-header/Details.tsx
index d59de54..acec56b 100644
--- a/client/patterns/sticky-header/Details.tsx
+++ b/client/patterns/sticky-header/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StickyHeader}>
             <Helmet>
                 <meta name="description" content="Create a sticky header with CSS" />
+                <meta name="og:description" content="Create a sticky header with CSS" />
+                <meta name="twitter:description" content="Create a sticky header with CSS" />
                 <meta name="keywords" content="css layout, css position sticky, css sticky header" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sticky-sections/Details.tsx b/client/patterns/sticky-sections/Details.tsx
index dbfd6ec..dc146f9 100644
--- a/client/patterns/sticky-sections/Details.tsx
+++ b/client/patterns/sticky-sections/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StickySections}>
             <Helmet>
                 <meta name="description" content="Create sticky sections with CSS" />
+                <meta name="og:description" content="Create sticky sections with CSS" />
+                <meta name="twitter:description" content="Create sticky sections with CSS" />
                 <meta name="keywords" content="css layout, css sticky, css sticky sections" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sticky-table-column/Details.tsx b/client/patterns/sticky-table-column/Details.tsx
index 48f16ed..aee55ff 100644
--- a/client/patterns/sticky-table-column/Details.tsx
+++ b/client/patterns/sticky-table-column/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StickyTableColumn}>
             <Helmet>
                 <meta name="description" content="Create sticky table column with CSS" />
+                <meta name="og:description" content="Create sticky table column with CSS" />
+                <meta name="twitter:description" content="Create sticky table column with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table column" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/sticky-table-headers/Details.tsx b/client/patterns/sticky-table-headers/Details.tsx
index 3ad8e03..21d7a1f 100644
--- a/client/patterns/sticky-table-headers/Details.tsx
+++ b/client/patterns/sticky-table-headers/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.StickyTableHeaders}>
             <Helmet>
                 <meta name="description" content="Create sticky table headers with CSS" />
+                <meta name="og:description" content="Create sticky table headers with CSS" />
+                <meta name="twitter:description" content="Create sticky table headers with CSS" />
                 <meta name="keywords" content="css position sticky, css sticky table headers" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/switch/Details.tsx b/client/patterns/switch/Details.tsx
index 1c47ff2..031c11c 100644
--- a/client/patterns/switch/Details.tsx
+++ b/client/patterns/switch/Details.tsx
@@ -19,6 +19,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Switch}>
             <Helmet>
                 <meta name="description" content="Create a switch with CSS flexbox" />
+                <meta name="og:description" content="Create a switch with CSS flexbox" />
+                <meta name="twitter:description" content="Create a switch with CSS flexbox" />
                 <meta name="keywords" content="css custom checkbox, css flexbox, css switch, css switcher" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/tab/Details.tsx b/client/patterns/tab/Details.tsx
index 5df77e1..a3d07ec 100644
--- a/client/patterns/tab/Details.tsx
+++ b/client/patterns/tab/Details.tsx
@@ -42,6 +42,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Tab}>
             <Helmet>
                 <meta name="description" content="Create tabs with CSS flexbox" />
+                <meta name="og:description" content="Create tabs with CSS flexbox" />
+                <meta name="twitter:description" content="Create tabs with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css navigation, css tab" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/teardrop/Details.tsx b/client/patterns/teardrop/Details.tsx
index bc5013a..4d5ed39 100644
--- a/client/patterns/teardrop/Details.tsx
+++ b/client/patterns/teardrop/Details.tsx
@@ -16,10 +16,9 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Teardrop}>
             <Helmet>
                 <meta name="description" content="Create a teardrop with CSS" />
-                <meta
-                    name="keywords"
-                    content="css border radius, css teardrop, css water drop shape, css water droplet"
-                />
+                <meta name="og:description" content="Create a teardrop with CSS" />
+                <meta name="twitter:description" content="Create a teardrop with CSS" />
+                <meta name="keywords" content="css border radius, css teardrop, css water drop shape, css water droplet" />
             </Helmet>
             <div className='p-8 pb-20'>
                 <BrowserFrame
diff --git a/client/patterns/three-dimensions-card/Details.tsx b/client/patterns/three-dimensions-card/Details.tsx
index bde3d14..10d1257 100644
--- a/client/patterns/three-dimensions-card/Details.tsx
+++ b/client/patterns/three-dimensions-card/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ThreeDimensionsCard}>
             <Helmet>
                 <meta name="description" content="Create a 3D card with CSS" />
+                <meta name="og:description" content="Create a 3D card with CSS" />
+                <meta name="twitter:description" content="Create a 3D card with CSS" />
                 <meta name="keywords" content="css 3D card" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/timeline/Details.tsx b/client/patterns/timeline/Details.tsx
index 71bb200..71f45f5 100644
--- a/client/patterns/timeline/Details.tsx
+++ b/client/patterns/timeline/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Timeline}>
             <Helmet>
                 <meta name="description" content="Create a timeline with CSS flexbox" />
+                <meta name="og:description" content="Create a timeline with CSS flexbox" />
+                <meta name="twitter:description" content="Create a timeline with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css timeline" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/toggle-password-visibility/Details.tsx b/client/patterns/toggle-password-visibility/Details.tsx
index 151aedf..9367628 100644
--- a/client/patterns/toggle-password-visibility/Details.tsx
+++ b/client/patterns/toggle-password-visibility/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.TogglePasswordVisibility}>
             <Helmet>
                 <meta name="description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="og:description" content="Create a toggle password visibility with CSS flexbox" />
+                <meta name="twitter:description" content="Create a toggle password visibility with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, toggle password visibility" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/tooltip/Details.tsx b/client/patterns/tooltip/Details.tsx
index 4eac9e5..d2510cb 100644
--- a/client/patterns/tooltip/Details.tsx
+++ b/client/patterns/tooltip/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Tooltip}>
             <Helmet>
                 <meta name="description" content="Create a tooltip with CSS" />
+                <meta name="og:description" content="Create a tooltip with CSS" />
+                <meta name="twitter:description" content="Create a tooltip with CSS" />
                 <meta name="keywords" content="css tooltip" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/tree-diagram/Details.tsx b/client/patterns/tree-diagram/Details.tsx
index 6ce48f6..5556548 100644
--- a/client/patterns/tree-diagram/Details.tsx
+++ b/client/patterns/tree-diagram/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.TreeDiagram}>
             <Helmet>
                 <meta name="description" content="Create a tree diagram with CSS" />
+                <meta name="og:description" content="Create a tree diagram with CSS" />
+                <meta name="twitter:description" content="Create a tree diagram with CSS" />
                 <meta name="keywords" content="css sitemap, css tree diagram" />
             </Helmet>
             <BrowserFrame
diff --git a/client/patterns/triangle-buttons/Details.tsx b/client/patterns/triangle-buttons/Details.tsx
index 228332a..ed96922 100644
--- a/client/patterns/triangle-buttons/Details.tsx
+++ b/client/patterns/triangle-buttons/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.TriangleButtons}>
             <Helmet>
                 <meta name="description" content="Create triangle buttons with CSS" />
+                <meta name="og:description" content="Create triangle buttons with CSS" />
+                <meta name="twitter:description" content="Create triangle buttons with CSS" />
                 <meta name="keywords" content="css triangle buttons" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/upload-button/Details.tsx b/client/patterns/upload-button/Details.tsx
index 2a842c4..3fcd714 100644
--- a/client/patterns/upload-button/Details.tsx
+++ b/client/patterns/upload-button/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.UploadButton}>
             <Helmet>
                 <meta name="description" content="Create an upload button with CSS flexbox" />
+                <meta name="og:description" content="Create an upload button with CSS flexbox" />
+                <meta name="twitter:description" content="Create an upload button with CSS flexbox" />
                 <meta name="keywords" content="css file input, css flexbox, css upload button" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/validation-icon/Details.tsx b/client/patterns/validation-icon/Details.tsx
index a151f6b..c001018 100644
--- a/client/patterns/validation-icon/Details.tsx
+++ b/client/patterns/validation-icon/Details.tsx
@@ -15,6 +15,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.ValidationIcon}>
             <Helmet>
                 <meta name="description" content="Add validation icons to input with CSS" />
+                <meta name="og:description" content="Add validation icons to input with CSS" />
+                <meta name="twitter:description" content="Add validation icons to input with CSS" />
                 <meta name="keywords" content="css validation icon" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/video-background/Details.tsx b/client/patterns/video-background/Details.tsx
index 5df5e9f..739695e 100644
--- a/client/patterns/video-background/Details.tsx
+++ b/client/patterns/video-background/Details.tsx
@@ -17,6 +17,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.VideoBackground}>
             <Helmet>
                 <meta name="description" content="Add video background with CSS flexbox" />
+                <meta name="og:description" content="Add video background with CSS flexbox" />
+                <meta name="twitter:description" content="Add video background with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, object fit cover" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/voting/Details.tsx b/client/patterns/voting/Details.tsx
index c319490..a8b627a 100644
--- a/client/patterns/voting/Details.tsx
+++ b/client/patterns/voting/Details.tsx
@@ -20,6 +20,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Voting}>
             <Helmet>
                 <meta name="description" content="Create a voting control with CSS flexbox" />
+                <meta name="og:description" content="Create a voting control with CSS flexbox" />
+                <meta name="twitter:description" content="Create a voting control with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css triangle buttons, css voting control" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/watermark/Details.tsx b/client/patterns/watermark/Details.tsx
index a6f694e..f605a28 100644
--- a/client/patterns/watermark/Details.tsx
+++ b/client/patterns/watermark/Details.tsx
@@ -16,6 +16,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Watermark}>
             <Helmet>
                 <meta name="description" content="Create a watermark with CSS" />
+                <meta name="og:description" content="Create a watermark with CSS" />
+                <meta name="twitter:description" content="Create a watermark with CSS" />
                 <meta name="keywords" content="css watermark" />
             </Helmet>
             <div className='p-8 pb-20'>
diff --git a/client/patterns/wizard/Details.tsx b/client/patterns/wizard/Details.tsx
index 4c493f9..abe3604 100644
--- a/client/patterns/wizard/Details.tsx
+++ b/client/patterns/wizard/Details.tsx
@@ -18,6 +18,8 @@ const Details: React.FC<{}> = () => {
         <DetailsLayout pattern={Pattern.Wizard}>
             <Helmet>
                 <meta name="description" content="Create a wizard with CSS flexbox" />
+                <meta name="og:description" content="Create a wizard with CSS flexbox" />
+                <meta name="twitter:description" content="Create a wizard with CSS flexbox" />
                 <meta name="keywords" content="css flexbox, css stepper, css wizard" />
             </Helmet>
             <div className='p-8 pb-20'>