Yoast SEO (for WordPress)

Before opening Bubble, verify the integration source in your browser. Open a new browser tab 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 array containing one post object. Scroll through the object and look for the `yoast_head_json` key — it will be a nested object containing at minimum `title`, `description`, and possibly `og_image`, `canonical`, and `schema` sub-fields. If you see `yoast_head_json` in the response, the integration will work. If it's not present, Yoast SEO may not be active on the site, or the plugin version may be outdated (update Yoast SEO to the latest version from the WordPress plugins screen). If the URL returns a 401 or 403 error instead of JSON, a security plugin (Wordfence, iThemes Security, or similar) is blocking unauthenticated REST API access. The fix is to whitelist the REST API in that plugin's settings, or use WordPress Application Passwords for authenticated reads (covered in step 5). Also check: `yoast_head_json.title` includes the site name suffix by design (e.g., 'How to Bake Bread | Your Site Name'). For clean post titles without the site name, use `yoast_head_json.og_title` instead — this omits the suffix and gives you the pure post title as Yoast sees it.

1// Browser verification URLs
2
3// Basic check — returns latest post with all fields:
4https://yoursite.com/wp-json/wp/v2/posts?per_page=1
5
6// Yoast field verification — returns minimal payload with SEO fields:
7https://yoursite.com/wp-json/wp/v2/posts?per_page=1&_fields=id,title,slug,yoast_head_json
8
9// Expected yoast_head_json structure in response:
10{
11  "yoast_head_json": {
12    "title": "Post Title | Site Name",
13    "description": "The meta description Yoast has set for this post.",
14    "og_title": "Post Title",
15    "og_description": "The Open Graph description.",
16    "og_image": [
17      { "url": "https://yoursite.com/wp-content/uploads/image.jpg", "width": 1200, "height": 630 }
18    ],
19    "canonical": "https://yoursite.com/post-slug/",
20    "schema": { ... }
21  }
22}

In Bubble, click the Plugins tab → 'API Connector' (install it if not already present via 'Add plugins' → search 'API Connector'). Click 'Add another API'. Name it 'WordPress Site' (or your client site name). Set the base URL to `https://yoursite.com/wp-json/wp/v2` — replace `yoursite.com` with your actual domain. For public WordPress sites with Yoast, no authentication is needed — leave the Authentication field set to 'None' and add no shared headers. This is one of the rare integrations where the API Connector requires no Private key at all for basic read-only use. Click 'Add a call'. Name it 'Get Posts with SEO'. Set method to GET, path to `/posts`. Add these URL parameters: - `per_page` — value: `100` (max is 100 per WordPress REST API) - `status` — value: `publish` (return only published posts) - `_fields` — value: `id,title,slug,excerpt,date,yoast_head_json` — the `_fields` parameter limits the response to only the listed fields, reducing payload size by roughly 80%. This is important for Bubble's API response size limits and for WU efficiency. Optionally add: - `page` — leave as a dynamic parameter for pagination - `categories` — dynamic parameter if you want to filter by category ID Click 'Initialize call'. Bubble will fetch one real response from your WordPress site and detect the field structure. Confirm that `yoast_head_json` appears in the detected fields — expand it to see `title`, `description`, `og_title`, `og_image`, and `canonical` as sub-fields.

1// API Connector: WordPress Site
2{
3  "api_name": "WordPress Site",
4  "base_url": "https://yoursite.com/wp-json/wp/v2",
5  "authentication": "none",
6  "calls": [
7    {
8      "name": "Get Posts with SEO",
9      "method": "GET",
10      "path": "/posts",
11      "params": [
12        { "name": "per_page", "value": "100" },
13        { "name": "status", "value": "publish" },
14        {
15          "name": "_fields",
16          "value": "id,title,slug,excerpt,date,yoast_head_json"
17        },
18        { "name": "page", "value": "<dynamic: default 1>" }
19      ]
20    }
21  ]
22}

