如何在 Angular 2 中实现 SEO(元标签)(Angular 通用用于服务器端渲染)?

2024-03-20

我正在搜索一个关于 Angular 2 的 SEO 或元标签的完整工作示例,使用 Angular 通用在服务器端渲染(被 facebook、twiter 和其他元标签识别),但我没有成功。

我找到了多篇文章,但有不完整的(没有所有源代码可用)或最旧的(未使用最新版本编译):

a)blog.devcross.net/2016/04/17/angular-2-universal-seo-friend-website/ 注意:带有源代码的优秀帖子,但它不起作用。

b)builtvisible.com/universal-angular-2-server-side-rendering-seo-crawl-friendiness/ 注意:非常有用,但没有完整的源代码。

c) https://gist.github.com/kaaboeld/851bc3190eec67f6723c6054751ee2dc https://gist.github.com/kaaboeld/851bc3190eec67f6723c6054751ee2dc

注意:不完全有效的示例。可能是最好的方法..

d) https://github.com/angular/universal/issues/454 https://github.com/angular/universal/issues/454注意:它是 c 选项的变体,有一些修复...

你有完整的工作示例吗?

提前致谢


看看这个通用启动器 https://github.com/angular/universal-starter回购。在其他一些很棒的东西中,您可以找到角度元.ts https://github.com/angular/universal-starter/blob/master/src/angular2-meta.ts处理服务器端所有元标记的服务。您将需要按照中所述进行一些细微的更改这个问题 https://github.com/angular/universal-starter/issues/287为了让 t 工作。我认为这个解决方案仍然需要一些改进(例如,它在尝试更新时添加了另一个重复标签,但我相信可以修复)

可以找到类似的服务here http://blog.devcross.net/2016/03/20/angular-2-seo/,还没有尝试过,但看起来它与之前的概念相同,并且还利用了 Angular 的Title还可以设置页面标题的服务。

Update

另请检查This https://github.com/matiishyn/vs-seo/blob/master/src/angular2-meta.ts#L68修复 angular2-meta 服务。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Angular 2 中实现 SEO(元标签)(Angular 通用用于服务器端渲染)? 的相关文章

  • 发生未处理的异常:工作区中未设置配置“生产”

    您好 在 Angular 8 中创建了一个项目 最初它仅支持一种默认语言 US EN 然后我应用了本地化 在准备生产构建的本地化之前 我曾经给出以下命令 ng build prod base href Windchill com qiwkC
  • 获取“回调 URL 与 Auth0 不匹配”

    我有一个 Auth0 客户端 配置了以下回调 URL http 本地主机 4200 http localhost 4200 我可以正常登录 问题是当我导航到应用程序中的某个 URL 时 http localhost 4200 places
  • 如何在 ngrx/effects 中执行 if/else 操作?

    我正在使用 ngrx effects 我想根据以下情况分派不同的操作foo商店里的状态 这就是我现在正在做的 Effect foo1 this updates whenAction Actions FOO filter obj gt obj
  • 跨延迟加载路由创建共享模块

    我正在构建一个 Angular 11 应用程序并尝试创建一个SharedModule 我正在使用延迟加载 并希望避免在延迟加载的路由中多次加载公共模块 我创建了一个共享模块并将其导入到我的AppModule 根据我的理解 这个共享模块应该在
  • 正文中的元标签

    我试图在我的网站 www nacts com au 上添加 赞 按钮以添加到我们 Facebook 页面上的按钮 但收到以下消息 您的 这要么是因为您的格式错误并且它们在解析树中的位置较低 要么是您不小心将开放图标记放在了错误的位置 无论哪
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • 角度 4 单击按钮功能未触发

    我正在尝试检查文本输入是否为空或不在角度 4 中 我没有为此使用表单 这只是一个输入字段 当我在下面的按钮中执行 addLocaton 函数时 需要进行检查 我的输入字段
  • 资产未考虑基本 href url - 未找到错误

    我刚刚在 Webform 项目中复制了 Angular 构建脚本 并将该项目部署到 IIS 中 注意 我只复制了脚本文件 没有单独部署在 IIS 中 我已将 Angular dist 文件夹复制到 Webform 项目的 Scripts 文
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • 如何禁用 ng2-dragula 上的某些元素的拖动

    我想在顶部显示名称组并取消其上的拖动事件 如何禁用移动某些元素 例如该组名称位于顶部 我的代码是 dragulaService drag subscribe value gt console log drag value 0 我的模板 di
  • Angular2 viewContainerRef.createComponent 工作正常

    我使用 viewContainerRef createComponent 将动态组件加载到根组件 但实际上它附加了错误的位置 my code app compoment ts export class AppComponent privat
  • 从 Angular 11 更新到 12 时,MatSelect OverlayDir 现在是私有的。现在如何访问它?

    在 Angular 11 中 node modules angular material select 中有一个变量 Overlay pane containing the options deprecated To be turned i
  • 如何调试超时等待异步 Angular 任务?无法在角度页面上找到元素

    编辑 请注意 在 ernst zwingli 的帮助下 我找到了问题的根源 因此 如果您遇到相同的错误 他指出的修复之一可能会帮助您 我的问题是量角器本身的一个已知问题 如果您认为这可能是您 我已经扩展了我的步骤 以在我最初的问题之后查明问
  • 无法绑定,因为它不是选择器组件的已知属性

    我想将变量从一个组件传递到另一个组件 并且我正在使用 input 这是我的父组件 Component selector aze templateUrl aze component html styleUrls aze component s
  • `[(ngModel)]` 与 `[(value)]`

    有什么区别
  • Angular 2将数组传递给路由器queryString

    我想传递一个数组ids 1 2 3 像这样的路由器查询字符串 http some url ids 1 ids 2 ids 3 但是当我尝试使用 const queryParams ids 1 2 3 this router navigate
  • Angular 2 Material 2 日期选择器日期格式

    我不知道如何更改材料2日期选择器的日期格式 我已阅读文档 但我不明白我实际上需要做什么 datepicker默认提供的输出日期格式为f e 6 9 2017 我想要实现的目标是将格式更改为类似的格式9 Jun 2017或任何其他 文档htt
  • Angular 2 获取当前路线

    所以我需要以某种方式检查我是否在主页上执行某些操作 而在其他页面上则不执行此操作 该组件也在所有页面上导入 如果我在主页上 如何检测该组件 Thanks 尝试这个 import Router from angular router expo

随机推荐