Adding metas (metatags, opengraph, social etc.) to a page

Shipixen comes with a built-in support for adding metas to a page. You can easily generate metas for a page, including metatags, opengraph, social etc. by using the genPageMetadata function.

Adding metas to a page

We'll leverage Next.js's metadata object to add metas to a page. Here's how you can add metas to a page:

page.tsx

+ import { genPageMetadata } from 'app/seo';

+ export const metadata = genPageMetadata({
+   title: 'About Us',
+   description:
+     'Learn more about us and our mission to help you build your next project.',
+ });

export default function Page () {
  return (
    <div>
      <h1>Page</h1>
      {/* ... */}
    </div>
  )
}

That's it! This will add all required metas to the page, including regular metatags, opengraph metatags, and twitter metatags.

Next.js only supports exporting meta tags from a server component. If you have 'use client' at the top of a page, move all page contents to a component. Then, import that component into your page ('use client' is then not required on the page, only in the component).

Adding meta images to a page

You can also add meta images to a page. It's just as easy, here's an example:

page.tsx

import { genPageMetadata } from 'app/seo';
+ import { siteConfig } from '@/data/config/site.settings';

+ const url = `https://${siteConfig.domain}`;
+ const ogImage = url + '/static/images/productsOgImage.jpg'; // or any absolute URL

export const metadata = genPageMetadata({
  title: 'About Us',
  description:
    'Learn more about us and our mission to help you build your next project.',
+ image: ogImage,
});

export default function Page () {
  return (
    <div>
      <h1>Page</h1>
      {/* ... */}
    </div>
  )
}

This will add an image to the page's metas.

Make sure to replace the `ogImage` URL with your own image URL. Open graph images should be absolute (so http(s)://...) and at least 1200x630 pixels.

Adding metas to a page

Adding meta images to a page

Further reading