Correct Title and Meta Description for SPA

Loving the routing system, specifically the idea of a SPA, I had a go at being able to dynamically show the page Title and Meta Description tags. This is extremely important for SEO.

Firstly, the reason I like the idea of SPA is because, for simple static sites, it is so easy to modify and maintain. The index page acts as a sort of template with all of the dependent files in one place.

To dynamically populate the name tags, we firstly need a database in the form of a JSON file. The file will look similar to

{
“list”: [
{
“id”: “/”,
“title”: “Welcome to Wappler Web Solutions”,
“description”: “With the vast knowledge of web techniques that Wappler Web Solutions has acquired over two decades of web design, we are able to meet the most demanding needs without the corporate price tag.”
},
{
“id”: “/about”,
“title”: “A Wappler based web solutions company”,
“description”: “Wappler Web Solutions strives to develop quality web sites, using the latest available visual and Search Engine Optimisation techniques at an affordable price.”
},
{
“id”: “/contact”,
“title”: “Contact Wappler Web Solutions now!”,
“description”: “We’d love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day every day.”
}
]
}

To be able to place the dynamic data inside the tags, we need to apply App Connect to the page rather than to the body.

image

We need to know the path name so that we can filter our data source. Add the Browser component to do that for us.

Next, we attach a data source to the document

image

and a data view that is filtered on the value of the Browser location pathname

image

All that remains is to populate our tags. For the Title, this is a matter of going to the DOM panel and inserting Inner Text under Dynamic Attributes

For the Meta Description, you will need to get your hands dirty and do a bit more coding. The final code will look like

<title dmx-text="dvMetaTags.data[0].title">Untitled Document</title>
<meta name="description" content="" dmx-bind:content="dvMetaTags.data[0].description">    

For a demo, go to https://hollandtrade.com.au/

I hope you guys don’t mind if I do not keep saying: ‘I love Wappler’ :love_you_gesture:

9 Likes

If you add the App Connect Browser component, it has all the url and pathname properties that you can directly use as data binding and no additional script is required :slight_smile:

1 Like

Thank you @George, I had thought of that. This is one of my biggest problems with Wappler, I continually overthink the process while Wappler already has a point and click method. Did I say I love Wappler?

I’ll redo the ‘How To’ to reflect the Wappler way.

Edit: Done

5 Likes

Thank you Ben for sharing. Just what I was looking for.

1 Like

ok, so I’m a bit confused here. The data has to be in JSON to get it to work with dynamic title and meta description? I can’t just create a server connect to my data and link it that way?

well scratch that. I reread Bens post. I needed to set to page instead of document in the app root. Its working now!

I guess I just don’t quite understand the difference between page and document for app root???

There are 2 choices App Root: Body OR Page

Body means that all your dynamic data like {{name}} will only render if it is placed between the HTML <body>{{name}}</body> tags. It will ignore anything not wrapped inside the body tags.

Page means that all dynamic data like {{name}} will be rendered anywhere on the page, in the body or the head or outside the head too, which if you need dynamic page titles and descriptions placed in the head tags, then you have to use page as your App Root.

2 Likes

makes sense! Thanks for the clarity

Here I have used a different data source:

2 Likes

For those interested this video and the following 2 deal with dynamic SEO tags under node