Page Source 中的 DOM 和 Inspect Element i 的区别答案

【问题标题】：Difference between DOM in Page Source and Inspect Element iPage Source 中的 DOM 和 Inspect Element i 的区别
【发布时间】：2025-12-08 04:40:01
【问题描述】：

我想向我的一个页面添加元标记。但是，我使用的是 CMS (ocotberCMS)，它只允许我访问页面的正文。我试图将元标记添加到标记中，如下所示：

<meta name="robots" content="noindex, nofollow, noarchive">
{% partial "temp-partial" %}

页面源和检查元素中的结果不同：

页面来源：

<meta name="robots" content="noindex, nofollow, noarchive">
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>

检查元素：

<html>
   #shadow-root
<head>
<meta name="robots" content="noindex, nofollow, noarchive">
</head>
<body>
<div>
    .......// the body of the page generated by {% partial "temp-partial" %}
</div>
</body>
</html>

我读到有必要根据 HTML4++ 文档将元标记添加到标题中。我想知道这是否意味着它会在上述情况下工作还是不会？

【问题讨论】：

是否有原因只能访问页面的正文？如果您对十月有管理员访问权限，那么您也应该能够访问布局。如果您没有足够的管理员权限并且管理员很乐意为您插入元标记，那么您可以要求他们为您添加一个占位符 (octobercms.com/docs/markup/tag-placeholder)。如果您说这些情况中的哪一个适用，我可以为您写一个完整的答案。
@Joseph 谢谢，我不知道我怎么错过了placeholder 标签。在我的情况下，这是一个非常有用的。我只在一个页面中定义了标签。（我不想对搜索引擎隐藏我的整个网站）
没问题。我也将其发布为答案。

标签： html meta-tags octobercms

【解决方案1】：

页面源是您在创建网站时看到的。

检查元素源包括生成的数据，例如附加样式属性、数据库导出等。

至于您的问题，请尝试使用 Jquery 并在头部附加 (http://api.jquery.com/append/) 元标记。

【讨论】：

所以根据你所说的检查元素告诉我浏览器会看到什么。正确的？这样留下标签不是可以的吗？或者那可能行不通？
没错。说到在正文中附加元标记是无效的，它可能会导致错误（来源：堆栈）因此浏览器可能会自动删除它
我明白了。还有一个问题。如您所见，元标记适用于搜索引擎。在这种情况下搜索引擎会如何表现？类似于网络浏览器？或者它会在页面的任何位置看到元标记？
搜索引擎只读取头部内的数据和身体内的少数其他标签（主要是 h1 和 h2 标签）。因此，它可能会忽略 head 标签之外的元标签。

【解决方案2】：

您可以在模板布局中编辑头部。转到CMS -> Layout -> default.htm 并在那里添加元标记。

实际的布局文件名可能不同，但如果您查看那里的 html，您应该会看到哪个是主布局文件。

【讨论】：

正确。但是，这会将元标记添加到我的整个网站。但我只需要一个页面。我读到搜索引擎不会忽略该标签。所以应该没问题
然后您可以添加一个 if 条件来检查该特定页面。这是一种 hack，但它非常直接且易于理解

【解决方案3】：

OctoberCMS 有一个“占位符”功能，非常适合您尝试做的事情：

https://octobercms.com/docs/markup/tag-placeholder

您可以像这样在 HTML 布局中使用它：

<html>
     <head>
         <meta name="robots" content="noindex, nofollow, noarchive">
         {% placeholder meta %}
     </head>

     <body>
         {% page %}
     </body>
</html>

然后，稍后在任何页面中：

{% put meta %}
    <meta name="robots" content="noindex, nofollow, noarchive">
{% endput %}

{% put %} 标记之间的内容将在编译时放在布局中{% placeholder %} 所在的位置。

【讨论】：

【解决方案4】：

您在检查器 DOM 树的 <head> 部分中看到 <meta name="robots" content="noindex, nofollow, noarchive"> 而它位于源代码的 <body> 部分并查看页面源代码的原因是因为检查器 DOM 树是已经已被您的浏览器解析。

由于浏览器愿意接受所谓的“标签汤”（HTML 的语法和布局不正确）并简单地猜测它应该如何工作；您的浏览器将向您显示的检查器 DOM 树已经是浏览器对代码应该是什么的最佳猜测；无论该代码的实际有效性如何。

所以，本质上，当您查看源代码时，您在正文中看到元标记的原因是因为它实际上是在哪里。您在检查器的 head 部分中看到它的原因是浏览器已经猜到 head 部分是元标记的正确位置。

要将其实际添加到您的头部（应该让机器人实际看到它），您需要编辑您的 CMS 布局。如果您无权访问 CMS 菜单或 Layouts 子菜单，则您的用户帐户没有权限，您必须与构建您的网站的人联系或在 IRC 中寻求进一步帮助（freenode.net - #october) 或 Slack。

【讨论】：