ProRank SEO

Headless WordPress Support

SEO data endpoints and REST API integration for headless WordPress implementations

Overview

ProRank SEO's Headless WordPress Support provides comprehensive SEO data endpoints for decoupled WordPress architectures. It seamlessly integrates with modern frontend frameworks like Next.js, Gatsby, and Nuxt.js, ensuring your headless site maintains excellent SEO performance.

With REST API fields, GraphQL support, CORS configuration, and response caching, this feature delivers complete SEO data to your frontend application while maintaining optimal performance through intelligent caching and API key authentication.

Key Features

Core Features

  • REST API SEO fields on all content
  • Custom SEO endpoints
  • Response caching with TTL
  • CORS configuration
  • API key authentication
  • Structured data (Schema)

Pro+ Features

  • GraphQL field support
  • Breadcrumb endpoints
  • Site-wide SEO settings API
  • Author SEO data
  • Advanced caching controls
  • Multiple origin support

Quick Start Guide

  1. Access Headless Settings:Navigate to ProRank SEO → Technical SEO → Headless WP Support
  2. Enable REST API Fields:Toggle "Enable REST API SEO Fields" to add SEO data to all REST responses
  3. Configure CORS (if needed):
    • Enable CORS headers for cross-origin requests
    • Add your frontend domain to allowed origins
    • Leave empty to allow all origins (*)
  4. Generate API Key (optional):
    • Click "Generate API Key" for secure endpoints
    • Copy the key for use in your frontend
    • Include in X-ProRank-API-Key header
  5. Test the Configuration:Click "Test Endpoint" to verify everything is working

REST API Fields

When enabled, ProRank SEO automatically adds a prorank_seo field to all WordPress REST API responses for posts, pages, custom post types, taxonomies, and users.

SEO Data Structure:

{
  "prorank_seo": {
    "title": "SEO optimized title",
    "description": "Meta description for search engines",
    "keywords": "comma, separated, keywords",
    "canonical": "https://example.com/canonical-url",
    "robots": ["index", "follow"],
    "og": {
      "title": "Open Graph title",
      "description": "Open Graph description",
      "image": "https://example.com/og-image.jpg",
      "type": "article",
      "url": "https://example.com/page"
    },
    "twitter": {
      "card": "summary_large_image",
      "title": "Twitter card title",
      "description": "Twitter card description",
      "image": "https://example.com/twitter-image.jpg",
      "site": "@yourhandle"
    },
    "schema": {
      "@context": "https://schema.org",
      "@type": "Article",
      "headline": "Article headline",
      "datePublished": "2025-01-15T08:00:00Z",
      "author": {...}
    },
    "breadcrumbs": [
      {"name": "Home", "url": "https://example.com"},
      {"name": "Category", "url": "https://example.com/category"},
      {"name": "Current Page", "url": "https://example.com/current"}
    ]
  }
}

Custom Endpoints

Site-wide SEO Settings

GET /wp-json/prorank-seo/v1/headless/site

Returns global SEO settings, social profiles, organization schema, and default meta formats.

Structured Data

GET /wp-json/prorank-seo/v1/headless/structured-data/{type}/{id}

Get schema markup for specific content. Type can be: post, term, or user.

Breadcrumbs

GET /wp-json/prorank-seo/v1/headless/breadcrumbs?type={type}&id={id}

Generate breadcrumb navigation data. Type can be: post, term, user, or archive.

Test Endpoint

GET /wp-json/prorank-seo/v1/headless-settings/test

Verify configuration and authentication. Returns feature status and sample data.

Framework Integration Examples

Next.js / React

// Fetch post with SEO data
async function getPost(id) {
  const response = await fetch(`${WORDPRESS_URL}/wp-json/wp/v2/posts/${id}`);
  const post = await response.json();
  
  return {
    content: post.content.rendered,
    seo: post.prorank_seo // All SEO data included!
  };
}

// Use in your component
export default function PostPage({ post }) {
  return (
    <>
      <Head>
        <title>{post.seo.title}</title>
        <meta name="description" content={post.seo.description} />
        <meta property="og:title" content={post.seo.og.title} />
        <meta property="og:description" content={post.seo.og.description} />
        <meta property="og:image" content={post.seo.og.image} />
        <link rel="canonical" href={post.seo.canonical} />
      </Head>
      <article>{post.content}</article>
    </>
  );
}

Gatsby

// gatsby-node.js
exports.sourceNodes = async ({ actions, createNodeId, createContentDigest }) => {
  const { createNode } = actions;
  
  // Fetch posts with SEO data
  const response = await fetch(`${WORDPRESS_URL}/wp-json/wp/v2/posts`);
  const posts = await response.json();
  
  posts.forEach(post => {
    createNode({
      ...post,
      seo: post.prorank_seo, // SEO data included
      id: createNodeId(`wp-post-${post.id}`),
      internal: {
        type: 'WordPressPost',
        contentDigest: createContentDigest(post)
      }
    });
  });
};

// Use in component
export const Head = ({ data }) => (
  <>
    <title>{data.wordPressPost.seo.title}</title>
    <meta name="description" content={data.wordPressPost.seo.description} />
  </>
);

Vue.js / Nuxt

// pages/posts/_id.vue
<template>
  <article v-html="post.content"></article>
</template>

