/*@jsxRuntime automatic @jsxImportSource react*/ const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = Object.assign({ p: "p", ul: "ul", li: "li", h2: "h2", a: "a", code: "code", strong: "strong", img: "img", h3: "h3", ol: "ol", hr: "hr" }, _provideComponents(), props.components); return _jsxs(_Fragment, { children: [_jsx(_components.p, { children: "Programmatic SEO is a way to create a ton of landing pages at scale so you can rank for niche queries in Google search." }), "\n", _jsx(_components.p, { children: "Bubble is a great platform for no-code projects and it can certainly do Programmatic SEO but there are a few limitations:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "✅ Create a ton of pages with different URLs dynamically" }), "\n", _jsx(_components.li, { children: "✅ Easy updates on collected data" }), "\n", _jsx(_components.li, { children: "✅ Custom design" }), "\n", _jsx(_components.li, { children: "❌ Slow page load speed" }), "\n"] }), "\n", _jsx(_components.p, { children: "In this guide, we will use Bubble and Programmatic SEO to create a directory website that targets the query - Top tools for X. This will include:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "An SEO-optimized page for every tool" }), "\n", _jsx(_components.li, { children: "An index page that shows all tools" }), "\n"] }), "\n", _jsx(_components.h2, { children: "Prerequisites" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["Create a ", _jsx(_components.a, { href: "https://bubble.io", children: "Bubble" }), " account"] }), "\n"] }), "\n", _jsx(_components.h2, { children: "Step 1 - Create a new project and set up DB" }), "\n", _jsx(_components.p, { children: "Create a new project in Bubble." }), "\n", _jsx(_components.p, { children: "Before we do anything, we need data." }), "\n", _jsxs(_components.p, { children: ["I created a new **Data Type **called ", _jsx(_components.code, { children: "Tools" }), " in the **Data tab **of the project. This will hold information about all the tools we have on the site."] }), "\n", _jsx(_components.p, { children: "Each tool will have 3 fields:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Name:" }), " Name of the product"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Description:" }), " Short blurb on what the product does"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "URL:" }), " Link to the product's website"] }), "\n"] }), "\n", _jsx(_components.p, { children: _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/07/Screen-Shot-2022-07-26-at-4.06.59-PM.png", alt: "" }) }), "\n", _jsx(_components.h2, { children: "Step 2 - Add sample data" }), "\n", _jsxs(_components.p, { children: ["I collected sample data for some tools and entered it under ", _jsx(_components.strong, { children: "Data > App Data" }), ".\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-07-at-1.21.44-PM.png", alt: "" }), "\nBubble has a notion of **Development **DB and ", _jsx(_components.strong, { children: "Live" }), " DB. Currently, you have this data in Dev. Copy this over to Live by clicking the ", _jsx(_components.strong, { children: "Switch to live database" }), " button."] }), "\n", _jsx(_components.h2, { children: "Step 2 - Build the individual tool page" }), "\n", _jsx(_components.p, { children: "Now that we have the data, we can create a page per tool that shows its details and let the user visit their website." }), "\n", _jsxs(_components.p, { children: ["Create a new page by clicking the **Add a new page... **on the top left section of the dashboard where you see ", _jsx(_components.code, { children: "Page: Index" }), ". Call the new page ", _jsx(_components.code, { children: "tool" }), "."] }), "\n", _jsxs(_components.p, { children: ["Set the **Type of Contents **as ", _jsx(_components.code, { children: "tools" }), " and ", _jsx(_components.strong, { children: "Backup field for URL" }), " as ", _jsx(_components.code, { children: "name" }), ". Bubble now knows that this page will load a ", _jsx(_components.code, { children: "tools" }), " data object. This lets us add any text field to the page and dynamically display the current tool's information - name, description, URL etc."] }), "\n", _jsxs(_components.p, { children: ["Now, we can drag in a **Text **component and show the name of the product by making the text value dynamic - ", _jsx(_components.code, { children: "" }), " .\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/07/Screen-Shot-2022-07-26-at-4.46.08-PM.png", alt: "" }), "\nDrag in another **Text **and change it to display the description."] }), "\n", _jsxs(_components.p, { children: ["We can also add a link to the product by creating a workflow. Think of workflow as an action that happens when an event is triggered. We want to be able to visit the tools' URL when someone clicks on ", _jsx(_components.code, { children: "Visit URL" }), "."] }), "\n", _jsxs(_components.p, { children: ["To do this, create a new **Link **componentand set the display value as ", _jsx(_components.code, { children: "Visit URL" }), ". Change ", _jsx(_components.strong, { children: "Link Destination" }), " to be ", _jsx(_components.code, { children: "External URL" }), " with ", _jsx(_components.code, { children: "Current Page tools's url" }), " as the value.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-08-at-6.43.27-PM.png", alt: "" }), "\nAmazing - your individual tool page is all set up!"] }), "\n", _jsxs(_components.p, { children: ["If you preview your app now and navigate to: ", _jsx(_components.code, { children: "/version-test/tool/" }), ". The **slug **will be a slug you added to any tool in the DB. For example, I added a tool called ", _jsx(_components.code, { children: "Mailchimp" }), " with slug ", _jsx(_components.code, { children: "mailchimp" }), " and you can see the relevant data displayed.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/07/Screen-Shot-2022-07-26-at-4.51.38-PM.png", alt: "" })] }), "\n", _jsx(_components.h2, { children: "Step 3 - Set up on-page SEO" }), "\n", _jsx(_components.p, { children: "Now that there's content on the page, we need to optimize the on-page SEO. This is making sure that the page has a good title, description, and image to show on Google search results and social media." }), "\n", _jsxs(_components.p, { children: ["Open up the properties for the ", _jsx(_components.code, { children: "tool" }), " page (Double click on empty space). Scroll down until you start seeing SEO settings.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-07-at-11.55.48-AM-1.png", alt: "" })] }), "\n", _jsx(_components.h3, { children: "Title" }), "\n", _jsxs(_components.p, { children: ["For the page title, we can use ", _jsx(_components.code, { children: " | Discover Tools" }), " . When this is rendered out on a page, it will look like this - ", _jsx(_components.code, { children: "Mailchimp | Discover Tools" }), " ."] }), "\n", _jsx(_components.h3, { children: "Description" }), "\n", _jsxs(_components.p, { children: ["Similar to the page title, we can create a page description with dynamic data as ", _jsx(_components.code, { children: "" }), " ."] }), "\n", _jsx(_components.h3, { children: "Image" }), "\n", _jsxs(_components.p, { children: ["Image is a tricky one since we don't have it in our DB. A solution would be to update the DB with a ", _jsx(_components.code, { children: "image" }), " column and add a link to each tool's image under Image SEO settings."] }), "\n", _jsxs(_components.p, { children: ["A slightly more dynamic way is to automatically take screenshots of the tool's website and show that as the image for the page. Luckily, ", _jsx(_components.a, { href: "https://apiflash.com", children: "APIFlash" }), " can help. Kudos to ", _jsx(_components.a, { href: "https://twitter.com/foliofed", children: "Fed on Twitter" }), " for suggesting this."] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Sign up for an ", _jsx(_components.a, { href: "https://apiflash.com/dashboard/get_started", children: "APIFlash account" }), ". The free plan includes 100 screenshots/month which should be plenty."] }), "\n", _jsxs(_components.li, { children: ["Try it out by pasting this in the browser: ", _jsx(_components.code, { children: "https://api.apiflash.com/v1/urltoimage?access_key=&wait_until=page_loaded&url=http://google.com" }), " . Remember to replace ", _jsx(_components.code, { children: "" }), " it with your own API Key."] }), "\n", _jsx(_components.li, { children: "If the request was successful, you should see a screenshot image of Google's search page!" }), "\n"] }), "\n", _jsx(_components.p, { children: "Amazing - we can take a screenshot just by passing a URL. Let's hook it up to Bubble by appending the dynamic URL of the tool to the rest of the APIFlash request." }), "\n", _jsxs(_components.p, { children: ["In the **Image **input field, first, select ", _jsx(_components.code, { children: "Arbitrary Text" }), " . This will be the first part of the request - ", _jsx(_components.code, { children: "https://api.apiflash.com/v1/urltoimage?access_key=&wait_until=page_loaded&url=" }), " . Then select the ", _jsx(_components.code, { children: ":append" }), " operator. This will let us combine multiple strings. Make the value ", _jsx(_components.code, { children: "" }), " .\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-07-at-1.18.27-PM.png", alt: "" }), "\nPreview your app now and go to the ", _jsx(_components.code, { children: "mailchimp" }), " page - ", _jsx(_components.code, { children: "" }), ". Nothing might look changed on the surface but inspect the SEO tags on the page to see real wonders."] }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Copy/Paste the URL into ", _jsx(_components.a, { href: "https://heymeta.com", children: "HeyMeta" }), " - a meta tags checker"] }), "\n", _jsxs(_components.li, { children: ["Hit ", _jsx(_components.strong, { children: "Submit" })] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["The Mailchimp page now has our title, description, and image coming through.\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-07-at-1.30.22-PM.png", alt: "" })] }), "\n", _jsx(_components.p, { children: "💡" }), "\n", _jsx(_components.p, { children: "APIFlash caches screenshots on their side, meaning if you load up the same image multiple times, only 1 request is counted." }), "\n", _jsx(_components.p, { children: "You can try other pages as well to see how their details look!" }), "\n", _jsx(_components.h2, { children: "Step 4 - Build the Homepage" }), "\n", _jsx(_components.p, { children: "We have our individual tool page going, but we're missing a homepage. Our homepage will list the top tools from the DB." }), "\n", _jsxs(_components.p, { children: ["Switch to the ", _jsx(_components.code, { children: "index" }), " page by clicking on the top left of the dashboard."] }), "\n", _jsx(_components.p, { children: "Add a heading to indicate the purpose of the website - \"Top tools to build your next SaaS Product\"." }), "\n", _jsx(_components.p, { children: "To show tools, the **Repeating Group **component is perfect. It can display data in a list-type format without having to copy and paste manually. This will also automatically update when data is changed in the DB. Update it with:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Type of content" }), " - ", _jsx(_components.code, { children: "tools" })] }), "\n", _jsxs(_components.li, { children: ["**Data source **- ", _jsx(_components.code, { children: "Search for tools" })] }), "\n"] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/07/Screen-Shot-2022-07-26-at-4.27.02-PM.png", alt: "" }), "\nThis returns all the tools from the ", _jsx(_components.code, { children: "Tools" }), " DB to be displayed in a list format. To see, you have to add some text to the Group."] }), "\n", _jsx(_components.p, { children: "We will show the name and description of a particular tool in each cell and clicking the name will take you to its dedicated page." }), "\n", _jsx(_components.p, { children: "To do this:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Drag a ", _jsx(_components.strong, { children: "Link" }), " component inside the Repeating Group"] }), "\n", _jsxs(_components.li, { children: ["Change the display value to be: ", _jsx(_components.code, { children: "" })] }), "\n", _jsxs(_components.li, { children: ["Update the **Destination Page **to ", _jsx(_components.code, { children: "tool" })] }), "\n", _jsxs(_components.li, { children: ["Make sure the **Data to Send **is ", _jsx(_components.code, { children: "Current cell's tools" })] }), "\n"] }), "\n", _jsx(_components.p, { children: "Sweet - Open up the preview and if you try clicking on the name, you will get redirected to the correct page." }), "\n", _jsxs(_components.p, { children: ["For Description, drag a ", _jsx(_components.strong, { children: "Text" }), " component into the Repeating Group and make the value - ", _jsx(_components.code, { children: "Current cell's toolss's description" }), ".\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-08-at-6.36.44-PM.png", alt: "" }), "\nThere you have it! You can click on the items on the index page and view individual tool details."] }), "\n", _jsx(_components.h2, { children: "Step 5 - Generate Sitemap" }), "\n", _jsx(_components.p, { children: "A sitemap is an XML file that tells Google what URLs exist on your website. This functionality is disabled by default on Bubble. Here's how we can enable creating sitemaps for our website:" }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Open up ", _jsx(_components.strong, { children: "Settings > SEO/Metatags" })] }), "\n", _jsxs(_components.li, { children: ["Scroll down and enable ", _jsx(_components.code, { children: "Expose a Sitemap" })] }), "\n", _jsxs(_components.li, { children: ["Select ", _jsx(_components.code, { children: "index" }), " and ", _jsx(_components.code, { children: "tool" }), " pages"] }), "\n"] }), "\n", _jsxs(_components.p, { children: ["This will generate sitemaps for the index and every ", _jsx(_components.code, { children: "tool" }), " page that we have. Check it out by going to: ", _jsx(_components.code, { children: "/sitemap.xml" }), "."] }), "\n", _jsxs(_components.p, { children: ["Bubble likes to nest sitemaps so you will find the links to ", _jsx(_components.code, { children: "tools" }), " pages under ", _jsx(_components.code, { children: "/sitemap-tool.xml" }), ".\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-07-at-12.31.41-PM.png", alt: "" }), "\nThis will auto-update as new pages are created so you don't have to worry about repeating this step after every change."] }), "\n", _jsx(_components.p, { children: "Wonderful - now let's let Google know that our pages are ready to be crawled." }), "\n", _jsx(_components.h2, { children: "Step 6 - Submit to Google Search Console" }), "\n", _jsx(_components.p, { children: "Google Search Console is extremely important when running a Programmatic SEO website. It reports when Google crawled your pages, how many views your pages are getting, and which search terms you're ranking for." }), "\n", _jsx(_components.p, { children: "Google has to index our pages before we can show up in Google searches. We can do this by uploading our sitemap into Google Search Console." }), "\n", _jsxs(_components.ol, { children: ["\n", _jsxs(_components.li, { children: ["Sign up for ", _jsx(_components.a, { href: "https://search.google.com/search-console/about", children: "Google Search Console" })] }), "\n", _jsxs(_components.li, { children: ["From the left sidebar, ", _jsx(_components.a, { href: "https://search.google.com/search-console/about", children: "click Sitemaps" })] }), "\n", _jsxs(_components.li, { children: ["Enter in the main Sitemap URL from the last step - ", _jsx(_components.code, { children: "/sitemap.xml" }), ". Google can automatically read the nested maps so no need to submit all of them. Just the top one should suffice."] }), "\n"] }), "\n", _jsx(_components.p, { children: "It can take a few days for the pages to be crawled and indexed in the search engine. Sit tight and keep checking." }), "\n", _jsx(_components.p, { children: "There's some work that needs to be done to make sure the SEO - meta tags, images, and page titles, are put in place but this is definitely a good starting point." }), "\n", _jsx(_components.h3, { children: "Step 7 - Regularly audit for SEO issues" }), "\n", _jsxs(_components.p, { children: ["It's a good idea to audit pages for SEO issues regularly. I use ", _jsx(_components.a, { href: "https://seo-checker.io", children: "SEO Checker" }), " to run a report. It neatly lists out all the issues and potential fixes we can make."] }), "\n", _jsx(_components.h3, { children: "Credits" }), "\n", _jsxs(_components.p, { children: ["Thank you to ", _jsx(_components.a, { href: "https://twitter.com/@stephen_nocode", children: "Stephen" }), " and ", _jsx(_components.a, { href: "https://twitter.com/CALinguini", children: "Callen on Twitter" }), " for providing great feedback!"] }), "\n", _jsx(_components.hr, {}), "\n", _jsx(_components.p, { children: "Page load speed is a critical factor in Google ranking your pages." }), "\n", _jsxs(_components.p, { children: ["Want your Programmatic SEO pages to load up instantly? Try ", _jsx(_components.a, { href: "https://launchman.io?ref=bubble-post", children: "Launchman" }), ".\n", _jsx(_components.img, { src: "https://launchman-space.nyc3.cdn.digitaloceanspaces.com/saasbase/images/2022/08/Screen-Shot-2022-08-05-at-11.43.37-AM.png", alt: "" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = Object.assign({}, _provideComponents(), props.components); return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, { children: _jsx(_createMdxContent, props) })) : _createMdxContent(props); } return { default: MDXContent };

Bubble

.css-277wjy{position:static;color:var(--chakra-colors-gray-800);}.css-277wjy::before{content:'';cursor:inherit;display:block;position:absolute;top:0px;left:0px;z-index:0;width:100%;height:100%;}Programmatic SEO using Bubble

Programmatic SEO using Bubble