Programmatic SEO with Handlebars

When it comes to SEO, there are two main strategies: targeting big, popular keywords or focusing on smaller, more specific ones (niche keywords).

Targeting big keywords means intense competition. It requires significant resources, including time, money, and expertise. Large companies with substantial budgets often dominate these popular search terms, making it difficult for smaller businesses or newcomers to rank well.

If you're just starting out or have limited resources, focusing on niche keywords is often a better strategy. This approach allows you to target less competitive search terms that are more specific to your product or service. It's an effective way to attract a targeted audience without directly competing with industry giants.

However, the niche keyword strategy has its challenges. To generate significant traffic, you need to target many of these smaller keywords. Creating content for each keyword individually can be time-consuming and labor-intensive. This manual approach might not be practical when you're trying to cover a large number of keywords.

This is where programmatic SEO becomes valuable.

What is Programmatic SEO?

It's a method that allows you to create content for many niche keywords automatically. Instead of making each page by hand, you use a system that generates many pages at once, each targeting a different keyword.

Let's look at two examples that show how programmatic SEO can work wonders when done right:

Crontab Guru by Cronitor

Cronitor, a company that monitors cron jobs, created a clever tool called Crontab Guru. This tool helps developers who often struggle with cron job schedules.

Developers frequently search for phrases like "Cron job every hour" or "Cron job every Monday." Crontab Guru smartly creates a unique page for hundreds of these time combinations. Each page provides the exact code needed for that specific schedule.

This simple idea attracts about 120,000 visitors monthly from search engines. It also subtly introduces people to Cronitor's paid services.

Thomas Cook's Weather Pages

Thomas Cook, a travel company, used programmatic SEO to create a vast network of weather-related pages for their destinations. They started by looking at what people search for about popular vacation spots.

For a place like Tenerife, instead of just one general weather page, they created many specific ones. They made pages for "Tenerife weather in January," "Tenerife weather in February," and so on. They even created pages for different towns within Tenerife.

They repeated this idea for all their travel destinations. In total, Thomas Cook created 3,744 different weather pages. These pages collectively bring in nearly 500,000 visitors every month from search engines. For Tenerife alone, they have 67 different weather pages.

If you examine these pages closely, you'll notice a fundamental aspect of programmatic SEO:

Crontab Guru pages utilize a consistent template, with variations primarily in the URL, meta title, H1 tag, and the specific cron syntax. The overall structure and surrounding content remain uniform across pages.

Similarly, Thomas Cook's weather pages employ a standard template. The main differences lie in the destination name, month, and specific weather data. The page structure and types of information presented are consistent across all locations and time periods.

This templated approach is key to programmatic SEO. It allows for efficient creation of many pages, each targeting specific keywords.

So, how can we create these pages effectively? At TextPixie, we found that Handlebars is an excellent solution for this. Handlebars is a templating engine that's perfect for programmatic SEO. Let's explore how we can use it to generate SEO-optimized pages at scale.

Handlebars for Programmatic SEO

At TextPixie, we have created a 4 steps approach to generate SEO-optimized pages at scale leveraging Handlebars.

1. Page Template Creation: We use Handlebars to create a page template with HTML and CSS. This template serves as the foundation for all our generated pages.
2. String Abstraction: We abstract the text content on the page as i18n keys. Crucial SEO elements like meta titles and H1 tags are set up with variables to allow for customization.
3. Content Storage: All the strings are stored in an i18n system. This centralized approach makes it easy to manage and update content across multiple pages.
4. Dynamic Rendering: During page rendering, we collect the necessary variables and use Handlebars.compile() to generate the final strings. This process allows us to inject the right content into each page dynamically.

Let's look at a real example of how this works:

1. Page Template Creation:

We create a Handlebars template for a translation service page:

<!DOCTYPE html>
<html lang="{lang}">
<head>
    <title>{metaTitle}</title>
    <meta name="description" content="{metaDescription}">
</head>
<body>
    <h1>{h1}</h1>
    <p>{introText}</p>
    <div class="translator">
        <textarea placeholder="{placeholderText}"></textarea>
        <button>{buttonText}</button>
    </div>
</body>
</html>

1. String Abstraction:

We define i18n keys for our content, with variables for language pairs:

const i18nKeys = {
    metaTitle: "{{sourceLang}} to {{targetLang}} Translator: Free and instant translation",
    metaDescription: "Translate {{sourceLang}} to {{targetLang}} quickly and accurately with our free online translator. Perfect for texts, websites, and documents.",
    h1: "{{sourceLang}} to {{targetLang}} Translator",
    introText: "Instantly translate {{sourceLang}} to {{targetLang}} with our translator",
    placeholderText: "Enter text to start translation",
    buttonText: "Translate"
};

1. Content Storage:

These strings are stored in our i18n Google Sheet. Each key in the i18nKeys object corresponds to a single entry in the i18n Google Sheet. The values contain Handlebars-style placeholders ({{sourceLang}}, {{targetLang}}) where appropriate.

1. Dynamic Rendering:

When we need to use these values, we first fetch the template string from the i18n system, then compile it with Handlebars, passing in the necessary variables:

const getI18nValue = (key, variables) => {
    const template = Handlebars.compile(i18n.t(key));
    return template(variables);
};

// Usage example
const metaTitle = getI18nValue('metaTitle', { sourceLang: 'English', targetLang: 'Spanish' });

This approach allows for more flexibility and reusability, as the same template can be used for multiple language pairs by simply changing the variables passed to it.

By implementing this system, we can efficiently generate numerous pages, each optimized for specific keywords related to different language pairs, while maintaining a consistent structure and design.

Our Textpixie AI Translator page and all its subpages are sharing the same template, e.g., English to French Translator. Check them out to see them in action.