Yoast SEO (for WordPress)

Before building anything in FlutterFlow, confirm that your WordPress site's REST API is reachable and that Yoast's fields are present in the response. Open a web browser and navigate to `https://yoursite.com/wp-json/wp/v2/posts?per_page=1`. Replace `yoursite.com` with your actual WordPress domain. You should see a JSON response containing one post object. If you see an error like `rest_no_route` or a 404, the WordPress REST API may be disabled on your site — some security plugins (like Wordfence or iThemes Security) disable or restrict REST API access to prevent data exposure. Check your WordPress admin under the security plugin's settings and look for 'Disable REST API' or 'Restrict REST API' options. You may need to whitelist public post endpoints. If the API responds but you do not see a `yoast_head_json` field in the post object, the Yoast SEO plugin may not be active. Log in to your WordPress admin, go to Plugins, and confirm that Yoast SEO is installed and activated. After activating it, try the API URL again — Yoast injects its fields on every post response automatically once active, with no additional configuration needed. Look inside the response for a key named `yoast_head_json`. It should be a nested JSON object containing keys like `title`, `description`, `og_title`, `og_description`, `og_image`, `canonical`, and `schema`. These are the fields you will map to a FlutterFlow Data Type. If `yoast_head_json` is present in the browser response, you are ready to build the FlutterFlow integration.

With the API confirmed working, set up the API Group in FlutterFlow that will fetch posts and their Yoast metadata. This API Group targets the WordPress REST API base URL of your specific site — every FlutterFlow project connecting to a different WordPress site will have a different base URL here. In FlutterFlow, click API Calls in the left navigation panel. Click + Add → Create API Group. Name it 'WordPress Content' (or your site name if you have multiple WordPress sites). Set the Base URL to `https://yoursite.com/wp-json` — replacing `yoursite.com` with your actual domain. Do not include a trailing slash. Click Save. Now click + Add → Create API Call inside the WordPress Content group. Set the Name to 'Get Posts'. Set the Method to GET and the Endpoint to `/wp/v2/posts`. In the Variables tab, click + Add Variable and create: `per_page` (Integer, default value `10`) for pagination page size, `page` (Integer, default value `1`) for page number, and `search` (String, default value `''`) for keyword filtering. In the Endpoint, use these as query parameters: `/wp/v2/posts?per_page={{ per_page }}&page={{ page }}&search={{ search }}`. You can also add a `fields` variable to request only specific fields and reduce response size: `/wp/v2/posts?_fields=id,title,date,slug,yoast_head_json,excerpt,featured_media&per_page={{ per_page }}&page={{ page }}`. Using `_fields` dramatically reduces the JSON payload size, which speeds up loading on mobile networks — recommended for production. Leave the Headers tab empty for public posts — unauthenticated reads of public WordPress content require no authentication headers. This keeps the FlutterFlow API Call completely public-safe with no secrets involved.

1{
2  "method": "GET",
3  "endpoint": "/wp/v2/posts",
4  "query_params": {
5    "_fields": "id,title,date,slug,excerpt,yoast_head_json,featured_media,link",
6    "per_page": "{{ per_page }}",
7    "page": "{{ page }}",
8    "status": "publish"
9  }
10}

With the API Call returning data, use FlutterFlow's JSON Path tool to map the `yoast_head_json` fields into a custom Data Type that you can bind to widgets. This is where the Yoast data becomes usable across your app. In the Get Posts API Call, go to the Response & Test tab. Click the Test button, set `per_page` to `1` and `page` to `1`, then click Run Test. You will see the full API response in the Response Preview section. Click Generate JSON Paths — FlutterFlow will automatically parse the response structure and offer to generate JSON Path expressions for each field it finds. Look for paths related to `yoast_head_json`. The most useful ones to add are: `$[*].yoast_head_json.title` (the SEO title), `$[*].yoast_head_json.description` (the meta description), `$[*].yoast_head_json.og_image[0].url` (the Open Graph image URL), `$[*].yoast_head_json.og_description` (the OG description, often the same as description), and `$[*].yoast_head_json.canonical` (the canonical URL of the original post). Also add paths for the standard WordPress fields you need: `$[*].id` (post ID), `$[*].title.rendered` (the post's HTML title), `$[*].excerpt.rendered` (the post excerpt), `$[*].date` (publish date), `$[*].slug` (URL slug), and `$[*].link` (full URL). Click + Add Data Type and name it 'WordPressPost'. Add the following fields and map the JSON paths: `id` (Integer), `seo_title` (String — mapped from `yoast_head_json.title`), `seo_description` (String — mapped from `yoast_head_json.description`), `og_image_url` (String — mapped from `yoast_head_json.og_image[0].url`), `canonical_url` (String), `title` (String — from `title.rendered`), `excerpt` (String — from `excerpt.rendered`), `published_date` (String), `slug` (String), `post_url` (String). Save the Data Type. Your FlutterFlow widgets can now reference any of these fields directly when you bind the API Call as a Backend Query on a list or page.

