logo标签列表

如果文档正文中存在元标签会发生什么？

htmltemplatesasp-classicseometa-tags
70

我正在开发一个ASP应用程序，但代码、模板和文件的组织方式不允许我修改body标签之外的任何内容。所以我考虑将meta标签插入到body内部，像这样：

<!-- FEW ASP INCLUDES -->
<html>
    <head>
    <!-- FALLBACK TITLE AND DESCRIPTION -->
    <title>Default Title</title>
    <meta name="description" content="Default Description">
</head>
<body>
    <!-- SOME HTML MARKUP -->
    <div class="dynamic-content">
        <!-- InstanceBeginEditable name="dynamic-content" -->
        <!-- THIS IS WHERE I CAN WRITE ASP CODE -->
        <title><%= Page.Meta.GetTitle( yada, yada ) %></title>
        <meta name="description" content="<%= Page.Meta.GetDescription( yada, yada ) %>">
        <!-- InstanceEndEditable -->
    </div>
    <!-- SOME MORE HTML MARKUP -->
</body>
</html>

我想知道在HTML文档的标签中放置标签的效果如何。它会对以下方面产生什么影响：

  1. 搜索引擎
  2. 浏览器
10个回答
53

这当然是无效的，根据HTML4.01规范，META标签只允许在HEAD中使用，就像TITLE一样。因此，将其放在BODY中会创建一个无效的标记。

从简单的测试来看，一些浏览器（如Firefox 3.5和Safari 4）在创建文档树时实际上将这些元素放到了HEAD中。这并不是很令人惊讶：众所周知，浏览器会容忍并尝试解释各种各样的损坏标记。

拥有无效标记通常不是一个好主意。浏览器的非标准处理可能导致多种难以确定的呈现（和行为）不一致性。最好遵循标准，而不是依赖于浏览器的猜测。

我不知道搜索引擎对这种混乱的标记会有什么反应，但我不会冒险去尝试找出答案 :) 也许他们仅解析头部标记以获取某些信息，并完全跳过包含在正文中的标记。或者他们认为这是一些恶意的尝试，并将黑名单页面包含这种标记。谁知道呢。

底线是——尽可能避免使用这种方法。

2
唉，我得重新整理所有的代码了。如果有任何建议能让这个过程少一些痛苦，将不胜感激。 - Salman A
52
如果您使用的是HTML5，则允许在<body>标签内使用<meta>标签，只要存在itemprop属性即可。请参阅规范。 - Husky
1
在规范中找不到，但 w3.org 验证器还允许在使用 html5 时使用带有 property（rdfa-lite）属性的 meta 标签。 - Michael Lawton
33

底线是尽可能避免这种情况在DOCTYPE禁止时。我认为在使用微数据的情况下，在HTML5中绝对是被允许的并且非常有用的。例如：http://schema.org/Event

