The GUBUR semantic
SEO framework
A tool for generating hierarchical topical clusters based on semantic SEO frameworks, visualised through a node tree using SVG and React.
The Topical Map Builder is an application recently added to the portfolio, designed specifically to assist in the analysis and generation of hierarchical topical clusters based on semantic SEO frameworks. It systematically translates a single root keyword into a well-structured tree of related entities, content clusters, and supporting articles.
Rather than concentrating on the mechanics of rendering or visual UI constraints, this article focuses entirely on how we approached the topical mapping analysis within the application's underlying data architecture. We will explore exactly how the builder processes, categorises, and structures this semantic data.
The GUBUR Semantic SEO Framework
Before delving into the code, it is worth briefly outlining the semantic principles at play. The concept of "Topical Authority" is critical in modern SEO, prominently formalised through the GUBUR framework. The foundational idea is that an entire site's structure should branch outwards cleanly and logically:
- Pillars: The core, high-level root entities (e.g., "Content Marketing").
- Clusters: Medium-level subtopics dividing the core topic (e.g., "How to implement Content Marketing").
- Supporting: Long-tail, granular articles extending clusters further (e.g., "Content Marketing Best Practices for Start-ups").
The tool structurally enforces this hierarchy at the data level. Behind the scenes, we type this hierarchy rigidly using TypeScript, ensuring every facet of the application knows exactly where in the semantic graph it sits.
export type ContentType = 'pillar' | 'cluster' | 'supporting';
export type IntentType = 'informational' | 'navigational' | 'commercial' | 'transactional';
export interface TopicNode {
id: string;
title: string;
contentType: ContentType;
intent: IntentType;
children: TopicNode[];
expanded?: boolean;
}This recursive TopicNode representation means the ontological map is infinitely scalable. A node simply contains an array of further nodes.
Modelling Search Intent
An often overlooked aspect of generating a topical map is aligning the content with user search intent. A cluster of articles is only valuable if it comprehensively addresses the various motivations a user might possess. To ensure the mapping analysis caters to this, the IntentType is integrated directly into the foundational interface.
By categorising every generated node by its inherent intent—whether it is informational, navigational, commercial, or transactional—the application guarantees a balanced distribution of content objectives across a pillar.
Algorithmic Content Seeding
To bootstrap the analysis, the application utilises seeding functions to generate the initial branching logic based purely on a root keyword.
The generatePillarContent algorithm is designed to immediately establish four distinct logical clusters for any given topic:
- Definitional groupings (What it is).
- Instructional groupings (How to use it).
- Commercial evaluations (Best tools/services).
- Strategic applications (Strategies and ROI).
export function generatePillarContent(keyword: string): TopicNode[] {
const cluster1 = createNode(`What is ${keyword}`, 'cluster', 'informational');
cluster1.children = [
createNode(`${keyword} Definition & Meaning`, 'supporting', 'informational'),
createNode(`History of ${keyword}`, 'supporting', 'informational'),
createNode(`Why ${keyword} Matters`, 'supporting', 'informational'),
];
const cluster2 = createNode(`How to Use ${keyword}`, 'cluster', 'informational');
cluster2.children = [
createNode(`${keyword} for Beginners`, 'supporting', 'informational'),
createNode(`${keyword} Best Practices`, 'supporting', 'informational'),
createNode(`Common ${keyword} Mistakes`, 'supporting', 'informational'),
createNode(`${keyword} Tips & Tricks`, 'supporting', 'informational'),
];
const cluster3 = createNode(`Best ${keyword} Tools`, 'cluster', 'commercial');
cluster3.children = [
createNode(`Top ${keyword} Software Compared`, 'supporting', 'commercial'),
createNode(`Free vs Paid ${keyword} Tools`, 'supporting', 'commercial'),
createNode(`${keyword} Tool Reviews`, 'supporting', 'transactional'),
];
const cluster4 = createNode(`${keyword} Strategies`, 'cluster', 'informational');
cluster4.children = [
createNode(`Advanced ${keyword} Techniques`, 'supporting', 'informational'),
createNode(`${keyword} Case Studies`, 'supporting', 'informational'),
createNode(`${keyword} ROI & Metrics`, 'supporting', 'commercial'),
];
return [cluster1, cluster2, cluster3, cluster4];
}This scaffolding establishes an immediate, structurally sound semantic foundation. From here, the hierarchical rules take over. The strict data architecture dictates that commercial subtopics categorise naturally into the broader commercial cluster, while informational supporting entities remain distinct.
Summary
The analytical philosophy underlying this application is the strict enforcement of semantic modelling through rigid data types. By formulating raw TypeScript interfaces around established SEO methodologies, the resulting application tree performs effortlessly and predictably. This ensures any ontological graph built using the tool remains logically coherent and strictly categorised according to best practices.
It is important to acknowledge, however, that this current iteration represents only a very basic approach to handling topographical sorting and semantic relationship mapping. We recognise that this is a foundational application, and there remains significant room for improvement and refinement as the complexity of the data increases. Feel free to give the Topical Map Builder a try via my selected works page!