With the Data Type and API Call configured, bind the WordPress posts query to a list widget on your app's content screen. This creates a live-updating feed of WordPress posts with their Yoast SEO metadata available on every card. Navigate to your posts list screen in FlutterFlow. Add a ListView widget to the screen. Click on the ListView, then in the right panel go to Backend Query → + Add Query. Select 'API Call', choose the WordPress Content group, and select Get Posts. Set `per_page` to `10` and `page` to `1`. In the Data Type mapping, select WordPressPost. The ListView is now populated with the API response. Inside the ListView, add child widgets for each card: an Image widget for the featured image (bind its Image Path to `og_image_url` from the Data Type), a Text widget for the post title (bind to `seo_title` from Yoast — this uses the SEO-optimized title rather than the raw post title, which is usually cleaner and shorter), and a second Text widget for the description (bind to `seo_description`). Add a published date Text widget (bind to `published_date`) and optionally a URL-copy button that copies `canonical_url` to the clipboard using FlutterFlow's built-in Copy to Clipboard action — useful for a content audit use case where users need to share the original article URL. For a content SEO audit dashboard, add a conditional border color to each card based on the length of `seo_description`: red border if empty (use an If condition: `seo_description == ''`), yellow if under 100 characters (`seo_description.length < 100`), green otherwise. This creates a visual audit tool without any server-side processing — all the logic runs on the parsed Yoast data in FlutterFlow.

Reading public WordPress posts requires no authentication. However, if your app needs to display private posts, access draft content, or write Yoast meta fields back to WordPress, you need authenticated API calls using WordPress Application Passwords — and those credentials must be proxied through a backend. First, create a WordPress Application Password. In your WordPress admin, navigate to Users → Profile (or the admin user's profile page). Scroll to the Application Passwords section (available in WordPress 5.6+). Click Add New Application Password, give it a name like 'FlutterFlow App', and click Add New Application Password. WordPress generates a password in the format `XXXX XXXX XXXX XXXX XXXX XXXX` — copy it immediately, it is only shown once. The Application Password is used as HTTP Basic Auth: the username is your WordPress username, and the password is the Application Password (spaces can be included or removed, both work). This is a sensitive credential — it allows full authenticated access to the WordPress REST API under that user's permissions. Never put it in a FlutterFlow API Call header. Deploy a simple Cloud Function or Supabase Edge Function proxy that accepts POST requests from FlutterFlow with the desired WP API endpoint and any data, then forwards the request to WordPress with the Basic Auth header injected server-side. Store the WordPress username and Application Password as environment secrets in Firebase or Supabase, not in the proxy source code. In FlutterFlow, create a second API Group named 'WordPress Authenticated' pointing to your proxy URL. This group handles private or write operations while the public 'WordPress Content' group handles all public reads without a proxy. If you need help configuring the authenticated proxy or building the SEO audit dashboard against your WordPress site, RapidDev's team works with headless WordPress setups regularly and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function: WordPress authenticated API proxy
2// Handles private posts and write operations needing Basic Auth
3const functions = require('firebase-functions');
4const fetch = require('node-fetch');
5const btoa = (str) => Buffer.from(str).toString('base64');
6
7exports.wpAuthProxy = functions.https.onRequest(async (req, res) => {
8  res.set('Access-Control-Allow-Origin', '*');
9  res.set('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE');
10  res.set('Access-Control-Allow-Headers', 'Content-Type');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  const WP_USERNAME = process.env.WP_USERNAME;
14  const WP_APP_PASSWORD = process.env.WP_APP_PASSWORD;
15  const WP_BASE_URL = process.env.WP_BASE_URL; // e.g. https://yoursite.com/wp-json
16
17  const { endpoint, method = 'GET', body } = req.body;
18  if (!endpoint) { res.status(400).json({ error: 'endpoint required' }); return; }
19
20  const credentials = btoa(`${WP_USERNAME}:${WP_APP_PASSWORD}`);
21
22  try {
23    const wpRes = await fetch(`${WP_BASE_URL}${endpoint}`, {
24      method,
25      headers: {
26        'Authorization': `Basic ${credentials}`,
27        'Content-Type': 'application/json',
28      },
29      body: body ? JSON.stringify(body) : undefined,
30    });
31    const data = await wpRes.json();
32    res.status(wpRes.status).json(data);
33  } catch (err) {
34    res.status(500).json({ error: err.message });
35  }
36});