<script>
export default {
  async asyncData({ $axios, params }) {
    const post = await $axios.$get(
      `/wp-json/wp/v2/posts/${params.id}`
    );
    
    return {
      post: {
        content: post.content.rendered,
        seo: post.prorank_seo
      }
    };
  },
  
  head() {
    return {
      title: this.post.seo.title,
      meta: [
        { hid: 'description', name: 'description', content: this.post.seo.description },
        { property: 'og:title', content: this.post.seo.og.title },
        { property: 'og:image', content: this.post.seo.og.image }
      ],
      link: [
        { rel: 'canonical', href: this.post.seo.canonical }
      ]
    };
  }
};
</script>

API Authentication

Using API Keys

When an API key is configured, include it in the request header for protected endpoints:

// JavaScript/Fetch
const response = await fetch('https://yoursite.com/wp-json/prorank-seo/v1/headless/site', {
  headers: {
    'X-ProRank-API-Key': 'pk_your_api_key_here'
  }
});

// Axios
const axios = require('axios');
axios.defaults.headers.common['X-ProRank-API-Key'] = 'pk_your_api_key_here';

// cURL
curl -H "X-ProRank-API-Key: pk_your_api_key_here" \
     https://yoursite.com/wp-json/prorank-seo/v1/headless/site

Keep your API key secure. Store it in environment variables and never commit it to version control.

CORS Configuration

Configure Cross-Origin Resource Sharing (CORS) to allow your frontend domain to access the WordPress API:

Allow Specific Origins

Add your frontend URLs to the allowed origins list:

  • • https://yourfrontend.com
  • • https://staging.yourfrontend.com
  • • http://localhost:3000 (for development)

Allow All Origins

Leave the origins list empty to allow requests from any domain (uses wildcard *). Only recommended for public APIs.

Caching

Response Caching

ProRank SEO caches API responses to improve performance:

Cache Settings

  • • Configure TTL (0-86400 seconds)
  • • Default: 3600 seconds (1 hour)
  • • Set to 0 to disable caching
  • • Cached per post/term ID

Cache Keys

  • • Posts: prorank_seo_headless_post_{id}
  • • Terms: prorank_seo_headless_term_{id}
  • • Auto-cleared on content updates
  • • Stored as WordPress transients

GraphQL Support

WPGraphQL Integration

When WPGraphQL is installed and GraphQL support is enabled, ProRank SEO adds SEO fields to GraphQL queries:

query GetPostWithSEO {
  post(id: "1", idType: DATABASE_ID) {
    title
    content
    proRankSeo {
      title
      description
      keywords
      canonical
      robots
      ogTitle
      ogDescription
      ogImage
      twitterTitle
      twitterDescription
      twitterImage
    }
  }
}

GraphQL support requires the WPGraphQL plugin to be installed and activated.

Best Practices

Do's

  • ✓ Use caching to reduce server load
  • ✓ Implement proper error handling
  • ✓ Store API keys securely
  • ✓ Use specific CORS origins in production
  • ✓ Cache API responses on frontend
  • ✓ Use GraphQL for complex queries
  • ✓ Test endpoints before deployment

Don'ts

  • ✗ Don't expose API keys in frontend code
  • ✗ Don't disable caching without reason
  • ✗ Don't use wildcard CORS in production
  • ✗ Don't make unnecessary API calls
  • ✗ Don't ignore rate limiting
  • ✗ Don't skip authentication setup
  • ✗ Don't forget to handle errors

Troubleshooting

No SEO data in REST responses

  • • Check if REST API SEO Fields is enabled in settings
  • • Verify ProRank SEO Pro license is active
  • • Clear any caching plugins
  • • Check if the content has SEO data configured

CORS errors in browser console

  • • Enable CORS in Headless WP settings
  • • Add your frontend domain to allowed origins
  • • Check for typos in the origin URL
  • • Ensure protocol matches (http vs https)

API authentication failures

  • • Verify API key is correctly copied
  • • Check header name: X-ProRank-API-Key
  • • Ensure API key is saved in settings
  • • Test with the test endpoint first

Slow API responses

  • • Enable response caching
  • • Increase cache TTL value
  • • Use pagination for large datasets
  • • Consider using GraphQL for specific fields
  • • Check server performance

Performance Tips

Optimization Strategies

Frontend Caching

Implement caching in your frontend application to reduce API calls:

// Next.js with SWR
import useSWR from 'swr';

const fetcher = url => fetch(url).then(r => r.json());

function usePost(id) {
  const { data, error } = useSWR(
    `/wp-json/wp/v2/posts/${id}`,
    fetcher,
    { revalidateOnFocus: false }
  );
  return { post: data, error };
}

Static Generation

Pre-render pages at build time when possible to eliminate runtime API calls.

Field Selection

Use REST API field parameters to request only needed data:

?_fields=id,title,prorank_seo

License Requirements

Feature Availability

Pro+ License Required

Headless WordPress Support is available with Pro, Business, and Agency licenses:

  • • Full REST API integration
  • • All custom endpoints
  • • GraphQL support
  • • CORS configuration
  • • API authentication
  • • Response caching
  • • Priority support

Additional Resources

Testing Tool: Use tools like Postman or Insomnia to test your API endpoints and verify the SEO data structure before implementing in your frontend.

WordPress REST API

Official documentation for WordPress REST API

WPGraphQL

GraphQL for WordPress documentation

Explore More

Technical SEO Overview

Explore all technical SEO features

Internationalisation

Hreflang tags for multilingual sites

Performance & Caching

Optimize your site performance