W3S 表示 <meta> 必须始终位于 <head> 中：http://www.w3schools.com/tags/tag_meta.asp，但是我在HTML5规范中没有看到这一点：https://www.w3.org/TR/html5/document-metadata.html#the-meta-element。尽管如此，我仍然会出于完全相同的原因使用它们：添加元数据（到博客文章）。似乎可以很愉快地验证。 - Ken Sharp
虽然我刚意识到我被迫使用XHTML，所以我不太确定。我绝对更喜欢纯HTML5！ - Ken Sharp
如果HTML5允许在标签y内使用标签x，那么XHTML5也允许在标签y内使用标签x。最大的区别是XHTML5必须是有效的XML（即没有未关闭的标签），这使得它比HTML更容易解析。 - RavuAlHemio
11
如果你的目的是搜索引擎优化，那么最好遵循标准并将所有的meta标签放在标签中。然而，就浏览器行为而言，如果你将标签放在标签中，它们仍然可以正常工作。我决定使用多个标签和标签在一个符合标准的文档中进行测试。</br><div class="h-2"></div>我的测试结果：</br><div class="h-2"></div>Firefox 18、Firefox 3.6、Firefox Mobile、Chrome 24、Chrome for Mobile、Opera 12、IE6、IE8、IE10：</br><div class="h-2"></div>1. body中的所有<meta>标签都被处理了。 2. 文档中的第一个<title>标签被处理了，即使它在body中也是如此。后续的<title>标签被忽略了。 3. 最早的meta refresh指令生效，这意味着两者都被处理了。</br><div class="h-2"></div>IE9：</br><div class="h-2"></div>1. 与上述情况相同，除了body中的所有<title>标签都被忽略了。 2. 在IE9标准模式下，IE10的行为也是如此。 3. 在IE8标准模式下，IE9的行为与IE8相同，允许body中有1个<title>标签。</br><div class="h-2"></div>那么，在body中使用meta标签会发生什么？总体上，它们似乎运行良好。meta标签可能会被处理，所以如果你不能把它们放在head中，那么就不要太担心。
请注意，您必须使用反引号 ` 将 HTML 代码块括起来，以便它们能够被字面显示。 - Andrew Barber
6

我不建议这样做。那些标签不应该放在那里，搜索引擎可能会将其视为垃圾邮件。如果您可以重新组织母版页，您总是可以在头部区域添加一个内容占位符。我曾经用以下方式轻松实现过：

<asp:ContentPlaceHolder ID="HeadTags" runat="server" />

这样，您可以在页面头部添加任何您想要的内容：
<asp:Content ID="Whatever" ContentPlaceHolderID="HeadTags" runat="server" >

    <meta ... >

</asp:Content>
1
不过这并不是经典的ASP解决方案。 - AnthonyWJones
2
不，可能不是。但作为糟糕的答案来说，它不仅在生产中运行良好，而且还有四个投票。 - John Lockwood
经典的ASP解决方案...这就是问题的本质！ - Salman A
6
标签可以在HTML的任何地方添加。
网络爬虫可以读取它们，但唯一的问题是当你不得不通过Facebook Messenger、WhatsApp等应用程序分享页面时。
这些应用程序只能读取标签中存在的标签。因此，如果将标签的og:image、og:description属性放置在标签内，则不会被读取，因此在此类应用程序中分享时不会显示。
如果仅用于SEO目的，可以在任何地方添加标签，但建议仅在标签内添加。
4
一些针对搜索引擎的元标记在页面正文部分将不被搜索引擎所采纳。例如，Google表示它不会在页面正文部分采用rel=canonical，而只会在页面头部采用。以下是来自Google的Matt Cutts的原话：（点击此处查看）：“我们不允许在正文中使用rel = canonical（因为如我所述，人们会滥用它）。请注意，这是一种黑帽SEO技术。”
3

我建议你使用它。我在各种网页的正文中发现了meta标签，并且它们在谷歌搜索的前十名之一。至少对我来说，这表明搜索引擎不介意你使用这种方法。

如果没有其他办法，你必须继续前进。

0

在网站中使用META描述标签是无效的标记，但这并不是一个很大的问题，因为搜索引擎可以随时找到标签。我的网站也是这样做的，请查看我的HTML代码

http://cameras.specced.co.uk/compare/268/Canon_EOS_200D

网站的META标签位于BODY中，但已被Google索引，并且页面的META描述已设置为Google搜索结果中的点击文本。

链接已失效。 - Daniel
0
我已经将一些元标签放入正文中，但这是因为Microdata技术的原因。当我没有一个常规元素来描述对象时，我会根据schema.org词汇设置一个包含此内容的元标签。相比于使用display:none的方式，我更喜欢这种方法。据我所知，使用display:none的方式可能会导致更多的谷歌问题。我同意这不是最佳实践，但当我验证我的文档（HTML5）时，我通过了零错误的验证。我已经在几个项目中使用了这个技巧，它们都没有遇到过谷歌或其他搜索引擎的问题。即使是Microdata也可以提高搜索引擎排名。我不知道你想用这些元标签做什么，因为我在你的代码中没有看到任何Microdata。如果你需要它来支持这种方法，我认为这是可以的，但在其他情况下，元素必须放在头部区域！
0

关于SEO，如果您想禁用HTML的某个部分不被索引，您需要将它们添加到body中：

来自chat.openai.com

可以防止搜索机器人索引HTML页面的特定部分，同时允许其他部分被索引。您可以通过使用机器人meta标签或nofollow属性来实现这一点。

机器人meta标签允许您为搜索引擎爬虫指定指令。其中一个常用的指令是noindex，它告诉搜索机器人不要索引指定部分内的内容。以下是如何使用机器人meta标签防止索引的示例：

<head>
  <meta name="robots" content="index,follow">
</head>
<body>
  <!-- Content to be indexed -->
  <div>
    <h1>Indexable Content</h1>
    <p>This content will be indexed by search engines.</p>
  </div>

  <!-- Content not to be indexed -->
  <div>
    <h1>No Index Content</h1>
    <p>This content will not be indexed.</p>
    <meta name="robots" content="noindex,nofollow">
  </div>
</body>

在这个例子中，头部区域的第一个meta标签允许搜索引擎索引并跟踪页面上的链接。而"No Index Content"部分内的第二个meta标签则指示搜索机器人不要索引该特定部分。
如果这个答案是使用OpenAI创建的...你最好很快删除它，因为这个-->https://meta.stackoverflow.com/questions/421831/temporary-policy-chatgpt-is-banned?cb=1 - easleyfixed
好的，抱歉，我不知道那个。我还注意到了https://meta.stackoverflow.com/a/421832/3592441的回复。基本上你是在说它可能不准确。无论如何，验证一下会很好。肯定看起来是有可能的，并且具有一定的相关性。 - Daniel
是的，但问题在于，无论回答是否正确，目前StackOverflow都不接受ChatGPT的答案。这种情况可能会在未来发生改变，但在阅读了他们的立场之后，似乎ChatGPT作为实际答案是不被允许的。 - easleyfixed
这个回答看起来像是由人工智能（如ChatGPT）生成的，而不是由真正的人类生成的。你应该知道，在Stack Overflow上发布由AI生成的内容是被禁止的。如果这个回答确实是由AI生成的，那么我强烈建议你在陷入更大麻烦之前删除它：我们在这里非常重视抄袭问题。请阅读：为什么目前不允许发布GPT和ChatGPT生成的回答。 - tchrist
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接