angular seo优化详细记录

最近项目做seo优化，采用的是angular13 @nguniversal/express-engine 服务端渲染，我也是第一次做seo优化，记录一下优化要点。

一、路由优化

1、url要简短明了，只使用连字符分隔单词。

1
www.cicode.cn/tool-map

2、#后面的内容被默认是锚点，所以要去掉路由中的#号
使用h5 history路由策略，去掉url中的#

1
2
3
4
5
6
7
RouterModule.forRoot(routes, {
  useHash: false
})],

www.cicode.cn/#/blog/home
修改成：
www.cicode.cn/blog/home

3、路由传参，尽量用a链接，服务器端渲染时，会渲染成 <a href=""></a>。

1
2
3
<a [routerLink]="['/blog/detail']" [queryParams]="{id:414}"></a>
渲染之后：
<a  href="/blog/detail/?id=414"></a>

下面示例最佳：

1
2
3
4
5
6
7
{
  path:'detail/:id',
  component: BlogDetailComponent,
}
<a [routerLink]="['/blog/detail', 414]"></a>
渲染之后：
<a href="/blog/detail/414"></a>

4、a链接中，不想让爬虫访问的可以加nofollow

1
<a rel="nofollow"></a>

二、设置meta和title

title、meta在页面中必不可少，angular中可以通过监听路由或获取接口数据为他们赋值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 路由
{
  path:'detail/:id',
  component: BlogDetailComponent,
  data:{
      meta: 'meta信息'
  }
}
// 页面
import { Meta, Title } from '@angular/platform-browser';
constructor(
    private title: Title,
    private meta: Meta,
  ) {}

// 可以监听路由，设置mata标签和title标签
this.router.events.pipe(
  filter((evt) => evt instanceof NavigationEnd),
  takeUntil(this.unsubscribe$)
).subscribe((v: NavigationEnd) => {
  console.log(v)
});

this.title.setTitle('title')
this.meta.updateTag({ name: 'keywords', content: ''  })
this.meta.updateTag({ name: 'description', content: ''  })

三、生成 sitemap.xml 文件

方便爬虫爬取数据，可以定时生成sitemap.xml文件

格式如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<?xml version="1.0" encoding="UTF-8"?>
<urlset>
  <url>
    <loc>http://www.cicode.cn/blog/detail/414</loc>
    <changefreq>daily</changefreq>
    <priority>0.3</priority>
  </url>
  <url>
    <loc>http://www.cicode.cn/blog/detail/413</loc>
    <changefreq>daily</changefreq>
    <priority>0.3</priority>
  </url>
</urlset>

也可以向百度等手动推送数据。百度收录链接

四、生成 Robots.txt 文件

告诉搜索引擎应该爬取哪些文件，不应该爬取哪些文件。

robots.txt生成

五、angular 用服务器端渲染或预渲染

服务器端渲染文档

六、站长工具推荐

1、站长工具网站

seo综合查询
seo报告
ping检测
性能检测