如果我在头部放置一个 div 并显示：none，而不是使用 JavaScript 显示它，这会起作用吗？
编辑：
我在 AJAX 中加载了一些东西。由于我的 AJAX 更改了网站的“主要”部分，我也想更改元标记。
【问题讨论】：
标签： javascript jquery meta-tags
是的。
例如设置元描述：
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
【讨论】：
property 属性，而不是name 属性，即meta[property="og:title"]
是的，你可以这样做。
有一些有趣的用例：一些浏览器和插件解析元元素并根据不同的值改变它们的行为。
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
这个可以通过 JavaScript 改变。见：A fix for iPhone viewport scale bug
一些用户代理（例如 Opera）使用书签的描述。您可以在此处添加个性化内容。示例：
<!DOCTYPE html>
<title>Test</title>
<meta name="description" content="this is old">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.8.2.js'></script>
<button>Change description</button>
<script type='text/javascript'>
$('button').on('click', function() {
// Just replacing the value of the 'content' attribute will not work.
$('meta[name=description]').remove();
$('head').append( '<meta name="description" content="this is new">' );
});
</script>
所以，这不仅仅是关于搜索引擎。
【讨论】：
keywords 和description。
document.write 来做到这一点，一旦页面加载，就为时已晚，因为 Skype 已经破坏了 DOM，太可怕了东西！
$('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android 上的 Chrome 检测到更新并更改颜色
你会使用类似的东西（使用 jQuery）：
$('meta[name=author]').attr('content', 'New Author Name');
但这几乎没有意义，因为元标记通常只在文档加载时才被抓取，通常不执行任何 JavaScript。
【讨论】：
$('meta[property=og:somestuff]') 这样的选择器一起使用，我怀疑它会因为冒号而与 jQuery 选择语法发生冲突。
绝对可以使用 Javascript 来更改页面的元标记。这是一种仅限 Javascript 的方法：
document.getElementsByTagName('meta')["keywords"].content = "My new page keywords!!";
document.getElementsByTagName('meta')["description"].content = "My new page description!!";
document.title = "My new Document Title!!";
我已验证 Google 确实为上面的代码编制了这些客户端更改的索引。
【讨论】：
element = collection[name] 语法。
您可以使用例如 jQuery 调用来更改元数据，例如：
$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);
我认为现在确实很重要，因为谷歌said 他们将通过#!hashes 和_escaped_fragment_ 调用来索引ajax 内容。现在他们可以验证它（甚至自动，使用无头浏览器，请参阅上面提到的页面上的“创建 HTML 快照”链接），所以我认为这是铁杆 SEO 人员的方式。
【讨论】：
meta-tags 是 dom 的一部分，可以访问和-我猜-更改，但搜索引擎（meta-tags 的主要消费者）不会看到更改，因为 javascript 不会被执行。因此，除非您要更改对浏览器有影响的元标记（想到刷新），否则这可能没什么用？
【讨论】：
应该可以这样（或者使用像$('meta[name=author]').attr("content");这样的jQuery）：
<html>
<head>
<title>Meta Data</title>
<meta name="Author" content="Martin Webb">
<meta name="Author" content="A.N. Other">
<meta name="Description" content="A sample html file for extracting meta data">
<meta name="Keywords" content="JavaScript, DOM, W3C">
</head>
<body>
<script language="JavaScript"><!--
if (document.getElementsByName) {
var metaArray = document.getElementsByName('Author');
for (var i=0; i<metaArray.length; i++) {
document.write(metaArray[i].content + '<br>');
}
var metaArray = document.getElementsByName('Description');
for (var i=0; i<metaArray.length; i++) {
document.write(metaArray[i].content + '<br>');
}
var metaArray = document.getElementsByName('Keywords');
for (var i=0; i<metaArray.length; i++) {
document.write(metaArray[i].content + '<br>');
}
}
//--></script>
</body>
</html>
【讨论】：
$(document).ready(function() {
$('meta[property="og:title"]').remove();
$('meta[property="og:description"]').remove();
$('meta[property="og:url"]').remove();
$("head").append('<meta property="og:title" content="blubb1">');
$("head").append('<meta property="og:description" content="blubb2">');
$("head").append('<meta property="og:url" content="blubb3">');
});
【讨论】：
jQuery('meta[property="og:title"]').attr('content', "blubb1");
您可以使用更简单、更轻便的解决方案：
document.head.querySelector('meta[name="description"]').content = _desc
【讨论】：
var metaTag = document.getElementsByTagName('meta');
for (var i=0; i < metaTag.length; i++) {
if (metaTag[i].getAttribute("http-equiv")=='refresh')
metaTag[i].content = '666';
if (metaTag[i].getAttribute("name")=='Keywords')
metaTag[i].content = 'js, solver';
}
【讨论】：
对于任何试图更改 og:title 元标记（或任何其他）的人。我设法做到了：
document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");
注意'meta[property="og:title"]' 包含单词PROPERTY，而不是NAME。
【讨论】：
对每个元标记示例进行简单的 add 和 div 属性
<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />
现在就像普通的 div 更改一样。 n 点击
<a href="#" onClick="changeTags(); return false;">Change Meta Tags</a>
用 jQuery 改变函数标签
function changeTags(){
$("#mtlink").attr("content","http://albup.com");
$("#mtdesc").attr("content","music all the time");
$("#mtkwrds").attr("content","mp3, download music, ");
}
【讨论】：
如果我们根本没有元标记，那么我们可以使用以下内容：
var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
【讨论】：
name 属性允许您通过子元素列表通过其名称（如 id）引用元素，因此快速的方法是：
document.head.children.namedItem('description').content = '...'
——甚至只是：
document.head.children.description.content = '...'
但如果你不确定是否存在这样的元标记，那么最好添加这样的检查：
let metaDescription = document.head.children.description
if (metaDescription == null) {
metaDescription = document.createElement('meta')
metaDescription.name = 'description'
document.head.append(metaDescription)
}
metaDescription.content = '...'
【讨论】：
不，div 是 body 元素，而不是 head 元素
编辑：那么 SE 将获得的唯一东西是基本 HTML，而不是 ajax 修改的。
【讨论】：
是的，可以使用 Javascript 添加元标记。我在我的例子中做了
Android not respecting metatag removal?
但是，除了删除它之外，我不知道如何更改它。顺便说一句，在我的示例中..当您单击“添加”按钮时，它会分别添加标签和视口更改，但我不知道如何将其还原（在 Android 中将其删除）..我希望有适用于 Android 的萤火虫所以我看到了正在发生的事情。 Firefox 确实删除了该标签。如果有人对此有任何想法，请在我的问题中注明。
【讨论】：
var description=document.getElementsByTagName('h4')[0].innerHTML;
var link = document.createElement('meta');
link.setAttribute('name', 'description');
link.content = description;
document.getElementsByTagName('head')[0].appendChild(link);
var htwo=document.getElementsByTagName('h2');
var hthree=document.getElementsByTagName('h3');
var ls=[];
for(var i=0;i<hthree.length;i++){ls.push(htwo[i].innerHTML);}
for(var i=0;i<hthree.length;i++){ls.push(hthree[i].innerHTML);}
var keyword=ls.toString()
;
var keyw = document.createElement('meta');
keyw.setAttribute('name', 'keywords');
keyw.content = keyword;
document.getElementsByTagName('head')[0].appendChild(keyw);
在我的例子中，我编写了这段代码，我所有的元标记都工作得很好，但是我们看不到它会隐藏在某个地方的实际元标记。
【讨论】：
在索引中有这个
<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>
在 ajaxfiles 中有这个 og:type"og:title"og:description 和 og: image
并添加这个
<link rel="origin" href={http://yourPage.com}/>
然后在ajaxCall之后加入js
FB.XFBML.parse();
编辑：然后您可以在 txt/php douments 中向 facebook 显示正确的标题和图像（我的只是命名为 .php 作为扩展名，但更多的是 txt 文件）。 然后我在这些文件中有元标记，在每个文档中都有返回索引的链接，也是每个子文件的索引文件中的元链接..
如果有人知道这样做的更好方法，我将不胜感激：)
【讨论】：
这似乎适用于一个有点严格的几何设置应用程序，它需要在移动设备和其他浏览器上运行而几乎没有变化，因此找到移动/非移动浏览器状态并将视口设置为设备宽度的移动设备是需要的。由于可以从标头运行脚本，因此标头中的以下 js 似乎在页面加载之前更改了 device-width 的元标记。有人可能会注意到 navigator.userAgent 的使用被规定为实验性的。脚本必须遵循要更改的元标记条目，因此必须选择一些初始内容，然后在某些条件下进行更改。
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script>
var userAgentHeader = navigator.userAgent ;
var browserIsMobileOrNot = "mobileNOT" ;
if( userAgentHeader.includes( "Mobi" ) ) {
browserIsMobileOrNot = "mobileYES" ;
//document.querySelector('meta[name="viewport"]').setAttribute( "content", "width=device-width, initial-scale=1.0" );
} else {
browserIsMobileOrNot = "mobileNOT" ;
document.querySelector('meta[name="viewport"]').setAttribute( "content", "");
}
</script>
<link rel="stylesheet" href="css/index.css">
。 . . . . .
【讨论】：
这里是如何使用纯 javascript 做到这一点。我用它来更改新 Safari 15 beta 中的标题颜色：
<html><head>
<meta id="themeColor" name="theme-color" content="">
</head><body><script>
var delay = 50;
var increment = 5;
var current = 0 - increment;
function setHeaderColor(){
current += increment;
if (current > 360) current = 0;
var colorStr = 'hsl('+current+',100%,50%)';
themeColor.content = colorStr;
textBlock.style.color = colorStr;
}
setInterval(setHeaderColor, delay);
</script><pre id="textBlock" style="font-size:30px;">
Needs Safari 15
</pre></body></html>
链接到工作示例：blog.svija.love。
【讨论】：