How to Integrate Retool with Yoast SEO (WordPress)

WordPress Application Passwords are the modern, secure authentication method for REST API access and do not require sharing your main WordPress login credentials. To create one, log in to your WordPress admin dashboard and navigate to Users → Profile (or Users → All Users → select your user account). Scroll down to the 'Application Passwords' section — if you do not see this section, ensure your WordPress site uses HTTPS (Application Passwords require SSL). In the 'New Application Password Name' field, enter a descriptive label like 'Retool SEO Dashboard'. Click the 'Add New Application Password' button. WordPress generates a 24-character password displayed once — copy it immediately and save it securely. The password is shown in grouped format like 'Ab12 Cd34 Ef56 Gh78 Ij90 Kl12'. When using it in Retool, you can include spaces or omit them — WordPress accepts both formats. The Application Password is separate from your WordPress account password: if the Retool integration is ever compromised, you revoke only the Application Password without affecting your account. In Retool's Settings → Configuration Variables, add two variables: WORDPRESS_USERNAME (your WordPress admin username, not email) and WORDPRESS_APP_PASSWORD (the generated Application Password). Mark WORDPRESS_APP_PASSWORD as secret. Your username is the short name shown in the WordPress admin sidebar, not your display name or email address.

In Retool, click the Resources tab and Add Resource. Select REST API from the list. Name it 'WordPress API' or include your site name for clarity (e.g., 'YourSite WordPress API') if you manage multiple WordPress sites in Retool. In the Base URL field, enter your WordPress site's REST API base URL in the format: https://yoursite.com/wp-json/wp/v2. Replace 'yoursite.com' with your actual domain. Do not include a trailing slash. The /wp-json/wp/v2 path is the standard REST API namespace for WordPress core and Yoast SEO data — all post, page, category, and tag endpoints are under this prefix. Scroll to the Authentication section and select Basic Auth from the dropdown. In the Username field, enter {{ retoolContext.configVars.WORDPRESS_USERNAME }}. In the Password field, enter {{ retoolContext.configVars.WORDPRESS_APP_PASSWORD }}. WordPress Application Passwords work with Basic Auth — WordPress automatically recognizes them as separate from account passwords. In the Headers section, add a default header: Content-Type = application/json. Click Save Changes. Test the resource by creating a quick GET query to /posts?per_page=1 — if the response includes post data and a 'yoast_head_json' key in the first result, the Yoast SEO fields are successfully being returned. If 'yoast_head_json' is absent, verify that Yoast SEO is active on the WordPress site.

With the resource created, open or create a Retool app. In the Code panel, create a new query, select your WordPress API resource, set Method to GET, and Path to /posts. Yoast SEO fields are included by default in the standard post response — no additional fields parameter is needed. Add URL parameters to control the query behavior: key 'per_page', value {{ perPageSelect.value || 100 }} (WordPress maximum is 100 per request); key 'status', value 'publish' (or 'any' to include drafts); key 'orderby', value 'modified'; key 'order', value 'desc'. This retrieves the 100 most recently modified published posts. For sites with more than 100 posts, add pagination: include a key 'page', value {{ pagination.page || 1 }}. Name this query 'getPosts' and enable 'Run query when app loads'. Write a JavaScript transformer to extract the Yoast fields from each post and calculate a SEO completeness score. The yoast_head_json object contains keys like: title (meta title), description (meta description), schema (structured data), og_image (Open Graph image array), and for Yoast Premium: article_modified_time and author. Extract these fields and flatten them into a single object per post for clean Table display. Also extract WordPress native fields: post ID, slug, post date, and the post title from post.title.rendered.

1// Transformer: extract Yoast SEO fields from WordPress posts
2const posts = data || [];
3return posts.map(post => {
4  const yoast = post.yoast_head_json || {};
5  const metaTitle = yoast.title || '';
6  const metaDesc = yoast.description || '';
7  const keyphrase = post.meta?._yoast_wpseo_focuskw || yoast.og_title || '';
8  const hasOgImage = !!(yoast.og_image && yoast.og_image.length > 0);
9
10  // Calculate SEO completeness score (0-100)
11  let score = 0;
12  if (metaTitle) score += 30;
13  if (metaTitle.length >= 30 && metaTitle.length <= 60) score += 10;
14  if (metaDesc) score += 30;
15  if (metaDesc.length >= 120 && metaDesc.length <= 155) score += 10;
16  if (keyphrase) score += 20;
17
18  return {
19    id: post.id,
20    title: post.title?.rendered || '(no title)',
21    slug: post.slug,
22    meta_title: metaTitle,
23    meta_title_length: metaTitle.length,
24    meta_description: metaDesc,
25    meta_desc_length: metaDesc.length,
26    focus_keyphrase: keyphrase,
27    has_og_image: hasOgImage ? 'Yes' : 'No',
28    seo_score: score,
29    last_modified: new Date(post.modified).toLocaleDateString()
30  };
31});

