哎呀， 今天我们要讲的是Angular里面的Meta标签，这个东西真的很重要，如果你想让你的网站在谷歌或者百度上面被搜到，你就得好好看看这篇文章。虽然我也不是很懂，但是我知道SEO就是搜索引擎优化，对吧？反正就是让爬虫能看懂你的网站。但是Angular这个东西， 它是单页应用，也就是SPA，这玩意儿对SEO不太友好，主要原因是它是用JavaScript动态生成内容的，爬虫有时候看不懂。

什么是Meta标签啊？

我比较认同... 先说说我们得搞清楚Meta标签是个啥。简单就是放在HTML头部的那些看不见的标签，用来告诉浏览器和搜索引擎这个页面是干嘛的。比如description啊，keywords啊之类的。如果你不写这些，搜索引擎就不知道你的页面讲的是什么那你的排名肯定就上不去。

你可以参考Open Graph协议官方网站了解更多关于社交媒体分享Meta标签的标准。这个Open Graph就是Facebook搞出来的， 抄近道。 为了让你的链接分享到社交平台的时候好看一点，有图片有标题什么的。

Angular应用的大问题：客户端渲染

在Angular应用中， 直接通过客户端JavaScript动态添加或更新Meta标签，对于搜索引擎爬虫和社交媒体机器人来说是无效的， 又爱又恨。 主要原因是它们通常不施行JavaScript，只解析初始HTML。要实现动...

这真的是个大麻烦。你看下面的代码，这是很多人喜欢写的：，我倾向于...

import { Component } from '@angular/core';
import { Meta } from '@angular/platform-browser';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: 
})
export class AppComponent {
  constructor {
    // 在构....在Angular应用中,直接通过客户端JavaScript动态添加或更新Meta标签,对于搜索引擎爬虫和社交媒体机器人来说是无效的,主要原因是它们通常不施行JavaScript,只解析初始HTML。要实现动...
    this.metaService.addTag;
  }
}

这段代码在浏览器里跑的时候是没问题的， 你打开F12一看，Meta标签确实在那里。但是！爬虫不是人啊，它不会像浏览器那样去跑你的JavaScript。它只看服务器返回的第一手HTML。如果你的HTML是空的， 只有一堆``，那爬虫就傻眼了它什么都看不到。

尽管这段代码在浏览器中运行时可以成功地将Meta标签添加到DOM中， 但当爬虫访问时它们只会看到类似如下的初始结构：

看到了吧？动态添加的Meta标签并未包含在初始响应中，所以呢对SEO和社交分享预览是无效的。 看好你哦！ 这就像你做了一桌子好菜，但是没端上桌，客人根本吃不到。

那怎么办呢？用Angular Universal啊！

文章阐明了客户端meta服务在seo方面的局限性,并重点介绍了如何通过服务器端 开搞。 渲染,特别是利用angular universal,实现动态且对爬虫友好的...

要为Angular应用的不同页面提供动态的Meta标签， 实现SEO友好和准确的社交分享预览，服务器端渲染是唯一的有效解决方案。Angular官方提供的SSR解决方案是Angular Universal。

Angular Universal的工作原理：当用户或爬虫请求一个页面时 Angular Universal会在服务器端施行Angular应用，并生成一个完全渲染好的HTML页面。这个HTML页面包含了所有动态内容，包括通过Meta服务设置的Meta标签。然后这个预渲染的HTML被发送到客户端，多损啊！。

盘它... 和社交分享,核心策略是采用服务器端渲染,比方说angular universal,以确保meta标签在页面加载时即已存在于html源码中。.doctype html html lang= en head meta charset= utf-8 title 我的Angular应用 /title base href= / meta name= viewport content= width=device-width, initial-scale=1 link rel= icon type= image/x-icon href= favicon.ico !-- SEO Meta Tags -- meta name= description content= 这是一个关于Angular应用开发的教程。 meta name= keywords content= Angu...

等着瞧。 这听起来是不是很高级？其实就是在服务器上先把页面跑一遍，生成HTML再发出去。这样爬虫一来直接就能看到完整的页面了包括Meta标签。

怎么用代码实现动态Meta标签？

当这个组件在服务器端渲染时方法会确保这些标签被正确地添加到服务器生成的HTML中，说到点子上了。。

我傻了。 以下面的Angular组件代码为例， 尝试在组件的构造函数或ngOnInit生命周期钩子中添加Meta标签：

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';
import { ActivatedRoute } from '@angular/router';
@Component({
  selector: 'app-product-detail',
  template: `
{{ product?.description }}
`
})
export class ProductDetailComponent implements OnInit {
  product: any;
  constructor {}
  ngOnInit {
    // 假设这里从路由参数或者服务获取数据
    this.product = { name: '超级商品', description: '这个商品非常好' };
    // 然后设置Meta标签
    this.meta.updateTag;
    this.meta.updateTag;
  }
}

