Overview:

If you’re using Nuxt.js with Craft CMS headless, it’s important to prioritize SEO. Instead of creating a custom solution, a great alternative is to use the nuxt-seomatic-meta module, which allows you to request SEO data from SEOmatic via GraphQL. This module retrieves the SEOmatic data and formats it to meet Nuxt.js’s requirements for the head property.

Features:

• Seamless Integration: Connects Nuxt.js with SEOmatic to retrieve SEO data.
• Efficiency: Saves time by eliminating the need to create a custom SEO solution.
• Flexibility: Allows customization of route data remapping to retrieve SEOmatic data from different pages.

Installation:

To use the nuxt-seomatic-meta module, follow these steps:

1. Install Craft (>=3.3), SEOmatic (>=3.2.28), and enable Craft’s GraphQL API.
2. Install the nuxt-seomatic-meta package via yarn or npm.
3. In your nuxt.config.js file, add the following plugins to the modules section:
   • ‘@nuxtjs/axios’: This plugin is automatically installed as a dependency of nuxt-seomatic-meta and is used to connect to the Craft CMS API.
   • ‘@nuxtjs/dotenv’: Optional plugin to specify GraphQL connection variables in a .env file.
4. Specify the GraphQL connection settings using one of the following options:
   • Option a: Add the connection settings to an .env file in the project root (if using the @nuxtjs/dotenv module).
   • Option b: Add the connection settings to a new seomaticMeta object in nuxt.config.js.
5. Finally, add code to make the API request and provide the result to Nuxt’s head property. This code should be added to the pages in the pages/*.vue directory.

Summary:

The nuxt-seomatic-meta module provides a convenient way to integrate SEOmatic data with Nuxt.js when using Craft CMS headless. By requesting SEO data via GraphQL, you can ensure that your Nuxt.js site maintains good SEO practices without the need for a custom solution. With easy installation and the ability to customize route data remapping, this module is a valuable tool for developers seeking efficient and flexible SEO integration.