Page Groups - Mappings
Mappings (also called replacements) define how data from your source gets injected into the base page content. SleekRank supports four replacement types, each targeting a different aspect of the page.
Tag Replacement
Replace the contents of an HTML tag with values from your data source.
Example
If your base page contains an <h1> and your data entry has "heading": "New York",
a tag mapping that targets h1 will replace that heading content with "New York".
Configuration
- Tag: The HTML tag to target (e.g.,
h1,h2,title) - Field: The data field to pull the value from
- Mode: Whether to replace, append, or prepend content
CSS Selector Replacement
Target specific HTML elements by CSS selector and replace their content with data values. This is powerful for replacing content in complex layouts without modifying the base page template.
Example
A selector of .hero-title with a field of name would replace the inner HTML of
any element with class hero-title with the value of the name field.
Configuration
- Selector: A valid CSS selector (e.g.,
.hero-title,#main-heading,h1.title) - Field: The data field to use as replacement content
- Mode: Whether to replace, append, or prepend content
- Attribute: Optional HTML attribute to replace instead of element content
List Replacement
Generate repeated HTML elements from array data. This is useful for rendering lists of items, features, or related data points that vary per generated page.
Example
If your data entry contains "features": ["Fast", "Reliable", "Secure"], a list
replacement can render each item inside the existing list markup within a target
container.
Configuration
- Selector: The container element to populate
- Field: The data field containing the array
Meta Replacement
Dynamically set meta tags such as the meta description, keywords, Open Graph tags, and Twitter tags. This ensures each generated page has its own unique metadata.
Configuration
- Target: The meta tag to replace (e.g.,
description,keywords,og:title,og:image,twitter:title) - Field: The data field to use as the meta value
Use a tag mapping that targets title if you want to change the HTML <title>
tag itself.