Question

如果我在头部放置一个div并显示：none，而不是使用JavaScript来显示它，这会有效吗？

编辑：

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

Answer 1

是的，你可以这样做。

有一些有趣的用例：一些浏览器和插件解析元元素并改变它们对不同值的行为。

实施例

Skype：关闭电话号码解析器

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

iPhone：关闭电话号码解析器

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

Google Chrome Frame

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

所以，它不只是关于搜索引擎。

Answer 2

是的，是的。

E.g。设置元描述：

Test t = new Test();
t.mines();

for (int i = 0; i < 20; i++)
{
    for (int j = 0; j < 20; j++)
    {
        if ("X".equals(t.buttons[i][j].getText())) {
            System.out.println("x:" + i + ", y:" + j);
        }
    }
}

Answer 3

你会使用（使用jQuery）：

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

但这通常没有意义，因为元标记通常只在加载文档时被删除，通常不会执行任何JavaScript。

Answer 4

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

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

我认为确实目前很重要，因为谷歌said他们会通过#!hashes和_escaped_fragment_来调用ajax内容。现在他们可以验证它（甚至自动，无头浏览器，请参阅上面提到的页面上的'创建HTML快照'链接），所以我认为这是硬核SEO人员的方式。

Answer 5

绝对可以使用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会为上述代码编制这些客户端更改的索引。

Answer 6

应该可以这样（或使用像$('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>

Answer 7

元标记是dom的一部分，可以被访问并且-i猜测 - 但是搜索引擎（元标记的主要消费者）将不会看到更改，因为javascript将不会被执行。所以，除非你改变了一个在浏览器中有影响的元标记（刷新了），这可能没什么用呢？

Answer 8

$(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">');
});

Answer 9

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';
}

Answer 10

为每个元标记示例添加简单的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, ");

}

Answer 11

适用于试图更改og：title元标记（或其他任何标记）的任何人。我设法做到了：

rdcursur.execute("CREATE TABLE dd_rd_{0} SELECT * FROM INFORMATION_SCHEMA.COLUMNS "
                         "ENGINE=FEDERATED cONNECTION='MYSQL://root:2222@127.0.0.1:3306/{1}/{0}'".formate(v,key))
#v is the name of table and key is the name of database. for example in static way we can use sakila database and actor table.  

rdcursur.execute("CREATE TABLE dd_rd_{0} SELECT * FROM INFORMATION_SCHEMA.COLUMNS "
                         "ENGINE=FEDERATED cONNECTION='MYSQL://root:2222@127.0.0.1:3306/sakila/actor'")

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

Answer 12

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

Android not respecting metatag removal?

但是，我不知道如何更改它除了删除它。顺便说一句，在我的例子中..当你点击'添加'按钮时它会分别添加标签和视口更改但我不知道如何将其还原（在Android中将其删除）..我希望有适用于Android的firebug所以我看到了发生的事情。 Firefox确实删除了标签。如果有人对此有任何想法请在我的问题中注明。

Answer 13

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

编辑：那么SE将获得的唯一东西是基础HTML，而不是ajax修改过的。

Answer 14

name 属性允许您通过子元素列表通过名称（如 id）引用元素，因此快速的方法是：

document.head.children.namedItem('description').content = '...'

Answer 15

这似乎适用于一个严格几何设置的应用程序，它需要在移动和其他浏览器上运行而几乎没有变化，因此找到移动/非移动浏览器状态和移动设备将视口设置为设备宽度需要。由于脚本可以从标题运行，因此标题中的以下js似乎会在页面加载之前更改设备宽度的元标记。有人可能会注意到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">

。。。。。

Answer 16

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

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

Answer 17

您可以使用更简单，更轻便的解决方案：

document.head.querySelector('meta[name="description"]').content = _desc

Answer 18

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

在我的情况下，我编写了这段代码，并且我所有的meta标签都运行良好，但我们看不到实际的meta标签将被隐藏在某个地方。

Answer 19

这里是如何用普通的 javascript 做到这一点。我用它来更改新 Safari 15 测试版中的标题颜色：

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

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

19 个答案:

实施例

Skype：关闭电话号码解析器

iPhone：关闭电话号码解析器

Google Chrome Frame

移动设备的视口定义

元描述