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

Remix

First of all, to process the Drupal meta tags into the Remix format you can install the drupal-remix package.

npm

npm install drupal-remix

yarn

yarn add drupal-remix

pnpm

pnpm install drupal-remix

Update the content query

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

Remix

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

/app/routes/$.tsx

query getNodeArticleByPath($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
        }
      }
    }
  }
}

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.

Remix

/app/routes/$.tsx

import {
  isRouteErrorResponse,
  useRouteError,
  useLoaderData,
  //highlight-addition
  MetaFunction,
} from "@remix-run/react";
import { LoaderFunctionArgs } from "@remix-run/node";
import { gql } from "urql";
//highlight-addition
import { metaTags } from "drupal-remix";

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

Remix

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

/app/routes/$.tsx

export const meta: MetaFunction<typeof loader> = ({ data }) => {
  if (!data) {
    return [];
  }

  return metaTags({
    tags: data.data.route.entity.metatag,
  });
};

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