Fix incorrect meta tags

shafiqrbs · Jan 18, 2024 · 02fd0e7 · 02fd0e7
1 parent 7b5bfee
commit 02fd0e7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 6 deletions.
diff --git a/components/CategoryPage/CategoryPage.tsx b/components/CategoryPage/CategoryPage.tsx
@@ -15,10 +15,20 @@ export function CategoryPage({ category, components }: CategoryPageProps) {
     <ComponentCanvas {...component} key={component.slug} zIndex={components.length - index} />
   ));
 
+  const title = `${category.name} | Mantine UI`;
+
   return (
     <Shell>
       <Head>
-        <title>{`${category.name} | Mantine UI`}</title>
+        <title>{title}</title>
+        <meta itemProp="name" content={title} key="item-title" />
+        <meta property="og:title" content={title} key="og-title" />
+        <meta name="twitter:title" content={title} key="twitter-title" />
+        <meta
+          property="og:url"
+          content={`https://ui.mantine.dev/category/${category.slug}`}
+          key="og-url"
+        />
       </Head>
       <Container size="xl" mt={50}>
         <CategoryHeader category={category} />

diff --git a/components/ComponentPage/ComponentPage.tsx b/components/ComponentPage/ComponentPage.tsx
@@ -38,10 +38,20 @@ export function ComponentPage({ data }: ComponentPageProps) {
   const [state, setState] = useState('preview');
   const [primaryColor, setPrimaryColor] = useState('blue');
 
+  const title = `${data.attributes.title} | Mantine UI`;
+
   return (
     <>
       <Head>
-        <title>{`${data.attributes.title} | Mantine UI`}</title>
+        <title>{title}</title>
+        <meta itemProp="name" content={title} key="item-title" />
+        <meta property="og:title" content={title} key="og-title" />
+        <meta name="twitter:title" content={title} key="twitter-title" />
+        <meta
+          property="og:url"
+          content={`https://ui.mantine.dev/component/${data.slug}`}
+          key="og-url"
+        />
       </Head>
 
       <ComponentPreviewControls

diff --git a/components/HomePage/HomePage.tsx b/components/HomePage/HomePage.tsx
@@ -1,4 +1,3 @@
-import Head from 'next/head';
 import { CATEGORIES } from '../../data';
 import { Shell } from '../Shell';
 import { Banner } from './Banner/Banner';
@@ -16,9 +15,6 @@ export function HomePage({ componentsCountByCategory }: HomePageProps) {
 
   return (
     <Shell>
-      <Head>
-        <title>Mantine UI</title>
-      </Head>
       <Banner componentsCount={allComponentsCount} />
       <div id="main">
         <CategoriesList groups={CATEGORIES} componentsCountByCategory={componentsCountByCategory} />

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -27,7 +27,14 @@ export default function App({ Component, pageProps }: any) {
     <>
       <Head>
         <title>Mantine UI</title>
+        <meta itemProp="name" content="Mantine UI" key="item-title" />
+        <meta property="og:title" content="Mantine UI" key="og-title" />
+        <meta name="twitter:title" content="Mantine UI" key="twitter-title" />
+        <meta property="og:url" content="https://ui.mantine.dev/" key="og-url" />
         <link rel="shortcut icon" href="/favicon.svg" />
+        <meta name="language" content="English" />
+        <meta name="robots" content="index, follow" />
+        <meta name="keywords" content="react,mantine,components" />
         <meta
           name="viewport"
           content="minimum-scale=1, initial-scale=1, width=device-width, user-scalable=no"
@@ -41,6 +48,16 @@ export default function App({ Component, pageProps }: any) {
           name="og:image"
           content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"
         />
+        <meta
+          name="twitter:image"
+          content="https://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"
+        />
+        <meta
+          itemProp="image"
+          content="http://raw.githubusercontent.com/mantinedev/mantine/master/.demo/social-preview.png"
+        />
+        <meta itemProp="description" content="120+ prebuilt components with Mantine" />
+        <meta name="description" content="120+ prebuilt components with Mantine" />
       </Head>
       <GaScript />