是否可以使用JavaScript更改页面的元标记？

113

如果我将div放在头并显示：none，而不是使用JavaScript来显示它，这行得通吗？

编辑：

我已经在AJAX中加载了东西。当我的AJAX更改网站的“主要”部分时，我也想更改元标记。

javascript  jquery  meta-tags 
— 天美时
source
47
这是喜欢穿的鞋，一顶帽子
— 奔
8
或使用文本编辑器作为参考。不用等待，这被认为很酷。
— Dan Rosenstark'4
23
您是对的，我很愚蠢
— TIMEX
2
嗨，TIMEX，也许可以更改接受的答案？如果没有别的原因，只能让拜伦为他过时的答案而减票。
— 亚历克斯
1
我想这样做，以便可以使用我的javascript框架管理meta标签（尤其是og），然后让我的prerender引擎为爬虫编写/缓存它。否则，在呈现我的SPA的索引之前，我需要其他中间件从API确定标签，这会减慢加载速度，这是一件事……
— Soft Bullets

Answers:

160

是的，你可以这样做。

有一些有趣的用例：一些浏览器和插件会解析元元素，并将其行为更改为不同的值。

例子

Skype：关闭电话号码解析器

<meta name="SKYPE_TOOLBAR" content="SKYPE_TOOLBAR_PARSER_COMPATIBLE">

iPhone：关闭电话号码解析器

<meta name="format-detection" content="telephone=no">

Google Chrome浏览器内嵌框架

<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>

因此，这不仅与搜索引擎有关。

— 福厦
source
9
我怀疑大多数类似元的效果在页面加载后不会改变。但是，是的，meta远不止是keywordsand description。
— bobince '04
2
@bobince：实际上，如果您用js插入，SKYPE_TOOLBAR仍然会生效（这很有用，因为html5验证器不喜欢该meta标签）。
— DaedalusFall
1
@DaedalusFall：是的，我想您只能document.write在页眉中执行此操作，一旦加载页面，现在更改它为时已晚，因为Skype已经破坏了DOM，这太可怕了！
— bobince 2011年
1
这对于与Facebook之类的服务进行社交共享非常有用。例如，要更改og：title元素： $('meta[property="og:title"]').replaceWith('<meta property="og:title" content="New Title">');
— bdanin 2014年
2
您可以以此做一些很酷的事情。当标题中的幻灯片更改时，我更改了Chrome地址栏的颜色。const meta = document.querySelector('meta[name=theme-color]'); meta.setAttribute("content", colors[slideIndex]);Android上的Chrome浏览器检测到更新并更改颜色
— Dominic Bartl
149

是的。

例如，设置元描述：

document.querySelector('meta[name="description"]').setAttribute("content", _desc);
— 杰姆斯
source
23
很高兴有人用纯js给出了答案（按问题要求）！
— 软弹
嗨，杰姆斯。谢谢你的提示。但是我尝试了这种方法来尝试更改og：title标签，但是没有用。这是我的操作方式：document.querySelector（'meta [name =“ og：title”]'）。setAttribute（“ content”，“带有标题元标记的示例”）; 有任何想法吗？
— 豪尔赫·毛里西奥
1
看来您需要查询property属性，而不是name属性，例如meta[property="og:title"]
— jayms
69

您将使用类似（使用jQuery）的方法：

$('meta[name=author]').attr('content', 'New Author Name');

但这几乎没有意义，因为通常仅在加载文档时才刮掉meta标签，通常不执行任何JavaScript。