就这样吧... 你看，代码其实差不多，还是用那个`Meta`服务。但是主要原因是有了Angular Universal， 这些代码是在服务器上跑的，所以生成的HTML里就有这些标签了。爬虫一看，哎哟，不错哦。

如果你不想用SSR怎么办？

深得我心。 如果您的Angular应用是一个小型网站， 且所有页面的Meta标签内容都可以保持一致，那么最简单的做法是将这些Meta标签直接写入项目的src/文件中。

这种方法确保了Meta标签始终存在于初始HTML中，爬虫可以正确读取。只是 它的主要局限性在于所有页面都将共享相同的Meta标签，这对于需要为不同内容提供独特SEO信息和分享预览的动态网站是不可接受的。 可不是吗！ 也就是说你全站都叫“我的网站”，那谁还知道你哪个页面是卖苹果的，哪个是卖香蕉的？

一些乱七八糟的代码片段和别的知识

既然我们在讲技术， 我就顺便把我的笔记贴上来吧，虽然跟Meta标签没啥大关系，但都是Angular相关的，大家凑合看，走捷径。。

嗐... 1 !DOCTYPE html 2 html ng-app= MyApp 3 head 4 meta charset= utf-8 / 56 title 数据正向绑定 /title 78 script type= text/javascript src= jquery-1.8.3.js /script 9 script type= text/javascript src= angular.js /script 1011 /head 12 body 1314 div ng-controller= TestCtrl 15 input type= ....这份文档如其名,是我自己学习 ng 的过程记录。

只是过程记录,没有刻意像教程那样去做。所以呢 太坑了。 ,从前至后,中间不免有一些概念不清不明的地方。

蚌埠住了！ ng-app :告诉angular核心它管理当前标签所包含的整个区域,并且会自动创建根作用域对象. script type= text/javascript src= ../../js/angular-1.5.5/angular.js /script script type= text/javascript //创建当前应用的模块对象 var model = angular.module; model.controller{ $scope.myName = 'luneo'; }); model.controller(....

我个人认为... AngularJS提供了以下功能,使开发Web应用程序变得容易: 双向数据绑定 依赖注入 自定义HTML指令 使用$ http,$ resource,Restangular等轻松与REST Web服务集成 测试支持 还有很多… 尽管功能比上面列出的要多,但这些是非常常用的...0.... !-- 将一个标签和控制器进行绑定,控制器中的数据,就可以使用在这个标签的内部了-- .

造起来。 自定义select加搜索查找angular js,支持动态,支持select标签.1 select ng-model= role_id1 ng-model= role_id 2 option value= --请选择-- /option 3 option value= 1 系统管理员 /option 4 option value= 2 片区管理员 /option 5 option value= 3 终端代表 /option 6 /select .

将心比心... 第一步,通过script标签载入angular.min.js框架放入body标签中;.公共的部分抽取成服务,让控制层来调用,而不是继承 html: !doctype html html ng-app= MyModule //相当于java 中的main函数 head meta charset= utf-8 /head body hello/hello.

麻了... 你可以通过以下代码引入FormsModule模块: import { FormsModule } from '@angular/forms'; 然后,在你的HTML模板中， 你可以使用 input 元素来创建一个输入框，并使用指令来绑定输入框的值到组件中的一个变量.今天主要学习了列表渲染和key的作用和原理,先来说说列表渲染,顾名思义想要渲染列表最快的方式就是使用for循环,我们要学习的就是Vue中对标签实现for循环的语法,它和我们传统的js语法有些不同,它是...

等等，上面那段好像混进了Vue的东西？算了不管了反正都差不多，换句话说...。

一下

由于爬虫接收到的是一个已经包含所有内容的完整HTML文件， 它们可以正确地解析并提取出动态设置的Meta标签，从而实现：

在现代Web开发中，特别是单页应用如Angular构建的应用，页面内容的渲染通常依赖于客户端JavaScript的施行。只是搜索引擎爬虫和社交媒体爬虫在抓取页面时其行为与普通浏览器用户有所不同。它们通常只会解析服务器返回的原始HTML文件，而不会完整施行所有的JavaScript代码。这意味着， 如果Meta标签是在JavaScript加载并施行后才动态添加到DOM中的，爬虫将无法“看到”这些标签，我持保留意见...。

所以结论就是：如果你想做SEO，就用Angular Universal。如果你不想用，那就只能接受你的网站在搜索引擎里排名很低的现实了。或者你可以试试预渲染，那个比SSR简单一点，但是也是有点麻烦的。

再说说 再补充一点不相关的东西，我最近发现了一个工具叫NTLite，是Windows 系统优化安装工具 NTLite 1.8.0.6790 + x64中文企业版.zip，挺好用的。还有那个meta标签中的http-equiv属性.sshcommand, 将SSH变成专门针对你的应用程序的瘦客户机 sshcommand简化通过SSH运行的单个命令,并管理授权密钥和用户以便这样做.，恳请大家...

好了 文章写完了希望能帮到大家。虽然写得有点乱，但是大概意思应该都在那里了。大家凑合看吧，反正我是尽力了，观感极佳。。