Meta tags

Meta tags

This guide covers how to set meta tags from an article content type in Drupal to a front end app for SEO purposes.

Note

Consider that for simplicity, we are using the article content type as an example. You can update the queries to handle other content types.

Drupal setup

• Meta tags are set in the article content type in Drupal.
• graphql_compose_metatags submodule from Graphql compose is installed, and enabled.

Frontend setup

Install dependencies

React Router

First of all, to process the Drupal meta tags into the React Router format you can install the drupal-decoupled package.

npm

npm install drupal-decoupled

yarn

yarn add drupal-decoupled

pnpm

pnpm install drupal-decoupled

Next.js

First of all, to process the Drupal meta tags into the Next.js format you can install the drupal-decoupled package.

npm

npm install drupal-decoupled

yarn

yarn add drupal-decoupled

pnpm

pnpm install drupal-decoupled

Update the content query

On the front end, update the content query to also fetch the meta tags.

React Router

If you came from the React Router Guide, you should have a splat route with a route query. Update this query to fetch the meta tags for the page.

app/routes/$.tsx

query route($path: String!) {
  route(path: $path) {
    ... on RouteInternal {
      entity {
        ... on NodeArticle {
          ...
          body {
            value
          }
          // highlight-addition-start
          metatag {
            __typename
            ... on MetaTagLink {
              attributes {
                rel
                href
              }
            }
            ... on MetaTagValue {
              attributes {
                name
                content
              }
            }
            ... on MetaTagProperty {
              attributes {
                property
                content
              }
            }
          }
        // highlight-addition-end
        }
      }
    }
  }
}

Next.js

If you came from the Next.js Guide, you should be fetching data using NodeArticleFragment. Update this fragment to fetch the meta tags for the node.

graphql/fragments/node.ts

export const NodeArticleFragment = graphql(
  `
    fragment NodeArticleFragment on NodeArticle {
      __typename
      id
      title
      ...
      // highlight-addition-start
      metatag {
        __typename
        ... on MetaTagLink {
          attributes {
            rel
            href
          }
        }
        ... on MetaTagValue {
          attributes {
            name
            content
          }
        }
        ... on MetaTagProperty {
          attributes {
            property
            content
          }
        }
      }
      // highlight-addition-end
      body {
        processed
      }
    }
  `,
  [MediaImageFragment, UserFragment],
);

Expose the meta tags

Before you can set the meta tags, update the imports in the file that is loading the content from Drupal, to includes the meta tags parser function and the needed type definitions.

React Router

app/routes/$.tsx

import {
  //highlight-addition
  metaTags,
} from "drupal-decoupled/react-router";
import type { Route } from "./+types/$";
import { calculateMetaTags } from "~/utils/metatags";

Next.js

app/[[...slug]]/page.tsx

import { type FragmentOf, readFragment } from "gql.tada";
import type { Metadata } from "next";
//highlight-addition-start
import { metaTags } from "drupal-decoupled/next";
import { calculateMetaTags } from "@/utils/metatags";
//highlight-addition-end

and finally you can set the meta tags in the page.

React Router

To archive it, export a meta function to handle the meta tags.

app/routes/$.tsx

export function meta({ loaderData }: Route.MetaArgs) {
  if (!loaderData) {
    return [];
  }
  const { type, entity } = loaderData;

  return metaTags({
    tags: calculateMetaTags(type, entity),
  });
}

Next.js

To archive it, export a generateMetadata function to handle the meta tags.

app/[[...slug]]/page.tsx

export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { type, entity } = await getDrupalData({ params: await params });

  return metaTags({
    tags: calculateMetaTags(type, entity),
  });
}

Now, the meta tags should be set in the page, you can check it in the browser’s source code.