如果我在头部放置一个 div 并显示：none，而不是使用 JavaScript 来显示它，这会起作用吗？
编辑：
我在 AJAX 中加载了一些东西。由于我的 AJAX 更改了网站的“主要”部分，我也想更改元标记。
问问题
275540 次
20 回答
208
是的。
例如设置元描述：
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
于 2016-03-17T22:52:00.263 回答
161
是的，你可以这么做。
有一些有趣的用例：一些浏览器和插件解析元元素并针对不同的值改变它们的行为。
例子
Skype：关闭电话号码解析器
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
iPhone：关闭电话号码解析器
<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 更改。请参阅：修复 iPhone 视口缩放错误
元描述
一些用户代理（例如 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>
因此，这不仅仅是关于搜索引擎。
于 2010-04-02T20:08:23.583 回答
70
你会使用类似的东西（使用jQuery）：
$('meta[name=author]').attr('content', 'New Author Name');
但这几乎没有意义，因为元标记通常只在文档加载时才被抓取，通常不执行任何 JavaScript。
于 2010-04-02T19:41:04.473 回答
42
绝对可以使用 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 确实为上面的代码索引了这些客户端更改。
于 2017-11-09T22:39:46.200 回答
33
例如，您可以使用 jQuery 调用来更改元数据，如下所示：
$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);
我认为现在确实很重要，因为谷歌表示他们将通过#!hashes和_escaped_fragment_调用索引 ajax 内容。现在他们可以验证它（甚至自动，使用无头浏览器，请参阅上面提到的页面上的“创建 HTML 快照”链接），所以我认为这是铁杆 SEO 人员的方式。
于 2010-11-23T01:29:25.210 回答
13
元标记是 dom 的一部分，可以访问和更改，但搜索引擎（元标记的主要消费者）不会看到更改，因为不会执行 javascript。因此，除非您要更改对浏览器有影响的元标记（想到刷新），否则这可能没什么用？
于 2010-04-02T19:39:15.473 回答
11
应该可以这样（或使用 jQuery like $('meta[name=author]').attr("content");）：
<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>
于 2010-04-02T19:40:45.673 回答
11
$(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">');
});
于 2014-04-17T17:26:33.787 回答
11
您可以使用更简单、更轻便的解决方案：
document.head.querySelector('meta[name="description"]').content = _desc
于 2019-10-03T09:00:23.430 回答
5
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';
}
于 2014-03-20T15:21:02.190 回答
3
对于任何试图更改 og:title 元标记（或任何其他）的人。我设法做到了这一点：
document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");
注意 'meta[property="og:title"]' 包含单词 PROPERTY，而不是 NAME。
于 2020-06-11T20:05:23.997 回答
2
每个元标记示例的简单添加和 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, ");
}
于 2013-01-26T02:54:47.810 回答
2
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 = '...'
于 2021-02-05T05:04:48.090 回答
2
如果我们根本没有元标记，那么我们可以使用以下内容：
var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
于 2019-03-17T21:04:26.357 回答
1
是的，可以使用 Javascript 添加元标记。我在我的例子中做了
但是，我不知道如何更改它，然后删除它。顺便说一句，在我的示例中..当您单击“添加”按钮时，它会分别添加标签和视口更改，但我不知道如何将其还原（在 Android 中将其删除）..我希望有适用于 Android 的萤火虫所以我看到了正在发生的事情。Firefox 确实删除了该标签。如果有人对此有任何想法，请在我的问题中注明。
于 2010-09-02T22:42:26.303 回答
1
不，div 是 body 元素，而不是 head 元素
编辑：那么 SE 将获得的唯一东西是基本 HTML，而不是经过 ajax 修改的 HTML。
于 2010-04-02T19:34:51.610 回答
1
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);
就我而言，我编写了这段代码，我所有的元标记都运行良好，但我们看不到它会隐藏在某处的实际元标记。
于 2020-11-05T13:55:12.700 回答
0
以下是如何使用纯 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。
于 2021-07-13T12:03:32.350 回答
0
在索引中有这个
<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 文件）。然后，我在这些文件中有元标记，并且在每个文档中都有返回索引的链接，还有每个子文件的索引文件中的元链接..
如果有人知道这样做的更好方法，我将不胜感激任何补充:)
于 2015-11-24T04:03:52.490 回答
0
这似乎适用于一个有点严格的几何设置应用程序，它需要在移动和其他浏览器上运行而几乎没有变化，因此需要找到移动/非移动浏览器状态以及将视口设置为设备宽度的移动设备。由于可以从标头运行脚本，因此标头中的以下 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">
. . . . . .
于 2017-10-31T04:52:48.987 回答