đź’ˇ Improve the Routing in NodeJS to include Meta Data

Feature Request
1

When Wappler first introduced the routing system for NodeJS, I put forward the idea of improving the routing system to allow for the inclusion of the page title and page description. This so that the content pages will have their own dynamically inserted data.

Having gone through this video - which is great! - and the discussion on the topic, it has left me wondering why not simplify the process of adding dynamic SEO for the content pages.

I have finally managed to refine the process - with the aid of Claude Sonnet 4.6 - by changing the routes.json file as follows:

{
  "layouts": {
    "main": {
      "meta": [
        {
          "type": "text",
          "name": "page_title"
        },
        {
          "type": "text",
          "name": "page_description"
        },
        {
          "type": "text",
          "name": "page_path"
        }
      ]
    }
  },
  "routes": [
    {
      "path": "/",
      "page": "index",
      "layout": "main",
      "routeType": "page",
      "data": {
        "page_title": "Professional Web Design & Hosting Melbourne",
        "page_description": "Pleysier Web Solutions — affordable, professional web design, development and hosting for individuals and small to medium businesses. Based in Melbourne, Australia with over 20 years experience.",
        "page_path": "/"
      }
    },
    {
      "path": "/services",
      "page": "services",
      "layout": "main",
      "data": {
        "page_title": "Our Services — Web Development, Hosting & Design",
        "page_description": "Comprehensive web solutions including custom web development, reliable Australian hosting and modern responsive design. Tailored for small to medium businesses.",
        "page_path": "/services"
      }
    },
    {
      "path": "/about",
      "page": "about",
      "layout": "main",
      "data": {
        "page_title": "About Us — 20+ Years of Web Development Experience",
        "page_description": "Learn about Pleysier Web Solutions — a Melbourne-based web development company with over 20 years experience delivering affordable, quality websites for small businesses.",
        "page_path": "/about"
      }
    },
    {
      "path": "/contact",
      "page": "contact",
      "layout": "main",
      "data": {
        "page_title": "Contact Us — Get a Free Quote",
        "page_description": "Get in touch with Pleysier Web Solutions for a free, no-obligation quote on web design, development or hosting. Melbourne-based with personalised service.",
        "page_path": "/contact"
      }
    }
  ]
}

It then comes down to simply adding the relevant code in the <head> section as in:

  <!-- SEO Meta -->
  <meta name="description" content="<%=_('page_description.default("Pleysier Web Solutions — affordable, professional web design, development and hosting for individuals and small to medium businesses.")', locals)%>">

  <link rel="canonical" href="https://pleysier.com.au<%=_('page_path.default("/")', locals)%>">

  <meta property="og:type" content="website">
  <meta property="og:site_name" content="Pleysier Web Solutions">
  <meta property="og:title" content="<%=_('page_title.default("Professional Web Solutions")', locals)%> | Pleysier Web Solutions">
  <meta property="og:description" content="<%=_('page_description.default("Pleysier Web Solutions — affordable, professional web design, development and hosting for individuals and small to medium businesses.")', locals)%>">
  <meta property="og:url" content="https://pleysier.com.au<%=_('page_path.default("/")', locals)%>">

  <title><%=_('page_title.default("Professional Web Solutions")', locals)%> | Pleysier Web Solutions</title>
2

Hi Ben,

Yes that is how it is done in code, but we have an UI process for defining and using server side data bindings for meta tags and alike.

Is it not sufficient?

See:

And now actually the same is also available in the new experimental PHP and ASP.NET routing

1 Like
3

How do you account for layout pages Ben? Surely it makes more sense to define meta tags in a single layout then to add meta tags to every single page via routes? Or am I missing something? I don't mind being educated on the matter...

4

Turns out I’ve been overthinking dynamic meta data like a champion — trying to invent “easier” ways to do something Wappler already handles perfectly.

Huge thanks to @George for gently returning me to reality.

A very sheepish, slightly red‑faced Ben :face_with_peeking_eye:

PS: Have unlisted this post to avoid further embarrasment.

1 Like
6

Nothing to worry Ben - we are actually thinking of making this even better and introduce layout pages slots (blocks) so content pages can inject any content in their parent layout pages in specific locations like head and such. So this will make if even more flexible.

So I was hoping to spark an ideas discussion about this.

1 Like