DEV Community

Yuuichi Eguchi
Yuuichi Eguchi

Posted on

Constela: Built-in SEO Features for JSON-Driven UI

#constela #webdev #typescript #json

We're excited to announce comprehensive SEO features for Constela, our JSON DSL-based UI framework. If you're building websites with Constela, you can now easily optimize for search engines without leaving the declarative JSON approach.

What is Constela?

Constela is a compiler-first UI language where you describe UI behavior as JSON DSL instead of JavaScript. It's designed for AI-generated UI, deterministic behavior, and inspectable state transitions. Learn more

New SEO Features

1. HTML lang Attribute

Configure the lang attribute in constela.config.json:

{
  "seo": {
    "lang": "en"
  }
}
Enter fullscreen mode Exit fullscreen mode

Output: <html lang="en">

We support the full BCP 47 specification, including:

  • Basic: en, ja, zh
  • Regional: en-US, en-GB
  • Script: zh-Hans-CN, zh-Hant-TW
  • Extended: de-DE-u-co-phonebk

2. Canonical URLs

Set canonical URLs via route.canonical with full expression support:

{
  "route": {
    "path": "/posts/:slug",
    "canonical": {
      "expr": "bin",
      "op": "+",
      "left": { "expr": "lit", "value": "https://example.com" },
      "right": { "expr": "route", "source": "path" }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

For /posts/hello-world, this generates:

<link rel="canonical" href="https://example.com/posts/hello-world">
Enter fullscreen mode Exit fullscreen mode

Dynamic routes are fully supported - the { "expr": "route", "source": "path" } expression correctly resolves to the actual path during SSG build.

3. JSON-LD Structured Data

Add Schema.org structured data via route.jsonLd:

{
  "route": {
    "jsonLd": {
      "type": "Article",
      "properties": {
        "headline": { "expr": "route", "name": "slug", "source": "param" },
        "author": {
          "expr": "object",
          "type": "Person",
          "properties": {
            "name": { "expr": "lit", "value": "John Doe" }
          }
        },
        "datePublished": { "expr": "lit", "value": "2024-01-15" }
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Output:

<script type="application/ld+json">
{"@context":"https://schema.org","@type":"Article","headline":"hello-world","author":{"@type":"Person","name":"John Doe"},"datePublished":"2024-01-15"}
</script>
Enter fullscreen mode Exit fullscreen mode

Nested Objects and Arrays

Complex structures like BreadcrumbList are fully supported:

{
  "jsonLd": {
    "type": "BreadcrumbList",
    "properties": {
      "itemListElement": {
        "expr": "array",
        "items": [
          {
            "expr": "object",
            "type": "ListItem",
            "properties": {
              "position": { "expr": "lit", "value": 1 },
              "name": { "expr": "lit", "value": "Home" },
              "item": { "expr": "lit", "value": "https://example.com/" }
            }
          },
          {
            "expr": "object",
            "type": "ListItem",
            "properties": {
              "position": { "expr": "lit", "value": 2 },
              "name": { "expr": "lit", "value": "Blog" },
              "item": { "expr": "lit", "value": "https://example.com/blog" }
            }
          }
        ]
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Security

All SEO features include built-in XSS protection:

  • lang attribute: BCP 47 format validation (alphanumeric and hyphens only)
  • Canonical URL: HTML escaping for special characters
  • JSON-LD: Unicode escaping for </script> and other dangerous sequences

Summary

Constela makes SEO a first-class citizen in JSON-driven UI development:

Feature Configuration Output
Language seo.lang <html lang="...">
Canonical route.canonical <link rel="canonical">
Structured Data route.jsonLd <script type="application/ld+json">

All features work seamlessly with dynamic routes and SSG builds.

Links

Have you tried Constela? Let us know your thoughts in the comments!

Top comments (0)