With post data returning Yoast fields, build the audit dashboard. From the component panel, drag a Table component onto the canvas and bind its Data property to {{ getPosts.data }}. Configure the visible columns: title (set to render as a link to https://yoursite.com/?p={{ row.id }}), meta_title_length, meta_description (truncate with ellipsis), meta_desc_length, focus_keyphrase, seo_score, and last_modified. Apply conditional column formatting to the seo_score column: green background for scores >= 80, yellow for 50-79, red for < 50. Apply character length warning formatting to meta_title_length: red text for values > 60 or < 30. Do the same for meta_desc_length: red for values > 155 or < 120. Add a row of summary stats above the table: total post count, average SEO score, count of posts with empty meta descriptions, and count of posts missing focus keyphrases — calculate these with JavaScript transformers referencing getPosts.data. Add a search Text Input component bound to the Table's search property for filtering by post title or slug. Below the table, add a Container that shows when a row is selected: display the selected post's full meta title and meta description in Text components, with character count indicators. Add a Select component for the per_page value (options: 10, 25, 50, 100) and trigger query refresh when it changes via event handler.

1// JavaScript query: calculate SEO audit summary stats
2const posts = getPosts.data || [];
3const avgScore = posts.length > 0
4  ? (posts.reduce((sum, p) => sum + p.seo_score, 0) / posts.length).toFixed(0)
5  : 0;
6const missingMetaDesc = posts.filter(p => !p.meta_description).length;
7const missingKeyphrase = posts.filter(p => !p.focus_keyphrase).length;
8const titleTooLong = posts.filter(p => p.meta_title_length > 60).length;
9
10return {
11  total_posts: posts.length,
12  avg_seo_score: avgScore + '/100',
13  missing_meta_desc: missingMetaDesc,
14  missing_keyphrase: missingKeyphrase,
15  title_too_long: titleTooLong
16};

The final step makes the dashboard actionable: allow SEO managers to update Yoast meta fields directly from Retool without opening WordPress. When a Table row is selected, show an edit form. Add a Text Input component named 'metaTitleInput' with label 'Meta Title' and default value {{ postsTable.selectedRow.meta_title }}. Add a Multiline Text Input named 'metaDescInput' with label 'Meta Description' and default value {{ postsTable.selectedRow.meta_description }}. Add character count Text components below each input: 'Characters: {{ metaTitleInput.value.length }}/60' and 'Characters: {{ metaDescInput.value.length }}/155'. Add an Update button. Create a PUT query named 'updatePost': select the WordPress API resource, set Method to PUT, and Path to /posts/{{ postsTable.selectedRow.id }}. Set Body Type to JSON and Body to: { "meta": { "_yoast_wpseo_title": "{{ metaTitleInput.value }}", "_yoast_wpseo_metadesc": "{{ metaDescInput.value }}" } }. Add a Confirm Modal to the Update button before triggering the query. In the updatePost query's On Success event handler, add 'Trigger query → getPosts' to refresh the list, and 'Show notification' with message 'SEO meta updated for ' + postsTable.selectedRow.title. Note: Yoast SEO meta fields must be registered for REST API exposure — if the PUT request succeeds but changes don't appear in WordPress, add a code snippet to your WordPress theme's functions.php or a custom plugin that calls register_rest_field() to expose and allow writing to the Yoast meta keys. For complex multi-site SEO management workflows, RapidDev can help configure the full WordPress REST API exposure and Retool dashboard architecture.

1// WordPress functions.php snippet to expose Yoast meta fields in REST API
2// Add to your theme's functions.php or a custom plugin
3add_action('rest_api_init', function() {
4  $yoast_fields = [
5    '_yoast_wpseo_title',
6    '_yoast_wpseo_metadesc',
7    '_yoast_wpseo_focuskw'
8  ];
9  foreach ($yoast_fields as $field) {
10    register_rest_field('post', $field, [
11      'get_callback' => function($post) use ($field) {
12        return get_post_meta($post['id'], $field, true);
13      },
14      'update_callback' => function($value, $post) use ($field) {
15        update_post_meta($post->ID, $field, sanitize_text_field($value));
16      },
17      'schema' => ['type' => 'string']
18    ]);
19  }
20});