Bubble.io and Yoast SEO (for WordPress) integration: Step-by-Step Guide 2024

This guide assumes that you have:

• A Bubble.io app
• A WordPress site with Yoast SEO installed
• Basic understanding of SEO and Bubble.io

Here's the very detailed step-by-step guide on how to integrate Bubble.io with Yoast SEO:

Step 1: Install the Yoast SEO Plugin on WordPress

• Go to your WordPress Admin Dashboard.
• On the left sidebar menu, click on Plugins, then click on the Add New button.
• In the search box, type in "Yoast SEO", then press Enter.
• From the search results, find Yoast SEO.
• Click on the Install Now button, and then click on Activate.

Step 2: Get your Yoast SEO Metadata

• After you've installed and activate Yoast SEO, you need to set up your metadata correctly.
• Go to the Yoast SEO settings on WordPress (in the left sidebar, hover over SEO and select Search Appearance).
• Adjust the settings to fit your website's needs, including the homepage and blog post defaults.
• Save your changes.

Step 3: Setup your Bubble.io Application Site to use the Metadata

• Login to your Bubble.io editor.
• Navigate to the Settings tab on the top of the page.
• Click on the SEO & metatags tab on the left-hand sidebar.
• Configure your settings, ensuring the "Use dynamic data" option is selected.

Step 4: Create a New API

• Go to the Data tab and then select APIs from the left-hand menu.
• Click on the Add another API button.
• Add the Yoast SEO API, and fill the required settings.

Step 5: Connect Yoast SEO API with Bubble.io

• Go back to the APIs section of your Bubble app.
• Seek out the API Connector plugin, install it, and then add another API.
• Fill the required fields:
  • For API base URL use the base URL of your Yoast SEO API (usually your WordPress site URL plus /wp-json/).
  • For Shared Headers, you need to provide your WordPress site admin username and password.
• Make sure to enable the options "This API allows GET" and "Add generic security parameters to the API calls".

Step 6: Setup the Post API

• Click on the Add another API Call button.
• Put "Get Post SEO Data" in the "Use as Action Name" field.
• Put in "/yoast/v1/posts/{id}" in the "Relative path" field.
• Add a path parameter key "id" and the value would be the Unique ID of the Bubble.io Post.
• Check "Return header values".

Step 7: Configuring the Data to Send and Retrieve

• Adjust the API call settings based on your needs.
• Set up the data tab within Bubble.io to include fields that match your metadata so that the data is able to be pulled and read correctly.

Step 8: Setting Up the Workflow

• Once you've set up the data, you need to set up workflows in Bubble.io to actually send and receive this data.
• Create a workflow that triggers the API call whenever a page is loaded.
• You could use the "An API Event a scheduler calls only" and then schedule it every time a page loads, or use other bubble specific workflows that suits your application.

Step 9: Test out Your Integration

• Check the workflow that you've set up is running correctly by previewing a page within your Bubble.io app and verifying that the SEO data from Yoast is being sent and received correctly. This should be reflected in the page metadata when you inspect it.
• Additionally, you can also use SEO checker tools to validate your SEO setup.

All set, you have now integrated Bubble.io with Yoast SEO for WordPress. Remember, SEO settings can hugely impact your website's visibility, so it is important to review and update them regularly.