Issue retrieving meta tags via Rank Math API in Headless CMS

Hello,

We apologize for the issue you are facing with retrieving meta tags via the Rank Math API in your Headless CMS setup. Thank you for raising this concern.

To help you troubleshoot and implement the functionality correctly, here are some steps to follow:

1. Ensure Headless CMS Support is Enabled

Make sure that you have enabled the Headless CMS Support option in Rank Math. You can do this by navigating to Rank Math SEO → General Settings → Others in your WordPress admin area. If the Others tab is not visible, ensure that you are using Rank Math in advanced mode.

2. Make a GET Request to the API Endpoint

You should send a GET request to the Rank Math REST API endpoint using the following syntax:

https://your-domain.com/wp-json/rankmath/v1/getHead?url=https://your-domain.com/hello-world?url=https://your-domain.com/hello-world

Replace your-domain.com with your actual domain and your-page-url with the specific URL you want to retrieve meta tags for.

3. Whitelist the API Endpoint in Your Firewall

If you are unable to access the Rank Math REST endpoint, it may be blocked by a security plugin or firewall. Ensure that you whitelist the following endpoint:

https://your-domain.com/wp-json/rankmath/v1/getHead?url=https://your-domain.com/hello-world

You can refer to our tutorials on how to whitelist Rank Math’s REST API endpoints if you are using plugins like Wordfence or Cloudflare.

4. Handle Common Errors

If you encounter errors while making requests, here are some common issues:

• No Route Was Found Matching the URL and Request Method: This indicates that Headless CMS support is not enabled.
• Invalid Parameter(s) URL: Ensure that you are using a complete URL and not just a slug.
• Missing Parameter(s) URL: Make sure that your request includes the URL parameter as described above.

Example of Fetching Meta Tags in React

Here’s a simple example of how you might implement this in your React frontend:

import React, { useEffect, useState } from 'react';

const MetaTagsFetcher = ({ pageUrl }) => {
    const [metaTags, setMetaTags] = useState(null);

    useEffect(() => {
        const fetchMetaTags = async () => {
            const response = await fetch(`https://your-domain.com/wp-json/rankmath/v1/getHead?url=https://your-domain.com/hello-world?url=${pageUrl}`);
            const data = await response.json();
            if (data.success) {
                setMetaTags(data.head);
            } else {
                console.error('Error fetching meta tags:', data);
            }
        };
        fetchMetaTags();
    }, [pageUrl]);

    return ;
};

This component fetches the meta tags for a given pageUrl and sets them in the component state.

If you continue to experience issues, please reply to this ticket, and a human agent from the Rank Math Support team will assist you further. We’re here to help!

Hello,

Even if we try to access the JSON data from that URL where you mention the WordPress is installed we get a 404 error, so there’s something wrong with the API calls on this website.

When you can access the JSON data with the path we mentioned above, you will also be able to fetch the data from our plugin using the methods mentioned here: https://rankmath.com/kb/headless-cms-support/

Don’t hesitate to get in touch if you have any other questions.