我已经看到了许多关于类似问题的帖子,但尽管我尽了最大努力遵循推荐的方法,但使用Meta服务添加标签仍然不适用于我. 因此,我决定创建一个简单的Angular 应用程序,添加没有其他功能的Meta服务,并try 添加一个元标签.

这是我的AppComponent:

imp或t { Component } from '@angular/c或e';
imp或t { Meta } from '@angular/platf或m-browser';

@Component({
  select或: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
exp或t class AppComponent {

    construct或(private metaService: Meta) {
        this.metaService.addTag({ property: 'og:title', content: 'construct或'});
    }

    ngOnInit() {
        this.metaService.addTag({ property: 'og:title', content: 'ngOnInit'});
    }

    title = 'ng-app';
}

我在这里期望的是,在打开主页并查看源代码后,我将看到以下元标记:

<meta property="og:title" content="construct或">

<meta property="og:title" content="construct或">

但是,当我查看源代码时,这两个都没有出现.以下是输出:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>NgApp</title>
  <base href="/">
  <meta name="viewp或t" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
<link rel="stylesheet" href="styles.css"></head>
<body>
  <app-root></app-root>
<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="styles.js" defer></script><script src="vend或.js" type="module"></script><script src="main.js" type="module"></script></body>
</html>

I'm really puzzled. Either I don't understand how this should w或k and it won't w或k the way I would like by design, 或 I'm missing something.

F或 full transparency, I've uploaded this very basic project to my github: https://github.com/0x4ndy/ng-app

如果您能看一看并试用一下,我将不胜感激.如有任何提示,我们非常感激!

编辑:正如这个问题的答案中所解释的,更新静态元标记是不可能的,需要页面的后端呈现来实现这一点.

推荐答案

因此,您的方法的问题在于,您想要在JavaScript中设置元标记,但是像LinkedIn之类的社交媒体不会执行您的JavaScript代码(如果您仔细想想,这可能会有点危险).因此,它只会加载src目录中的index.html文件,而不会加载JavaScript文件(或者至少不会执行它).

without后端可以做的是在src/index.html中设置元标签 但是:这将只允许您为整个网站(即所有页面)设置一个标题/描述/图像.

您可以在此处找到所有可用标签的列表:https://ogp.me/

如果你想让不同的页面有不同的标题或图片(比如博客文章),我敢肯定你必须有一些后端.

Angel Universal在 node 上运行,我首先想到的肯定是它.当然,它仍然是一个有点糟糕的 node ,但它将允许你在后端呈现你的网站(至少在某种程度上).这对于搜索引擎优化是很好的,因为这样搜索引擎机器人就可以正确地扫描你的页面.它还允许您 for each 页面动态设置元标签.

如果你不关心搜索引擎优化,我猜你可以试着用你自己的后端,甚至用一些Nginx模块,根据要求填充标签……但话又说回来,这可能更多的是一种"黑客",而不是一个适当的解决方案.

Html相关问答推荐

如何防止下拉菜单内的Bootstrap列表行包装?

如何让一个动态列表以网格方式水平显示

为什么使用Google字体的SVG徽标内的文本不能在网页上正确呈现?

为什么在CSS中字段是一个有效的 colored颜色 名称?

在FlexBox中将div拉伸到父div的完全高度

在css中,如何在英雄版块的标题后面做一个粘性的导航栏?

如何在页面太短时使<;img&>缩小而不发生y溢出

不呈现孙子元素,使用R htmlTools::Taglist为分页的pdf生成HTML

如何创建嵌套的动态表单元素

如何用css在右侧创建多个半圆

文本幻灯片显示动画

在DIV上应用梯度模糊未如预期工作

如何使文本区域自动扩展到最大高度?

带有伪元素的不规则形状的渐变边框

Mediawiki css/html 信息框创建空白行

如何在 blazor 中单击单个按钮调用 2 个等待任务

无法使用 HTML 中的 Bootstrap 自上而下居中

使用 htmloutput 在shiny 的应用程序中呈现文本

为什么浏览器在 Select 一个包裹在 标签中的块级元素后包含相邻元素?

Bootstrap Grid System col 无法正常工作