Angular 基础知识规整之mate标签优化

发布日期 目录 Angular

都知道,做网站,经常需要一些优化,来提高搜索排名,可是对于angular2呢,大家都不知道该如何优化,那今天来说一下,对于Angular的基础优化,对于网页的基础优化呢,主要说title、meta标签的优化,让其可以针对不同的页面,来显示不同的内容。

比如:对于一个单纯的页面,那页面的title标签内容就是该页面的标题,meta标签的的内容也是对应该页面的内容,那我们怎么来做到这样呢?

很简单。假如你现在已经有了个带路由的项目,可以跳转不同的页面,现在我们在不同的页面开始设置我们的seo。

因为每一个页面都对应着一个 component,我们在页面对应的组件里面设置就可以了

首先再组件中导入用到的模块

import { Title, Meta } from '@angular/platform-browser';

然后在构造其函数中注入模块中用到的方法

constructor(
    title: Title,
    meta: Meta
){}

然后在构造器中设置我们的数据

constructor(
    title: Title,
    meta: Meta
){
    title.setTitle('首页');
    meta.addTags([
        {
            name: 'author', content: 'seebin'
        },
        {
            name: 'keywords', content: 'home ,angular,seebin,unipay,ng4'
        },
        {
            name: 'description', content: 'this is home page!'
        }
    ])
}

不同的页面分别设置不同的数据,那这样每个页面显示的 title 与 meta 标签都分别显示不同的内容。

每个页面都设置好后,运行项目,到浏览器按F12 查看 title 与 meta 标签的内容是否设置成功。

原文地址: http://blog.seebin.com/2017/08/18/angular-seo/

参考地址:
Make your Angular App SEO-Friendly (Angular 4 + Universal)

发表评论

邮箱地址不会被公开。