— 狐狸
source
7
它甚至可以与选择器一起使用，例如$('meta[property=og:somestuff]')，由于冒号，我怀疑它会与jQuery选择语法冲突。
— pau.moreno 2011年
8
如果其他人正在寻找这种确切的解决方案，则需要在og：somestuff周围加上引号-我需要image标签的内容，这是我的代码：var imgurl = $（“ meta [property ='og：image ']“）。attr（” content“）;
— 丹尼尔（Daniel）
2
确认它适用于元视口设置（需要此选项以启用/禁用jQuery Mobile上某些子页面的缩放）。谢谢！
— NPC
1
@stealthcopter我可以验证这不是:(等待，可以，但是更改在FFox的“查看源代码”窗口中不可见..
— yPhil
1
@yPhil这是javascript（或jQuery），因此从浏览器查看源代码时，不会反映您对DOM所做的任何更改。它将反映您使用开发人员工具查看源代码的时间。当页面加载时，浏览器源仅加载一次。ajax请求请求不是页面加载。
— Zubair17年
34

您可以使用例如jQuery调用来更改meta，如下所示：

$('meta[name=keywords]').attr('content', new_keywords);
$('meta[name=description]').attr('content', new_description);

我认为这确实很重要，因为Google 表示他们将通过#!hashes和_escaped_fragment_调用为Ajax内容编制索引。现在，他们可以进行验证（即使使用无头浏览器也可以自动进行验证，请参见上面提到的页面上的“创建HTML快照”链接），所以我认为这是SEO核心人士的方法。

— 眼神
source
3
这次真是万分感谢。刚刚解决了我的问题。由于facebook有开放图。我正在开发的网站有一个History jQuery插件和hash标签。因此，只要存在哈希更改，就需要更改FB打开图的URL和描述。+1是一个很好的答案，而不是对一个公平的问题持否定态度。
— Damien Keitel
5
实际上，现在google也能够运行javascript，而无需创建页面快照，因此，动态元标记确实很重要！
— Francesco Abbruzzese 2014年
33

绝对可以使用Java脚本来更改页面的meta标签。这是仅使用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确实为上述代码索引了这些客户端更改。

— 蒂姆·摩西
source
3
有趣！感谢您让我了解element = collection[name]语法。
— jayms
11

元标记是dom的一部分，可以访问并进行-i猜测-更改，但是搜索引擎（元标记的主要使用者）不会看到更改，因为不会执行javascript。因此，除非您要更改在浏览器中具有影响力的元标记（让人想到刷新），否则这可能没有什么用处？

— 富塔
source
3
+1-我提出了这个问题，因为我特别想知道元刷新。我正在创建一个使用Ajax轮询刷新屏幕上数据的应用程序，我想为未启用JavaScript的浏览器提供粗略的后备。我认为我可以通过默认情况下创建一个meta刷新标签来实现此目的，如果启用了javascript，只需删除meta标签即可。-现在看看它是否真的有效...
— jessegavin
@futtta，元描述标记用于Opera中的书签描述，因此，对用户进行更改实际上是有益的。
— XP1
11

应该像这样（或使用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>
— 米卡尔·斯文森（Mikael Svenson）
source
10 
$(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">');
});
— 用户名
source
6
我从您的示例开始，但是意识到您不必删除并重新添加元标记。您可以像这样更改内容属性：jQuery('meta[property="og:title"]').attr('content', "blubb1");
— Tobias Beuving
您是正确的@ user3320390。删除标签与更改标签不同。FB代表HTML编写的内容，而不代表标签的值。
— 佩德罗·费雷拉
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';
}
— 兰帕塔奇
source
2

简单地将add和div归因于每个meta标签示例

<meta id="mtlink" name="url" content="">
<meta id="mtdesc" name="description" content="" />
<meta id="mtkwrds" name="keywords" content="" />

现在就像正常的div更改为ex。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, ");

}
— 布尔汉·易卜拉希米（Burhan Ibrahimi）
source
2

如果我们根本没有meta标签，则可以使用以下代码：

var _desc = 'Out description';
var meta = document.createElement('meta');
meta.setAttribute('name', 'description');
meta.setAttribute('content', _desc);
document.getElementsByTagName('head')[0].appendChild(meta);
— 罗曼
source
2

对于任何试图更改og：title元标记（或其他任何标记）的人。我设法做到这一点：

document.querySelector('meta[property="og:title"]').setAttribute("content", "Example with og title meta tag");

请注意，“ meta [property =“ og：title”]”包含单词“ PROPERTY”而不是“ NAME”。

— 豪尔赫·毛里西奥（Jorge Mauricio）
source
1

不，div是body元素，而不是head元素

编辑：那么SE唯一要获得的是基本HTML，而不是ajax修改的HTML。

— 本
source
我希望这不是真的。
— David Spector
1

是的，可以使用Javascript添加元标记。我在我的例子中做了

Android不尊重元标记删除？

但是，我不知道如何更改它，然后再将其删除。顺便说一句，在我的示例中..当您单击“添加”按钮时，它分别添加了标记和视口更改，但是我不知道如何将其还原（在Android中将其删除）。我看到发生了什么事。Firefox确实删除了标签。如果有人对此有任何想法，请在我的问题中注明。

— 查米利扬
source
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文件）。然后，我在这些文件中具有meta标记，并且在每个文档中都有指向索引的链接，在每个子文件的索引文件中也都有meta链接。

如果有人知道更好的方法，我将不胜感激:)

— 太阳
source
这似乎不是对如何动态添加元标记的问题的答案。
— 亚历克斯
0

这似乎适用于一些几何形状固定的应用程序，该应用程序需要在移动浏览器和其他浏览器上运行时几乎不需要更改，因此需要查找移动/非移动浏览器状态，并且对于移动设备，需要将视口设置为设备宽度。由于可以从标头运行脚本，因此标头下面的js似乎在页面加载之前更改了设备宽度的元标记。可能有人注意到，将navigator.userAgent的使用规定为实验性的。该脚本必须跟随要更改的metatag条目，因此必须选择一些初始内容，然后在某些条件下进行更改。 

<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">

。。。。。。

— jcj52436999
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.