seo Question posted in
Some basic information to get you started with this can be found here.

How to set SEO attributes in aurelia

Here is the main problem I’m having. I want to set social share buttons to an Aurelia application page.

In general, I have to set three meta tags objects:

head title
[property="og:image"]
[property="og:description"]

What is the best way to handle this in Aurelia? Is it possible to do this using the Route object?

Tags:

2

Answers


  1. 0

    Have you looked into using the settings property on a route itself? This is an object where you can specify data for a particular route, I personally use it to specify icons for menus generated using Aurelia, but it can be used for anything.

    configureRouter(config, router) {
    config.title = 'Test Route';

    config.map([
        {
            route: ['', 'welcome'],
            name: 'welcome',
            moduleId: './welcome',
            title: 'Welcome',
            settings: {
                image: '/images/someimage.png',
                description: 'This is my social share description for this route.'
            }
        }
    ]);

    this.router = router;
}

    Now to access the settings object, inside of your route viewmodel you will define a callback method called activate this method receives 3 parameters. The first one is any route parameters and the second is the route object itself for the current route.

    export class MyViewModel {
    image = null;
    description = null;     

    activate(params, routeMap) {
        if (routeMap.settings) {
            this.image = routeMap.settings.image;
            this.description = routeMap.settings.description;
        }
    }
}

    Now inside of your view template HTML, you can do this:

    ${image} and ${description} to get the above values that you set inside of your viewmodel taken directly from the current route.

    Login or Signup to reply.
  2. 0

    I got around this by just writing a service that modifies the head content directly using the DOM API. There is no way to nicely bind to the head content as a view.

    Here is a gist of my implementation
    https://gist.github.com/dpix/6f508727b9d03d692d0659eb1776ad85

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search