- What is Programmatic SEO?
- Regular SEO vs. Programmatic SEO
- Basics of Programmatic SEO
- 3 golden rules for Programmatic SEO
- Programmatic SEO Benefits
- How to do Programmatic SEO?
- Keywords for Programmatic SEO: finding plenty of them
- Creating Programmatic SEO landing pages
- Programmatic SEO generator
- How to make URL structure programmatic?
- Programmatic SEO challenges - and how to fight them?
- Landing Pages at Large Scale Strategies:
- Programmatic SEO supported by headless CMS.
- Why choose BCMS to do programmatic SEO?
- Building programmatic landing pages in BCMS
- Programmatic SEO recap
Not so long ago, my team and I @thebcms decided to use programmatic SEO as our strategy to build dozens of landing pages, and I was thrilled 🤩. BCMS is a Headless CMS software that helps developers, content editors, and designers create fast and powerful websites - together.
As a first marketing hire, I could explore different strategies and experiment a lot. One of the first things I worked on was creating and implementing the programmatic SEO strategy. If you are unsure what programmatic SEO is, check out these Programmatic SEO examples.
Luckily, I’ve documented the whole process, so I might help you apply this strategy for your project and save you from (some) trials and errors. Here we go:
Programmatic SEO at BCMS
We leveraged our knowledge in web development, serverless, and headless CMS area to craft meaningful dynamic landing pages.
Results so far
We created unique and universal content for more than 2k in a short time to achieve a better ranking on Google. We published those landing pages in November 2021 and are now following Google analytics.
Look at this example: for the first 30 days, these pages generated 2880 organic visits. But not only is this generating traffic, but most importantly, it also provides us a glimpse into the niche search trends, helping us prepare better for what's coming.
So I want you to think of this text as your guide, your suit sawyer; I will describe every step and hope I'll help you find a new way of effectively doing things. Let's dive in!
What is Programmatic SEO?
By programmatic SEO definition, it is a strategy that helps build landing pages on a large scale to increase search traffic. That provides more visits to your website, you are more likely to have a better ranking, and you will be able to reach a targeted audience and give the answers they are looking for.
The best way to explain this is as an example. Have you ever visited Tripadvisor or Airbnb to arrange your traveling? What do they have in common? Besides inspiring people to travel, they use programmatic strategies to make them your first choice when looking for accommodation and/or places you want to visit.
How do they do so? Tripadvisor SEO is leveraging a massive list of hotels they already have in their database to create a dedicated page for every city in the world. In this example, Madrid. What does Tripadvisor get by using this strategy? Answers people want to know and, at the same time, more visits to their content. Imagine how many cities and hotels exist globally and how many landing pages they need to build. As you can see, SEO programmatic is a powerful tool if you use it correctly.
So, you can rely on this strategy, but you need to be well prepared. You can not forget that you must have high-quality content with proper keywords and be sure who your target audience is. Or who is a person interested in your content, product, service, or anything you want to offer or promote?
Regular SEO vs. Programmatic SEO
Both programmatic SEO and regular SEO are aimed at increasing your visibility in search results and getting more traffic to your website.
However, the way they achieve this is quite different.
A regular SEO campaign improves your website's search engine visibility. With a focus on high-quality content, it's a long-term strategy.
With programmatic SEO, you can rank on Google more quickly. It allows you to create dozens of search-engine-friendly landing pages.
4 differences between Regular and Programmatic SEO
Keywords: Regular SEO targets all types of keywords, while programmatic SEO typically targets low-competition keywords.
User intent: Regular SEO meets all types of search intent; programmatic SEO is best for transactional keywords.
Landing pages: For Regular SEO, landing pages are created manually, while programmatic SEO uses automation to duplicate the template and populate it with relevant content.
Scalability: Regular SEO comes with limited scalability, while programmatic SEO is highly scalable.
Basics of Programmatic SEO
Programmatic SEO is a systematic and data-driven approach to finding keywords. More accurate, adequate keywords. On the technical side, by using this approach, you will understand the user's intent and create hundreds of landing pages. On the other hand, the SEO part is essential and accessible when you think about content.
The mindset goes this way; you need to understand what people want, their doubts, and what they don't know, and then give them the correct answers by creating high-quality content.
3 golden rules for Programmatic SEO
To have a successful programmatic SEO score, you need to follow these 3 golden rules:
Programmatic SEO focusing on low-competition keywords
Search engines consider low-competition keywords to be easier to rank for. You don't have to build many links or have high website authority to rank for them and get organic traffic.
Programmatic SEO projects will target those keywords with a low keyword difficulty percentage to rank on a scale.
Programmatic SEO Keywords: Types and categories
In programmatic SEO, keywords are strategic pillars rather than random search terms. To navigate the SEO landscape effectively, it's crucial to understand and utilize various types of keywords:
Head terms
These broad, single-word keywords compete for top positions in search results. They boast high search volumes and lay the foundation for your content strategy.
Body Keywords (Modifiers)
These keywords, typically two or three words, target specific search queries while maintaining considerable search volume. They strike a balance between broad reach and relevance.
Long-tail keywords
These are highly specific phrases comprising several words, drawing in a significant portion of search traffic collectively. While they may have lower individual search volumes, they are easier to rank for and often lead to higher conversion rates.
LSI Keywords (Latent Semantic Indexing)
With LSI keywords, search engines can better understand the context of your content, improving your chances of ranking for related searches. These keywords are words or phrases that are semantically related to a target keyword. So if you write an article about programmatic SEO LSI keywords would be:
Geo-targeted keywords
These keywords incorporate specific locations to attract a local audience. They are indispensable for businesses with physical establishments, service areas, or traveling.
Geo-targeted keywords examples:
"Plumber near me"
"Best sushi restaurant in Los Angeles"
"Taxi service in Manhattan"
"Real estate agent in Miami Beach"
"Hotel deals in Orlando"
"Car rental at JFK Airport"
Question-based keywords
Phrased as inquiries, these keywords align with the rising trend of voice search and users seeking direct answers on search engines.
A question keyword is a search query that contains interrogative words, such as who, what, where, when, why, or how. Most question keywords are long-tail, low-volume, and have specific search intent - whether it's to find a quick answer or an in-depth answer.
Question-based keywords example:
Programmatic SEO is all about search intent
Programmatic SEO typically involves aiming for keywords with transactional or commercial search intent. So, programmatic pages work best for those at the bottom of the marketing funnel—those ready to buy.
For example, "buy ice cream," "ice cream flavors," and "ice cream products" users searching for these keywords are ready to eat.
Meeting search intent early on your landing page tells readers they’re in the right place, which makes them more likely to stay on the page.
Programmatic SEO needs a platform with a great User Experience:
You can't afford to focus solely on content if you want to use programmatic SEO effectively. You should also consider the design, mobile responsiveness, and overall performance of your landing pages.
A good user experience will keep and convert visitors to your website. However, automation for landing page scaling can impact your user experience. This means you'll need pages that load quickly and have unique, valuable content on each. To do so, my advice is to go headless. 😉
Read more about it: Why is your website slow? Common causes and how to fix them
The quality of your CMS reflects the quality of your site
Programmatic SEO Benefits
Programmatic can provide some more advantages besides getting all crucial information about your users' needs to implement into your content. One of the main benefits is speed.
Programmatic SEO helps to avoid a slow SEO process
You know how they say, "Slow and steady wins the race." Well, in this case, that is entirely inaccurate. A programmatic strategy is a perfect solution to do your job as fast as possible in an effective way. At the highest possible speed, you are getting a customized website with your user's experience. That results in a captivating engagement between the user's interests and the brand you represent. Why is that? Because for a programmatic, one of the most important things is to find out the customer's transactional intent.
Focus on transactional intent
It is one of the four types of keyword intent. This particular one refers to keywords that indicate a searcher’s intent to buy something or take action on a website soon. So basically, you get keyword phrases that include a specific product or brand name combined with so-called buying words.
For example, if somebody searches "Buy pets online, "that shows that someone is willing to buy or take some action; this intent is crucial if you are in a pet business. What does programmatic SEO do? Join your offer with consumers' wishes.
Reach out to a massive audience
Being present on multiple platforms, with so many offers, and craving to reach out to many people as possible is not an easy task to complete. Programmatic strategy can do this job more efficiently thanks to pure SEO optimization. This will empower your business and enable mutual growth of your success and the amount of your audience.
How to do Programmatic SEO?
When I researched programmatic SEO for websites, I was ready to start doing some jobs. I thought it would be challenging to create content for so many pages, and the truth is, it was so much easier. So, in this part, I will try to explain all steps I took to make creating landing pages possible.
First, I imagined a page as some kind of template. As a former journalist, it was much easier to make a page scheme. So basically, I divided the page into sections, like sections that any media website has, and then I put questions in every section, and my idea was that answers to those questions were the content I wanted to have. To make it clearer, I’ll explain what my idea was. I needed to write a text about using headless CMS to build different websites. As I mentioned above, I asked some typical journalists questions.
Why should a website have a headless CMS?
When to use headless CMS?
What does a headless CMS have to offer that other website options don’t?
How to start using headless CMS for your website?
Now with these questions in mind, I was ready to start doing some research about keywords.
Keywords for Programmatic SEO: finding plenty of them
This was the first and most crucial step. It's all about capturing search traffic that's relevant to your business or web page. As in any SEO strategy, the right keywords are essential for content creation. Your target audience's search intent can vary based on their keyword usage. You need to do some classification to find keywords on a larger scale. The first category must contain words that are frequently searched. Those words are going to be head terms. It's essential to notice the difference between keywords.
How to find keywords for programmatic SEO?
Main terms have a massive amount of search volume, and those words are the most used when it comes to Google searches. Using the right keywords for programmatic SEO as leading terms can contribute to a better ranking. But how to be sure which keywords are the best choice? Well, handy Programmatic SEO tools can help you make the right choice. The web is full of keyword generators that can inform you about what people are searching, such as:
All these tools are helpful not just in finding keywords but also in doing competitive analysis. That means you can find out what your competitors do or use when creating their content. For example, Google Trends provides valuable information about audience interests through time. You can follow people's interests and how they are changing based on time, location, and even the way they search for something. In my case, here what's Google Trends shows:
Just looking at this example, you can see how easy it can be to find good topmost terms. Once you find a few top-ranking terms, you are ready for the next step, identify modifiers.
How can modifiers help you in your Programmatic SEO optimization
Clearly, your head terms will have the most significant search volume in general. When searching, people don't use just one keyword. Things they write before or after head terms are modifiers that can give you a bigger picture of the topic they are interested in. But combining them with the modifiers leads to real search volume. Modifiers are divided into Primary modifiers: This group helps you create a brand-new category. Secondary modifiers: Think of them as adjectives. They give descriptions and determine more closely what the audience's intent is.
What to do with these words? Put them all together! With a mixture of all keywords, you’ve done an outstanding job and got well-done materials for your content.
Let me show you how this works. You can choose any word from any column, and you will get a sentence that still has sense. This is just a part of a list I used for my programmatic strategy. What is the most popular CMS for the Company website? Or, What is a secure Headless CMS for E-commerce? This is pretty cool, right? Wait to see another more fantastic magic. We got an extensive list by implementing this list into our headless BCMS. After compiling desired keywords in a list, you will typically have a lot of data to use on your site. You may sometimes have over 100k search terms, but don’t worry - even if you have a lot less, you can still create more than 2000 landing pages.
Creating Programmatic SEO landing pages
After targeting keywords and finishing all competitive analyses, it's time to create landing pages. Building landing pages is another delicate part of any programmatic strategy. Remember that you have to build many pages that need to be different and unique. The first question I asked myself was: Do I have to build a landing page for every keyword I found? The answer is no! Why not? Well, it's simple; Google can help me with that. As Google is good at related topics, I figured creating a landing page per searcher intent is better than making it for every keyword. This is the best strategy since people use search results differently, depending on their ultimate goals. Look at this example. I typed "Best headless CMS for the website" and looked at Google-related topics.
This strategy can help you determine what Google considers as a specific keyword search intent. Another cool thing is that Google often highlights in bold words, which can also be a good indicator. After all of this, I had a clear vision and prepared sections, and the developer team was able to create the template and design of the page. The form of a landing page is another essential factor. The focus here is on targeted keywords that can help you rank better, and the goal is to increase your share of total search traffic to get a call to action.
For those reasons, the landing page needs to be designed to capture the audience’s attention. An effective way to accomplish this is to keep your page clear, informative, and direct, emerging to better user experience. Again, our headless CMS was an excellent tool for that. The core of BCMS is to keep it simple and clean but modern, so we did that for our pages.
We have a template and a design, and my next topic on the menu is the most important one: content.
How to transform content into programmatic?
This was one of the crucial questions for me. How to write creative and exciting content in such an SEO-optimized environment? I want to have high-quality written content, but how can I escape the trap of text full of keywords that Google likes but users not so much? How can I make Google fall in love with my content and audience?
Let keywords guide your content
I used high-ranking terms naturally and logically because I knew that my readers are real human beings and not some robots eager to see how much I completed my SEO optimization.
Modifiers helped me give context and explain further what the landing page is about. Then I wrote phrases that weren’t so important for ranking but were crucial to answering most asked questions. The final product looks something like this:
I want Google to understand my content
Even if my goal is to get the audience helpful content, I need to please my search engine. Besides being logical and creative, content needs to be structured so that Google can read, analyze and recognize it. Here are some essential things:
Title tag: The page’s title should be short and include a high-quality keyword. Keywords should be close to starting, but you can use modifiers too.
Alt attribute: Add alt attributes to images. Google does not see the images. Describing images with alt attributes makes the site more accessible and relevant.
Meta description: Meta description is a direct ranking factor as an HTML element that describes and summarizes the contents of your page for the benefit of users and search engines.
Headings: An H1 heading needs to match your page title. Use H2 and H3 headings to structure your content. These headings need to include secondary modifiers in secondary headers. Internal links: Internal linking is imperative! Building links increase your website and help Google to comprehend the context and content of a landing page.
External links: Linking your content to external sources, even to your competition, provides more credibility. Images and videos: Adding images or videos to your content makes your content more valuable. Be careful, don’t forget to label these files with ranking terms.
Programmatic SEO generator
After keyword research and creating programmatic SEO landing pages, it's time to make a list of head terms/modifier variations.
You can do that in two ways. Manually or with the help of the BCMS Programmatic SEO generator. The Programmatic SEO Generator helps you generate content when you need it.
You can generate unique programmatic SEO headlines by simply filling in forms with head terms and modifiers. The generator automatically lists all possible variations and options for titles and text. Thus you are sure that you will not leave one out or, even worse, fall into one of the biggest traps of programmatic SEO - creating duplicate content.
So, take your time now and generate thousands of SEO pages with BCMS Programmatic SEO generator for free and download all combinations and after that, you are ready to go further.
How to make URL structure programmatic?
Every little detail is vital in SEO strategies, so don’t forget about your landing page URL. As an identifier, a URL gives some information about your web page and even your content. For Google, the URL provides the first impression. We all want to provide an excellent first impression when we meet a new person, so obviously, you want to do that with your URL page too. How?
Keep it simple!
URL needs to be short and clean. Try to keep your URL short, no more than 65 characters. You can use slashes to separate concepts. Place essential keywords further to the left.
Best practices for URL structure
Use hyphens to separate words
When crafting URLs, prioritize hyphens to separate words instead of underscores. Search engines like Google recognize hyphens as spaces, enhancing the indexing of your web pages.
For example, use "thebcms.com/blog/programmatic-seo-complete-guide-with-examples" rather than "thebcms.com/blog/programmatic_seo_complete_guide_with_examples"
Strategic keyword placement
Integrate relevant keywords into your URLs to boost page rankings. Keep in mind, however, that overdoing keyword stuffing can harm SEO efforts and decrease user experience.
Establish logical hierarchy
Maintain a structured hierarchy in your URLs, mirroring the navigation of your website. This assists users in navigating your site and aids search engines in understanding page relationships, starting from the homepage to specific pages.
Use Static URLs
Static URLs provide consistency and user-friendliness compared to dynamic URLs. They are easier for search engines to crawl and index.
Stay away from deep nesting
Keep pages in three folders deep in your site structure, rather than excessive nesting. As a result of deep nesting, URLs become longer and more complex, potentially complicating the navigation and indexing process.
Proper implementation of redirects
When content moves and URLs change, utilize 301 redirects to maintain SEO value. This signals to search engines that the page has permanently moved, preserving link equity and ensuring a seamless user experience.
Extra tip: Do not include dates in the URL! If you use dates, your content will become irrelevant for Google after some time. If you don’t use dates, you open new possibilities for your landing page updates. Updates can prevent your content and give him relevancy for an extended period.
Learn more: Handling HTML Meta tags in BCMS
Programmatic SEO challenges - and how to fight them?
Results of programmatic are dozens of generated pages on a website. But if you don’t check everything, those pages won’t be so helpful. In this part, I will try to mention issues that you can meet by doing programmatic and how to solve them. The first and the most common problem you face is getting the pages crawled.
Crawlability
When you have thousands of pages, it is critical to prioritize which pages should be discovered by Google. It’s simple if Google can’t find the page, it can’t rank it. It is also important to establish an internal linking pattern to robust information architecture. To ensure that the search engine always finds your page, besides internal linking, make sure each is categorized. Yup, that’s right. Don’t be afraid to use an HTML sitemap.
Using HTML sitemaps help crawlers find new pages. Sitemaps are highly effective when working on large-scale sites with millions of pages. The best way to create a user-friendly sitemap with a logical structure is to organize pages in groups by categories or other criteria. Also, it is crucial to include the most important pages first. You can do it in alphabetical order too.
Lack of content
A lot of SEO programmatic landing pages are based on visuality. There are images, videos, graphics, but you can’t forget the descriptive text. The descriptive text has a tremendous influence on ranking. Without enough text, Google will treat content on your page as thin content, leading to a lower scale because inadequate content for Google has low value. So, the best thing to do is to have both, the text helps to interpret data better, and visual content provides a better user experience.
“Copy-Pasta" content
When creating content for a large scale, you can fall into a severe trap, creating duplicate content on programmatic SEO pages. This refers to the parts of content that are either identical to one another or very similar. Identical content is a common issue because you create content following the same pattern for every page, and the challenge is to stay unique. If not, your content will finish as spam. So:
Don't spam
There are two types of this content: Internal duplicate content refers to content where one domain creates copy through multiple URLs on the same page. External duplicate content: This happens when Google considers that two or more different domains have identical page copies. Twin content is confusing and forces Google to choose which page should rank better in search top results. To avoid this problem, you can use an online duplicate content checker. You can quickly get how Google analyzes your web page by copying the URL to this checker.
Doorway pages
"Doorways are sites or pages created to rank for specific, similar search queries. They are bad for users because they can lead to multiple similar pages in user search results, where each result ends up taking the user to essentially the same destination. " This is how Google defines doorway pages. That sounds like a definition of programmatic strategy, right? In my case, some of my titles are:
These examples can be doorway pages by default. But why aren't they? Again, content is the strongest trump card, and Google allowed landing pages that my team and I created just because of original content. The best way to avoid doorways is to find unique content, products, or services on all those pages, and it might be acceptable depending on how users interact. So, keep this in mind; as long as your content has a real reason to exist, Google won't kick it out.
Optimizing technical SEO
Below are the essential technical SEO guidelines to follow once your pages are generated:
Ensure the title remains fully visible in the SERP.
Provide alt text for images.
Use descriptive file names for images.
Limit to one H1 heading per page.
Maintain a proper heading structure with H2, H3, H4, etc.
Include at least two or three internal links.
Incorporate at least one external link from a high-domain authority source.
Eliminate broken links.
Optimize Core Web Vitals by minimizing code and implementing lazy loading for images, among other techniques.
Structure content for readability with the strategic use of bolding and lists.
Integrate the primary keyword naturally into the introduction to clarify the article's focus.
Incorporate the primary keyword naturally into the conclusion to reinforce the article's main points.
Avoid keyword stuffing for a more organic and reader-friendly experience.
Add Schema Markup to your website for Programmatic SEO
Your website's content and context are more easily understood by search engines using schema markup. This improved understanding can lead to your pages being shown for more relevant search queries, which is crucial for any kind of SEO, especially programmatic.
Here are the steps on how to implement schema markup on your website for programmatic SEO:
Determine relevant schema markup
Identify the schema markup most suitable for your website's content. Familiarize yourself with the various types of schema markup available. You can find a comprehensive list of schema types on the Schema.org website.
Each schema type is designed to provide structured data for specific content types. Implementing schema can elevate your website's visibility in SERPs and boost click-through rates.
Embed schema in HTML code
Integrate schema markup into your website's HTML code. You can do this manually by inserting the necessary schema markup tags directly into the HTML of each relevant page. Alternatively, if you use CMS plugins and extensions can streamline the process of adding schema markup.
Validate schema markup
To make sure the implemented schema markup is right, test it. For testing, use Markup Validator or the Markup Testing Tool from Google. These tools carefully examine the HTML code of your website, finding any mistakes or problems with the application of schema markup.
Schema markup: Programmatic SEO example
In this section, I just want to show you how we implemented schema markup in this programmatic SEO project.
So, this is what a search engine/ crawler sees:
Landing Pages at Large Scale Strategies:
Quick recap: All the landing pages most likely will include the same structures: pictures, lists, call to action button, sitemap, reviews, etc. They’ll probably have the same design and layout. However, every page can’t have the same content.
It’s challenging to produce and give unique content for different landing pages. Besides everything I already wrote about, some landing page strategies can be excellent SEO guides.
Two-sided marketplace
This is one of the best and most well-known ways to do programmatic SEO. Using this approach, you can fill the pages with content, including images, listings, Q&A, product descriptions, etc. On the other hand, the audience can leave reviews or become vendors. All of that creates unique content for every single page. Many companies use this strategy; some are Airbnb, eBay, Apple, Amazon, Uber, Netflix…
In Airbnb's example, you can understand this strategy readily. Airbnb operates as an online marketplace for lodging, primarily homestays for vacation rentals and tourism activities. Besides creating their content, Airbnb allows their customers to leave comments, and reviews and even become hosts. This guest posting creates new original content on a page by writing all the details about his rental.
Community-generated content
Communities like Reddit, Quora, and even Pinterest are the pages that create unique content daily. As long as they have active members, you can get new content. It is super helpful because that opens the possibility to connect their content to landing pages.
For example, If someone searches “Headless CMS,” a Reddit forum is in the top search results. You can use those questions, discussions, and debates to update your content.
E-commerce
E-commerce websites are full of product pages that may have the same general info, but you’ll be in charge of filling out unique product details for each page, benefits, specifications, and prices.
Besides writing different characteristics about products, there are Q&A and reviews sections. That is user-generated content that makes each page more unique.
Programmatic SEO supported by headless CMS.
This chapter is dedicated to the story's more "geeky" side. Doing a programmatic strategy involves working together with a developers department.
All keywords research, written content, and SEO strategy are not worthy if you don’t do the right job on the development side. For me, as a person who belongs to the marketing department, this developer side seems to be more tricky and complicated than anything. The truth is, it is effortless to understand.
Why choose BCMS to do programmatic SEO?
BCMS, like a headless CMS, is constructed to be simple but fast and effective. With headless, one of the most significant advantages is that it is update friendly. That means that if you want to make changes, you don’t have to start from scratch; BCMS can help add new features effortlessly. Our experience showed that headless CMS is the best way to do programmatic SEO for many pages together.
There are a couple of things that you need to put your attention to: Find the data you want to put on landing pages Format those data based on headless CMS, in this case, BCMS Upload those data using BCMS API. By using API, you avoid making the pages manually. The first thing that our back-end developers team did was to create a new CMS collection with defined items. After determining those collections, they were ready to add different content such as text fields, rich text, and images to each item.
Generating landing pages using API
Reading through the API documentation was straightforward. The code used in our project is not very different from the example code, so what did we do? We copy-pasted the example code and only modified it wherever necessary. That led us to create a new CMS collection item. Thanks to the multi-reference field, we made reference items to the different CMS collections and displayed all data from any group. Generating pages based on templates would be the easy part. The hard part is figuring out how to drive internal links to those dynamically created pages, updating site maps, setting up rules for excluding garbage pages, duplicates, spelling mistakes, plurals, etc.
Building programmatic landing pages in BCMS
Setting up the CMS
Create a new “Programmatic” template.
Create the “SEO Column” group with the “Words” property of type String Array. A generic name (SEO Column) is being used because we can have as many columns as needed - while we are using it for synonyms and types columns only, there can be a 3rd column for adjectives (blazingly fast, best, well-known, etc.).
Inside of the “Programmatic” template editor, create a new property called “Columns” that is pointing to the previously-created “SEO Column” Group and toggle Array on. This way, we can add our 2 columns of words, one for synonyms and one for types.
Create a single “Programmatic” entry with 2 columns. Add synonyms in the first column and types in the second one. Synonym examples: CMS, Headless CMS, Content Management System…, and types: Marketing Website, Branding Website, Startup Website…
Add text content (widgets, H1,H2,H3,P, etc) and in places where we want to use synonyms, we replace it with {{ synonym }}, same for the type - {{ type }}. E.g., “The best {{ synonym }} for {{ type }},” which in the end can result in “The best CMS for Marketing Websites“ or “The best Content Management System for Branding Websites.”
Check out how it looks in the CMS.
Here you can find the GitHub repository with minimal code to reproduce Programmatic SEO functionality with Nuxt.js: https://github.com/becomesco/cms-programmatic-seo-demo
As well as the working demo: https://programmatic-seo-nu.vercel.app/
Setting up Nuxt.js
Create “pages/_slug.vue” where we will show the content and related articles. The _slug is the dynamic part ( e.g. cms-for-blog ):
// pages/_slug.vue
<template>
<div class="programmaticPage">
// Used to loop over widgets and H1,H2...,P,Ul from CMS content section
<ContentManager v-if="content.length > 0" :data="content" />
// Used to show next 6 related articles
<ProgrammaticRelated :data="{ items: related }" />
</div>
</template>
<script lang="ts">
import Vue from "vue";
import ContentManager from "@/components/widgets/ContentManager.vue";
import { BCMSEntryContentParsed } from "@bcms/most/types";
import ProgrammaticRelatedWidget from "@/components/widgets/ProgrammaticRelated.vue";
interface Data {
title: string;
content: BCMSEntryContentParsed;
relatedArticles: Array<{
slug: string;
title: string;
}>;
}
export default Vue.extend<Data, unknown, unknown>({
components: {
ContentManager,
ProgrammaticRelatedWidget,
},
async asyncData({ $bcms, params }) {
const locale = 'en';
const slug = params.slug;
const data: {
type: string;
content: BCMSEntryContentParsedItem[];
related: Array<{
title: string;
subtitle: string;
uri: string;
}>;
} = await $bcms.request({
url: `/${locale}/programmatic/${slug}/data.json`,
method: 'get',
});
return {
title: `CMS for ${data.type}`,
content: data.content,
related: data.related,
};
},
head() {
return {
title: this.title,
};
},
});
</script>
You may notice we are using the $bcms.request method in asyncData in order to get the data for the Programmatic page.
The handler for this is located in "api/programmatic.ts":
// api/programmatic.ts
import { BCMSEntryContentParsedItem } from '@becomes/cms-client/types';
import { createBcmsMostServerRoute } from '@bcms/most';
import { BCMSMostServerRoutes } from '@bcms/cmost/types';
import { Seed } from '../scripts/util/seed';
import {
ProgrammaticEntry,
ProgrammaticHeroWidget,
ProgrammaticTextWidget,
} from '~/bcms/types';
import { Locale } from '~/types';
function replaceTypeAndSynonym<T>(obj: T, type: string, synonym: string): T {
return JSON.parse(
JSON.stringify(obj)
.replace(/{{ type }}/g, type)
.replace(/{{ synonym }}/g, synonym),
);
}
export const programmaticApi: BCMSMostServerRoutes = {
'/:locale/programmatic/:slug/data.json': createBcmsMostServerRoute<{
content: BCMSEntryContentParsedItem[];
type: string;
related: Array<{
title: string;
subtitle: string;
uri: string;
}>;
}>({
method: 'get',
async handler({ bcms, params }) {
const locale = params.locale as Locale;
const slug = params.slug;
const slugParts = slug.split('-for-').map(e => e.replace(/-/g, ' '));
if (slugParts.length !== 2) {
throw new Error(`Invalid slug "${slug}"`);
}
const entry = JSON.parse(
JSON.stringify(
await bcms.content.entry.findOne(
'programmatic',
async e =>
e.status !== 'draft' && e.meta.en.slug === 'programmatic',
),
),
) as ProgrammaticEntry;
if (!entry) {
throw new Error('Programmatic entry does not exists.');
}
const type = entry.meta[locale].columns
? entry.meta[locale].columns[1].words.find(
e => e.toLowerCase().replace(/-/g, ' ') === slugParts[1],
)
: '';
if (!type) {
throw new Error(`Missing type for "${slugParts[1]}"`);
}
const randomNumber = Seed(slug)();
const rootWord = 'CMS';
const synonym = entry.meta[locale].columns
? entry.meta[locale].columns[0].words[
(randomNumber % (entry.meta[locale].columns[0].words.length - 1)) +
1
]
: 'CMS';
for (let i = 0; i < entry.content[locale].length; i++) {
const content = entry.content[locale][i];
if (content.name === 'programmatic_text') {
const data = content.value as unknown as ProgrammaticTextWidget;
data.options = [data.options[randomNumber % data.options.length]];
}
}
entry.content[locale] = replaceTypeAndSynonym(
entry.content[locale],
type,
synonym,
);
const related: Array<{
title: string;
subtitle: string;
uri: string;
}> = [];
if (entry.meta[locale].columns) {
const words = entry.meta[locale].columns[1].words;
let atIndex = randomNumber % words.length;
let count = 0;
let loop = true;
while (loop) {
const word = words[atIndex];
if (word !== type) {
related.push({
title: 'CMS —',
subtitle: `Headless CMS for ${word}`,
uri: `cms-for-${word.toLowerCase().split(' ').join('-')}`,
});
count++;
if (count === 6) {
loop = false;
break;
}
}
atIndex++;
if (atIndex === words.length) {
atIndex = 0;
}
}
}
return {
content: entry.content[locale],
type,
related,
};
},
}),
};
To properly handle BCMS routes, we will need to make the "bcms.routes.ts" file:
// bcms.routes.ts
import { createBcmsMostServerRoutes } from '@bcms/most';
import {
// ...,
programmaticApi,
} from './api';
export default createBcmsMostServerRoutes({
// ...,
...programmaticApi,
});
We also need the Seed util method:
// scripts/util/seed.ts
export function Seed(str: string): () => number {
let i = 0;
let hash = 0;
for (hash = 1779033703 ^ str.length; i < str.length; i++) {
const bitwise_xor_from_character = hash ^ str.charCodeAt(i);
hash = Math.imul(bitwise_xor_from_character, 3432918353);
hash = (hash << 13) | (hash >>> 19);
}
return () => {
// Return the hash that you can use as a seed
hash = Math.imul(hash ^ (hash >>> 16), 2246822507);
hash = Math.imul(hash ^ (hash >>> 13), 3266489909);
return (hash ^= hash >>> 16) >>> 0;
};
}
To make sure that Nuxt will generate all of our programmatic pages ( /cms-for-XYZ ) without throwing the 404 error page we can add this chunk of code in the "nuxt.config" file:
// nuxt.config.js
generate: {
async routes() {
const routesToGenerate = [];
const most = useBcmsMost();
const programmatic = await most.content.entry.findOne(
'programmatic',
async () => true,
);
programmatic.meta.en.columns[1].words.forEach((word) => {
routesToGenerate.push(`/cms-for-${word.toLocaleLowerCase().replace(/ /g, '-')}`);
});
return routesToGenerate;
},
},
After all the hard work, all members @bcms team agreed on one: this was an excellent experience that allowed us to make more than 2k landing pages using programmatic SEO strategy and our headless CMS as a website builder. If you plan to leverage landing pages, our honest advice is to choose a programmatic SEO strategy. It is straightforward and to the point. You will see first results and growth for a short amount of time.
Programmatic SEO recap
Deep research and a detailed strategy are the keys to doing everything successfully.
Use modifiers and descriptive text on the page to avoid thin and duplicate content.
Internal and external link-building is imperative!
Make Google fall in love with you but at the same time give quality content to your audience.
Don’t forget about URL structure because it provides link equity.
Sitemaps are a helpful tool to get a better ranking.
Use headless CMS because it is the best option to build such a large number of landing pages.
Using headless CMS to execute a Programmatic SEO strategy is one of the best practices on how CMS can improve your SEO.
Follow your content! Even when everything is done and published continuously, monitoring your content allows you to fix any common technical issues and update your content if needed.
Here you can find the GitHub repository with minimal code to reproduce Programmatic SEO functionality with Nuxt.js: https://github.com/becomesco/cms-programmatic-seo-demo
As well as the working demo: https://programmatic-seo-nu.vercel.app/
Need help? Contact us :)