是否可以使用 JavaScript 来更改页面的元标记？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2568760/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Is it possible to use JavaScript to change the meta-tags of the page?
提问by TIMEX
If I put a div in the head and display:none, than use JavaScript to display it, will this work?
如果我在头部放置一个 div 并显示：none，而不是使用 JavaScript 来显示它，这行得通吗？
Edit:
编辑：
I have stuff loaded in AJAX. And as my AJAX changes the "main" portion of the site, I want to change the meta-tags as well.
我在 AJAX 中加载了东西。当我的 AJAX 更改站点的“主要”部分时，我也想更改元标记。
回答by fuxia
Yes, you can do that.
是的，你可以这样做。
There are some interesting use cases: Some browsers and plugins parse meta elements and change their behavior for different values.
有一些有趣的用例：一些浏览器和插件解析元元素并针对不同的值改变它们的行为。
Examples
例子
Skype: Switch off phone number parser
Skype：关闭电话号码解析器
<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">
iPhone: Switch off phone number parser
iPhone：关闭电话号码解析器
<meta name="format-detection" content="telephone=no">
Google Chrome Frame
谷歌浏览器框架
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Viewport definition for mobile devices
移动设备的视口定义
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This one can be changed by JavaScript. See: A fix for iPhone viewport scale bug
这个可以通过 JavaScript 改变。请参阅：修复 iPhone 视口比例错误
Meta description
元描述
Some user agents (Opera for example) use the description for bookmarks. You can add personalized content here. Example:
一些用户代理（例如 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>
So, it's not just about search engines.
所以，这不仅仅是关于搜索引擎。
回答by jayms
Yes, it is.
是的。
E.g. to set the meta-description:
例如设置元描述：
document.querySelector('meta[name="description"]').setAttribute("content", _desc);
回答by MiffTheFox
You'd use something like (with jQuery):
你会使用类似的东西（使用 jQuery）：
$('meta[name=author]').attr('content', 'New Author Name');
But that would be mostly pointless as meta tags are usually only scraped when the document is loaded, usually without executing any JavaScript.
但这几乎毫无意义，因为元标记通常仅在加载文档时才被抓取，通常不会执行任何 JavaScript。
回答by eyedmax
You can change meta with, for example, jQuery calls, like this ones:
例如，您可以使用 jQuery 调用来更改元数据，如下所示：
$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);
I think it doesmatter for now, since google saidthat they will index ajax content via #!hashesand _escaped_fragment_calls. And now they canverify it (even automatically, with headless browsers, see the 'Creating HTML Snapshots' link on the page mentioned above), so I think it is the way for hardcore SEO guys.
我认为这的确事现在，因为谷歌表示，他们将通过指数的Ajax内容#!hashes和_escaped_fragment_电话。现在他们可以验证它（即使是自动，使用无头浏览器，请参阅上面提到的页面上的“创建 HTML 快照”链接），所以我认为这是铁杆 SEO 人员的方式。
回答by Tim Moses
It is definitely possible to use Javascript to change the meta tags of the page. Here is a Javascript only approach:
绝对可以使用 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!!";
I have verified that Google does index these client side changes for the code above.
我已验证 Google 确实为上述代码编制了这些客户端更改的索引。
回答by futtta
meta-tags are part of the dom and can be accessed and -i guess- changed, but search-engines (the main consumers of meta-tags) won't see the change as the javascript won't be executed. so unless you're changing a meta-tag (refresh comes to mind) which has implications in the browser, this might be of little use?
元标签是 dom 的一部分，可以访问并且 - 我猜 - 已更改，但搜索引擎（元标签的主要使用者）不会看到更改，因为 javascript 不会被执行。因此，除非您正在更改对浏览器有影响的元标记（想到刷新），否则这可能没什么用？
回答by Mikael Svenson
It should be possible like this (or use jQuery like $('meta[name=author]').attr("content");):
应该可以这样（或使用 jQuery 之类的$('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>
回答by user3320390
$(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">');
});
回答by LanPartacz
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';
}
回答by Ali Seyfollahi
You can use more simpler and lighter solution:
您可以使用更简单、更轻便的解决方案：
document.head.querySelector('meta[name="description"]').content = _desc
