[site/content][xs]: add seo guide

site/content/howto/seo.md

@@ -0,0 +1,79 @@
+# How to customize page metadata for SEO?
+
+>[!info]
+>See [`next-seo` documentation](https://github.com/garmeeh/next-seo) to learn more.
+
+## Setup
+
+Install `next-seo` package:
+
+```sh
+npm i next-seo
+```
+
+## Default SEO configuration
+
+Create `next-seo.config` file (e.g. in the root of your project) and add default meta tags values you want to be set up for your pages. For example:
+
+```ts
+export default {
+  openGraph: {
+    type: 'website',
+    locale: 'en_IE',
+    url: 'https://www.my.portaljs.app/',
+    siteName: 'MyPortalJSApp',
+  },
+  twitter: {
+    handle: '@handle',
+    site: '@site',
+    cardType: 'summary_large_image',
+  },
+};
+```
+
+Then, in your custom Next.js App, add the following:
+
+```tsx
+// /pages/_app.tsx
+import { DefaultSeo } from "next-seo";
+
+// import your default seo configuration
+import SEO from '../next-seo.config';
+
+
+export default function MyApp({ Component, pageProps }) {
+    // ... your code
+    return (
+        <>
+            <DefaultSeo {...SEO} />
+            <Component {...pageProps} />
+        </>
+    );
+};
+
+```
+
+>[!info]
+>To learn more on default SEO configuration with `next-seo`, see [this docs section](https://github.com/garmeeh/next-seo#default-seo-configuration).
+
+## Per-page SEO configuration
+
+To add page specific meta tag values:
+
+```tsx
+import { NextSeo } from 'next-seo';
+
+export default function Page() (
+  // ...
+  <>
+    <NextSeo
+      title="My Portal JS page"
+      description="A short description."
+    />
+    <p>My Portal JS page</p>
+  </>
+);
+```
+
+>[!info]
+> To learn more on per-page SEO configuration with `next-seo`, see [this docs section](https://github.com/garmeeh/next-seo#add-seo-to-page)