如何解决Angular SEO 如何正确实现动态标题和元数据?
我有一个关于 Angular 标题和元的小问题。我已将库导入到我的 angular 中。我在这样的 .ts 文件的构造函数中设置了我的标题和元描述(当然,每个页面的标题和描述都不同);
//To set the title
this.titleServ.setTitle("SOME TITLE HERE")
//To set the meta
this.meta.addTag({name: "description",content: "SOME DESCRIPTION HERE"})
当我通过 IIS 运行我的网站并从浏览器检查时,我仍然看到这样的内容;
<title></title>
<base href="/">
<meta name="viewport" content="width=device-width,initial-scale=1">
如前所述,我无法从源代码中看到我的页面标题或页面描述(但我可以从谷歌搜索和谷歌浏览器标签中看到它)。我目前正在尝试设置搜索引擎优化。这里面有什么问题吗?我的意思是我看到的所有教程都可以从该部分看到他们的页面标题,也可以看到元数据。
我做错了什么,或者我需要做些什么才能使网站通过某些关键字搜索在 google 中可见?
解决方法
Angular 默认是一个客户端应用程序。当您提供应用程序并查看 HTML 源代码时,您实际上会获得位于 index.html
根目录中的 src
源代码。
对于 SEO,您需要在服务器上呈现页面。这样,当浏览器接收到 HTML 时,它会预先呈现某些数据元素,包括与 SEO 相关的标签/内容。
这是关于如何将服务器端渲染(Angular Universal)添加到您的应用程序的官方指南:https://angular.io/guide/universal
关键部分是,要进行服务器端渲染,您需要使用专用命令(例如默认情况下 npm run dev:ssr
)启动您的应用。这将启动节点,它将在服务器端处理请求。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。