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.