如何在aurelia中设置SEO属性

How to set SEO attributes in aurelia

本文关键字：设置 SEO 属性 aurelia      更新时间：2024-04-16

这是我遇到的主要问题。我想为Aurelia应用程序页面设置社交共享按钮。

一般来说，我必须设置三个元标签对象：

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

在Aurelia处理这个问题的最佳方法是什么？是否可以使用Route对象执行此操作？

我只是通过编写一个服务来解决这一问题，该服务使用DOMneneneba API直接修改头部内容。没有办法很好地将头部内容绑定为视图。

以下是我的实现要点https://gist.github.com/dpix/6f508727b9d03d692d0659eb1776ad85

您是否研究过在路由本身上使用settings属性？这是一个可以为特定路线指定数据的对象，我个人用它来为使用Aurelia生成的菜单指定图标，但它可以用于任何事情。

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;
}

现在要访问settings对象，您将在路由视图模型中定义一个名为activate的回调方法，该方法接收3个参数。第一个是任何路线参数，第二个是当前路线的路线对象本身。

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

现在在视图模板HTML中，您可以执行以下操作：

${image}和${description}，以获得您在直接从当前路线获取的视图模型中设置的上述值。

相关文章：