在 MEAN 堆栈中动态生成 Open Graph 标签。 (Angular 2+)

Question

我将要为页面之类的项目详细信息生成不同的 OG 标签。我使用 Angular 的 https://github.com/nglibs/meta 模块为页面生成元标记，它在浏览器上运行良好，但 Facebook 的抓取器加载原始 index.html 文件，并且生成的标记中没有显示任何内容. 正如我研究的那样，应该有一些服务器端逻辑来生成元标记-s，而不是使用 JavaScript 来生成元标记，然后 Facebook 将能够使用正确的元标记。 MEAN 堆栈中是否有解决此问题的方法？（然后我不明白为什么要使用 @nglibs/meta 模块来生成 og 元标记，因为它们这样没用）

Answer 1

您可以使用 ejs 模板来呈现索引文件。像下面。要进一步研究 ejs，请遵循此 link

<!doctype html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0" />

    <link href="/css/somecss.css" rel="stylesheet" />

   
    <title>Your site</title>
    <meta content="<%- metaTagsDescription %>" name="description" />
    <meta content="<%- metaTagsRobots %>" name="robots" />
    <meta content="<%- metaTagsKeyWords %>" name="keywords" />

    <!-- Facebook meta tags-->
    <meta property="og:type"  content="<%- metaTagsType %>" />
    <meta property="og:title" content="<%- metaTagsTitle %>" />
    <meta property="og:image" content="<%- metaTagsImg %>" />
    <meta property="og:url"   content="<%- metaTagsUrl %>" />
    <meta property="og:description" content="<%- metaTagsDescription %>" />

    
</head>
<body >
    <section id="app"></section>
    <script src="/bundle.js"></script>
</body>
</html>

在 MEAN 堆栈中动态生成 Open Graph 标签。 (Angular 2+)

Dynamically generate Open Graph tags in MEAN stack. (Angular 2+)

angular

express

facebook-opengraph

meta-tags

dynamically-generated