How to add meta data to your routes in Remix?

The meta export allows you to add metadata HTML tags for every route in your app.

export const meta: V2_MetaFunction = ({data}) => {
  return [
    {property: 'og:title', content: data?.layoutData?.seo?.title},
    {property: 'og:description', content: data?.layoutData?.seo?.description},
    {property: 'og:type', content: 'website'},
    {property: 'og:site_name', content: 'Naix Jewelry'},
    {property: 'og:image:type', content: 'image/png'},
    {property: 'og:image', content: data?.layoutData?.seo?.image?.url},
    {property: 'og:image:width', content: data?.layoutData?.seo?.image?.width},
    {
      property: 'og:image:height',
      content: data?.layoutData?.seo?.image?.height,
    },
    {name: 'twitter:site', content: '@naixjewelry'},
    {name: 'twitter:card', content: 'summary_large_image'},
    {name: 'twitter:title', content: data?.layoutData?.seo?.title},
    {name: 'twitter:description', content: data?.layoutData?.seo?.description},
    {name: 'twitter:image:src', content: data?.layoutData?.seo?.image?.url},
    {name: 'theme-color', content: '#FFFFFF'},
  ];
};

In this example, the data that you used for generating meta tag are coming from your route's loader.