Skip to main content

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​

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

npm install drupal-remix

Update the content query​

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

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
          }
          metatag {
            __typename
            ... on MetaTagLink {
              attributes {
                rel
                href
              }
            }
            ... on MetaTagValue {
              attributes {
                name
                content
              }
            }
            ... on MetaTagProperty {
              attributes {
                property
                content
              }
            }
          }
        }
      }
    }
  }
}

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.

/app/routes/$.tsx
import {
  isRouteErrorResponse,
  useRouteError,
  useLoaderData,
  MetaFunction,
} from "@remix-run/react";
import { LoaderFunctionArgs } from "@remix-run/node";
import { gql } from "urql";
import { metaTags } from "drupal-remix";

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

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.