diff --git a/site/content/howto/seo.md b/site/content/howto/seo.md new file mode 100644 index 00000000..42d3c544 --- /dev/null +++ b/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 ( + <> + + + + ); +}; + +``` + +>[!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() ( + // ... + <> + +

My Portal JS page

+ +); +``` + +>[!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) \ No newline at end of file