Add keywords and description tags to all pages

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.