WordPress SEO Headers Configuration

WP Installation and Setup:

Here we have used Rank Math to get SEO headers from WordPress to use on site dynamically.:

• First install Rankmath – Headless eCommerce (opens in a new tab) plugin from wordpress dashboard:

• Then Enable Headless CMS Support (opens in a new tab):

Use in the frontend site:

At the frontend pages use the seo data by creating the same page at wordpress site and after using our common function all the seo headers will be added dynamically:

• First create a page from wordpress dashboard that you want to display at the frontend site and add required SEO data from wordpress dashboard.

• Then from the page level of frontend site, use the function to get the SEO headers data and display dynamically.

For example, for the shop page SEO headers data:

export async function generateMetadata({ params }): {
  const url = process.env.API_URL as string;
  // *** fetch the rank-math seo data ***
  const seoData = await getSeoHead(`${url}/shop`);
 
  // *** parse and filter seo data ***
  const parseSeoData = parse(seoData?.head || "");
  const filterEmptySeoData = parseSeoData?.filter((n: any) => n && n?.type);
 
  // *** arrange the seo array into required object ***
  const seoObject = arrangeSeoData(filterEmptySeoData);
 
  return {
    ...seoObject,
  };
}