diff --git a/package-lock.json b/package-lock.json
index fe4feb05..192e72d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,6 +14,7 @@
                 "lodash": "^4.17.21",
                 "markdown-it": "^13.0.1",
                 "next": "^12.2.5",
+                "next-seo": "^5.5.0",
                 "rc-tooltip": "^5.1.0",
                 "react": "^17.0.1",
                 "react-dom": "^17.0.1",
@@ -2673,6 +2674,16 @@
                 }
             }
         },
+        "node_modules/next-seo": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.5.0.tgz",
+            "integrity": "sha512-5ouBHFtx8YrSDW44lj0qIEQ+oMcz6stgoITB+SqHUZbhgizoJsyLmq73gJ0lxtEKpcN8vG2QgRIJfdb8OAPChw==",
+            "peerDependencies": {
+                "next": "^8.1.1-canary.54 || >=9.0.0",
+                "react": ">=16.0.0",
+                "react-dom": ">=16.0.0"
+            }
+        },
         "node_modules/node-abi": {
             "version": "3.24.0",
             "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.24.0.tgz",
@@ -5958,6 +5969,12 @@
                 "use-sync-external-store": "1.2.0"
             }
         },
+        "next-seo": {
+            "version": "5.5.0",
+            "resolved": "https://registry.npmjs.org/next-seo/-/next-seo-5.5.0.tgz",
+            "integrity": "sha512-5ouBHFtx8YrSDW44lj0qIEQ+oMcz6stgoITB+SqHUZbhgizoJsyLmq73gJ0lxtEKpcN8vG2QgRIJfdb8OAPChw==",
+            "requires": {}
+        },
         "node-abi": {
             "version": "3.24.0",
             "resolved": "https://registry.npmjs.org/node-abi/-/node-abi-3.24.0.tgz",
diff --git a/package.json b/package.json
index 1965e876..ce49002f 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
         "lodash": "^4.17.21",
         "markdown-it": "^13.0.1",
         "next": "^12.2.5",
+        "next-seo": "^5.5.0",
         "rc-tooltip": "^5.1.0",
         "react": "^17.0.1",
         "react-dom": "^17.0.1",
diff --git a/pages/[...slug].tsx b/pages/[...slug].tsx
index 5ae1bf6d..fa0dd683 100644
--- a/pages/[...slug].tsx
+++ b/pages/[...slug].tsx
@@ -2,7 +2,7 @@ import Head from "next/head"
 import { App } from "src/components/App"
 import { tail } from "lodash"
 import { Page } from "src/components/Page"
-import { Meta } from "src/components/Meta"
+import { NextSeo } from "next-seo"
 import { MetaBuilder } from "src/lib/meta"
 import { apiGet } from "@/next-lib"
 import { GetStaticProps, NextPage } from "next"
@@ -57,94 +57,116 @@ const Index: NextPage<Props> = props => {
     }
 
     return (
-        <App
-            contentStyle={{
-                marginTop: "var(--size-l)",
-                marginBottom: "var(--size-xl)",
-            }}
-            menu={props.menu}
-            breadcrumbs={props.breadcrumb}
-        >
-            <Head>
-                <title>{props.title}</title>
-                {!props.meta ? null : (
-                    <Meta meta={props.meta} />
-                )}
-            </Head>
+        <>
+            {!props.meta ? null : (
+                <NextSeo
+                    title={props.meta.title}
+                    description={props.meta.description}
+                    canonical="https://art.shlisselburg.org/"
+                    openGraph={{
+                        url: props.meta.url,
+                        title: props.meta.title,
+                        description: props.meta.description,
+                        images: [
+                            {
+                                url: props.meta.image,
+                                width: props.meta.imageWidth,
+                                height: props.meta.imageHeight,
+                                alt: props.meta.description,
+                                type: "image/jpeg",
+                            },
+                        ],
+                        site_name: props.meta.siteName,
+                    }}
+                />
+            )}
 
-            <Page
-                tags={props.tags}
-                date={props.date ? new Date(props.date) : undefined}
+            <App
+                contentStyle={{
+                    marginTop: "var(--size-l)",
+                    marginBottom: "var(--size-xl)",
+                }}
+                menu={props.menu}
+                breadcrumbs={props.breadcrumb}
             >
-                <article className={"article"}>
-                    {props.tokens.map((x, i) => {
-                        switch (x.token) {
-                        case "html":
-                            return (
-                                <Html
-                                    key={i}
-                                    html={x.data}
-                                />
-                            )
+                <Head>
+                    <title>{props.title}</title>
+                </Head>
 
-                        case "instagram":
-                            return (
-                                <Html
-                                    key={i}
-                                    html={x.data.embed}
-                                />
-                            )
+                <Page
+                    tags={props.tags}
+                    date={props.date ? new Date(props.date) : undefined}
+                >
+                    <article className={"article"}>
+                        {props.tokens.map((x, i) => {
+                            switch (x.token) {
+                            case "html":
+                                return (
+                                    <Html
+                                        key={i}
+                                        html={x.data}
+                                    />
+                                )
 
-                        case "youtube":
-                            return (
-                                <Youtube
-                                    key={i}
-                                    url={x.data.url}
-                                />
-                            )
+                            case "instagram":
+                                return (
+                                    <Html
+                                        key={i}
+                                        html={x.data.embed}
+                                    />
+                                )
 
-                        case "image":
-                            return (
-                                <Picture
-                                    key={i}
-                                    src={x.data.src}
-                                    alt={x.data.alt}
-                                    width={x.data.width}
-                                    height={x.data.height}
-                                    caption={x.data.caption}
-                                    blur={x.data.blur}
-                                    wide={x.wide}
-                                />
-                            )
+                            case "youtube":
+                                return (
+                                    <Youtube
+                                        key={i}
+                                        url={x.data.url}
+                                    />
+                                )
 
-                        case "file":
-                            return (
-                                <FileCard
-                                    key={i}
-                                    sign={props.documentSignature}
-                                    {...x.data}
-                                />
-                            )
+                            case "image":
+                                return (
+                                    <Picture
+                                        key={i}
+                                        src={x.data.src}
+                                        alt={x.data.alt}
+                                        width={x.data.width}
+                                        height={x.data.height}
+                                        caption={x.data.caption}
+                                        blur={x.data.blur}
+                                        wide={x.wide}
+                                    />
+                                )
 
-                        case "grid":
-                            return (
-                                <PageGrid
-                                    key={i}
-                                    items={x.data.items}
-                                />
-                            )
+                            case "file":
+                                return (
+                                    <FileCard
+                                        key={i}
+                                        sign={props.documentSignature}
+                                        {...x.data}
+                                    />
+                                )
 
-                        default:
-                            return (
-                                <pre key={i}>
-                                    {JSON.stringify(x)}
-                                </pre>
-                            )
-                        }
-                    })}
-                </article>
-            </Page>
-        </App>
+                            case "grid":
+                                return (
+                                    <PageGrid
+                                        key={i}
+                                        items={x.data.items}
+                                    />
+                                )
+
+                            default:
+                                return (
+                                    <pre key={i}>
+                                        {JSON.stringify(x)}
+                                    </pre>
+                                )
+                            }
+                        })}
+                    </article>
+                </Page>
+            </App>
+        </>
     )
 }
 