Create a Bubble data type to cache WordPress posts with their Yoast SEO metadata. Go to Data tab → Data types → 'Create a new type' → name it 'WPPost'. Add these fields: - `wp_id` (number) — WordPress post ID - `title` (text) — the rendered post title (from response's title.rendered) - `slug` (text) — URL slug - `excerpt_html` (text) — rendered excerpt - `published_at` (date) - `seo_title` (text) — from yoast_head_json.og_title (clean title without site suffix) - `seo_description` (text) — from yoast_head_json.description - `seo_og_image_url` (text) — from yoast_head_json.og_image[0].url - `seo_canonical` (text) — from yoast_head_json.canonical - `synced_at` (date) — when this record was last fetched from WordPress Create a page or workflow that calls the API Connector 'Get Posts with SEO' and stores results in the WPPost data type. For each item returned: - title = API result's title's rendered - seo_title = API result's yoast_head_json's og_title - seo_description = API result's yoast_head_json's description - seo_og_image_url = API result's yoast_head_json's og_image's first item's url - seo_canonical = API result's yoast_head_json's canonical - synced_at = Current date/time Bubble's dot-notation field access handles nested objects like `yoast_head_json.description` natively in the API Connector result expressions. The `og_image` field is an array — use `:first item` to access the first image's URL. Important note about `yoast_head_json.title` vs. `yoast_head_json.og_title`: the `title` field includes ' | Site Name' appended. The `og_title` field is the clean post title without the suffix. Use `og_title` for display in your Bubble UI; reserve `title` only if you need the full SEO title tag string.

1// Bubble data type: WPPost
2// wp_id            (number)
3// title            (text)  -- raw post title
4// slug             (text)
5// excerpt_html     (text)
6// published_at     (date)
7// seo_title        (text)  -- from yoast_head_json.og_title
8// seo_description  (text)  -- from yoast_head_json.description
9// seo_og_image_url (text)  -- from yoast_head_json.og_image[0].url
10// seo_canonical    (text)  -- from yoast_head_json.canonical
11// synced_at        (date)
12
13// Field mapping in Bubble workflow action 'Create a new WPPost':
14// title            = API result's title's rendered
15// seo_title        = API result's yoast_head_json's og_title
16// seo_description  = API result's yoast_head_json's description
17// seo_og_image_url = API result's yoast_head_json's og_image's :first item's url
18// seo_canonical    = API result's yoast_head_json's canonical
19// published_at     = API result's date (auto-parsed by Bubble)
20// synced_at        = Current date/time

You can use the WPPost data type for two different Bubble pages — a headless blog display or an SEO audit dashboard. For a headless blog page: Add a Repeating Group to a new page. Set its type to WPPost. Set the data source to 'Do a search for WPPosts' with Sort by = published_at descending. In each cell, add: - An image element: URL = Current cell's WPPost's seo_og_image_url - A text element for the post title: Current cell's WPPost's seo_title - A text element for the excerpt: Current cell's WPPost's excerpt_html (use Bubble's 'Formatted as HTML' display option) - A link element: URL = https://yoursite.com/ + Current cell's WPPost's slug For an SEO audit dashboard: Add a Repeating Group bound to WPPost. Add a calculated text column showing description character count: Current cell's WPPost's seo_description:count of characters. Add conditional row coloring: if seo_description's character count < 120 or seo_description is empty, set row background to light red. Add another condition: if seo_og_image_url is empty, add a 'No OG Image' text badge in an overlay group. Add a 'Sync Posts' button on the admin dashboard with a workflow that calls the API Connector, loops through results, and creates or updates WPPost records. Store the last sync timestamp in an AppConfig record. RapidDev's team builds headless WordPress + Bubble content apps and SEO audit tools regularly — if you need help mapping complex Yoast field structures or building multi-site dashboards, book a free scoping call at rapidevelopers.com/contact.

1// SEO Audit Dashboard — Repeating Group conditional formatting
2
3// Data source: Search for WPPosts, sort by published_at desc
4
5// Column: SEO Description Length
6// Text value: Current cell's WPPost's seo_description:count of characters
7// + " chars"
8
9// Row background condition (flag short/missing descriptions):
10// Condition A: Current cell's WPPost's seo_description is empty
11//   → Background: #FFECEC (light red)
12// Condition B: Current cell's WPPost's seo_description:count of characters < 120
13//   → Background: #FFF3CD (light yellow)
14// Condition C: Current cell's WPPost's seo_og_image_url is empty
15//   → Show 'No OG Image' badge group
16
17// Sync workflow ('Sync Posts' button):
18// Step 1: Call WordPress Site - Get Posts with SEO (page=1)
19// Step 2: For each result:
20//   - Search for WPPosts where wp_id = result's id
21//   - If count = 0: Create new WPPost with mapped fields
22//   - If count > 0: Make changes to existing WPPost

If you need to update Yoast SEO metadata from Bubble (for example, bulk-updating meta descriptions based on AI suggestions), you need WordPress Application Passwords for authenticated write access. This is an advanced optional step. In your WordPress admin: go to Users → Profile (for the admin user you want to authenticate as). Scroll down to the 'Application Passwords' section. Enter a label like 'Bubble Integration' → click 'Add New Application Password'. WordPress generates a password like `AbCd EfGh IjKl MnOp QrSt UvWx` — copy it immediately (it's only shown once). Remove the spaces when using it. In Bubble's API Connector, in your 'WordPress Site' API configuration, change the Authentication type from 'None' to 'Username & Password'. Enter your WordPress username (not email) in the Username field and the Application Password (without spaces) in the Password field. Enable 'Private' on both fields. Now for write operations: add a new API Connector call named 'Update Post SEO'. Set method to POST (WordPress REST API uses POST for updates, not PUT), path to `/posts/{{post_id}}`. In the Body, add: `meta` object with the Yoast keys you want to update. HOWEVER: Yoast meta fields (`_yoast_wpseo_title`, `_yoast_wpseo_metadesc`) are NOT exposed via the WordPress REST API for writing by default. They're registered as protected meta by Yoast. To enable REST API write access for these keys, a WordPress developer needs to add a small snippet to the theme's functions.php file that calls `register_rest_field()` for these meta keys. Without this PHP code on the WordPress side, the REST API accepts the request with a 200 OK but silently ignores the Yoast meta values — a common 'works but doesn't work' frustration.

1// WordPress functions.php snippet to expose Yoast meta for REST API writes
2// (Requires WordPress developer access to add this code)
3add_action('rest_api_init', function() {
4  register_rest_field('post', '_yoast_wpseo_title', [
5    'get_callback' => function($post) {
6      return get_post_meta($post['id'], '_yoast_wpseo_title', true);
7    },
8    'update_callback' => function($value, $post) {
9      update_post_meta($post->ID, '_yoast_wpseo_title', sanitize_text_field($value));
10    },
11    'schema' => ['type' => 'string']
12  ]);
13  register_rest_field('post', '_yoast_wpseo_metadesc', [
14    'get_callback' => function($post) {
15      return get_post_meta($post['id'], '_yoast_wpseo_metadesc', true);
16    },
17    'update_callback' => function($value, $post) {
18      update_post_meta($post->ID, '_yoast_wpseo_metadesc', sanitize_text_field($value));
19    },
20    'schema' => ['type' => 'string']
21  ]);
22});
23
24// Bubble API Connector — Update Post SEO (POST /posts/{post_id})
25// Body:
26{
27  "_yoast_wpseo_title": "<dynamic: new SEO title>",
28  "_yoast_wpseo_metadesc": "<dynamic: new meta description>"
29}