如何在 aurelia 中设置 SEO 属性

Question

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

一般来说，我要设置三个meta标签对象：

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

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

Answer 1

您是否研究过在路线本身上使用设置属性？这是一个对象，您可以在其中指定特定路线的数据，我个人用它来指定使用 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;
}

现在要访问设置对象，在您的路由视图模型中，您将定义一个名为 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} 获取您在视图模型中直接从当前路线获取的上述值。

Answer 2

我通过编写一个直接使用 DOM API 修改头部内容的服务来解决这个问题。没有办法很好地绑定到头部内容作为视图。

这是我的实施要点 https://gist.github.com/dpix/6f508727b9d03d692d0659eb1776ad85

如何在 aurelia 中设置 SEO 属性

How to set SEO attributes in aurelia

javascript

meta

seo

aurelia