diff --git a/pages/index.tsx b/pages/index.tsx
index 521a293f..5d853c61 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -1,6 +1,6 @@
 import Head from "next/head"
 import { App } from "src/components/App"
-import { Meta } from "src/components/Meta"
+import { NextSeo } from "next-seo"
 import { PageGrid } from "src/components/PageGrid"
 import { HudozkaTitle } from "src/components/HudozkaTitle"
 import { MetaBuilder } from "src/lib/meta"
@@ -17,26 +17,46 @@ type Props = {
 }
 
 const Index: NextPage<Props> = props => (
-    <App
-        showAuthor={true}
-        menu={props.menu}
-    >
-        <Head>
-            <title>{props.title}</title>
-            <Meta meta={props.meta} />
-        </Head>
-
-        <HudozkaTitle
-            style={{
-                marginTop: "var(--size-m)",
-                marginBottom: "var(--size-m)",
+    <>
+        <NextSeo
+            title={props.meta.title}
+            description={props.meta.description}
+            canonical="https://art.shlisselburg.org/"
+            openGraph={{
+                url: props.meta.url,
+                title: props.meta.title,
+                description: props.meta.description,
+                images: [
+                    {
+                        url: props.meta.image,
+                        width: props.meta.imageWidth,
+                        height: props.meta.imageHeight,
+                        alt: props.meta.description,
+                        type: "image/jpeg",
+                    },
+                ],
+                site_name: props.meta.siteName,
             }}
         />
+        <Head>
+            <title>{props.title}</title>
+        </Head>
+        <App
+            showAuthor={true}
+            menu={props.menu}
+        >
+            <HudozkaTitle
+                style={{
+                    marginTop: "var(--size-m)",
+                    marginBottom: "var(--size-m)",
+                }}
+            />
 
-        <PageGrid
-            items={props.items}
-        />
-    </App>
+            <PageGrid
+                items={props.items}
+            />
+        </App>
+    </>
 )
 
 export const getStaticProps: GetStaticProps<Props> = async () => {
diff --git a/src/components/Meta/index.tsx b/src/components/Meta/index.tsx
deleted file mode 100644
index f932a7aa..00000000
--- a/src/components/Meta/index.tsx
+++ /dev/null
@@ -1,39 +0,0 @@
-import { IMeta } from "src/types"
-
-export type MetaProps = {
-    meta: IMeta
-}
-
-export const Meta: React.FC<MetaProps> = ({ meta }) => (
-    <>
-        {/* Search Engine */}
-        <meta name="description" content={meta.description} />
-        <meta name="image" content={meta.image} />
-
-        {/* Schema.org for Google */}
-        <meta itemProp="name" content={meta.title} />
-        <meta itemProp="description" content={meta.description} />
-        <meta itemProp="image" content={meta.image} />
-
-        {/* Open Graph general (Facebook, Pinterest & Google+) */}
-        <meta property="og:title" content={meta.title} />
-        <meta property="og:description" content={meta.description} />
-        <meta property="og:image" content={meta.image} />
-        <meta property="og:image:width" content={meta.imageWidth.toString()} />
-        <meta property="og:image:height" content={meta.imageHeight.toString()} />
-        <meta property="og:url" content={meta.url} />
-        <meta property="og:site_name" content={meta.siteName} />
-        <meta property="og:locale" content={meta.locale} />
-        <meta property="og:type" content={meta.type} />
-
-        {/* Twitter */}
-        <meta name="twitter:card" content={meta.twitterCard} />
-        <meta name="twitter:title" content={meta.title} />
-        <meta name="twitter:description" content={meta.description} />
-        <meta name="twitter:image:src" content={meta.image} />
-        <meta name="twitter:domain" content={meta.domain} />
-        <meta name="twitter:url" content={meta.url} />
-        <meta name="twitter:site" content={meta.twitterSite} />
-        <meta name="twitter:creator" content={meta.twitterCreator} />
-    </>
-)