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

小开

不，div 是身体元素，不是头部元素

编辑: 那么 SEs 只能得到基本的 HTML，而不是 Ajax 修改过的 HTML。

小开

Meta 标签是 Dom 的一部分，可以访问并且-我猜-可以改变，但是搜索引擎(meta 标签的主要消费者)不会看到改变，因为 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>

小开

您可以使用类似(对于 jQuery)的内容:

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

但是这样做基本上毫无意义，因为 meta 标记通常只在加载文档时被擦除，通常不执行任何 JavaScript。

小开

是的，你可以这么做。

这里有一些有趣的用例: 一些浏览器和插件解析元元素，并根据不同的值改变它们的行为。

例子

关闭电话号码解析器

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

所以，这不仅仅是搜索引擎的问题。

小开

是的，用 Javascript 添加元标记是可能的，我在我的例子中就是这样做的

Android 不尊重移除元标记？

但是，我不知道如何改变它其他，然后删除它。顺便说一句，在我的例子里。.当你点击“ ADD”按钮时，它会分别添加标签和视图变化，但我不知道如何恢复它(在 Android 中删除它)。.我希望 Android 有纵火犯，所以我看到了正在发生的事情。Firefox 确实删除了标签。如果有人对此有任何想法，请在我的问题中注意。

小开

你可以用 jQuery 调用来修改 meta，比如:

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

我认为它的是的问题现在，因为谷歌说，他们将索引通过 #!hashes和 _escaped_fragment_调用 Ajax 内容。现在，他们可以验证它(甚至自动，无头浏览器，看到’创建 HTML 快照’在上面提到的页面链接) ，所以我认为这是硬核搜索引擎优化家的方式。

小开

简单地向每个元标记示例添加和 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 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';
}

小开

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

小开

把这个放在索引里

<link rel="opengraph" href="{http://yourPage.com/subdomain.php}"/>

把这个放到 Ajaxfiles 里输入“ og: title”og: description 和 og: image

再加上这个

<link rel="origin" href={http://yourPage.com}/>

然后在 ajaxCall 后面加上 js

FB.XFBML.parse();

编辑: 然后您可以在 txt/php 文档中向 facebook 显示正确的标题和图像(我的文档就是这样命名的)。Php 作为扩展名，但是是更多的 txt 文件)。然后在这些文件中有 meta 标签，在每个文档中有返回索引的链接，在索引文件中也有每个子文件的 meta 链接。.

如果有人知道一个更好的方法，我会很感激任何补充:)

小开

是的，没错。

例如，设置元描述:

document.querySelector('meta[name="description"]').setAttribute("content", _desc);

小开

这似乎适用于一个有点僵硬的几何设置的应用程序，它需要在移动和其他浏览器上运行，几乎没有变化，所以查找移动/非移动浏览器状态和移动设置设备宽度的视窗是必要的。由于脚本可以从头部运行，因此在页面加载之前，头部的以下 js 似乎更改了设备宽度的 metatag。有人可能会注意到，将 Navator.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">

. . . . . .

小开

使用 Javascript 来更改页面的 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!!";

我已经证实，谷歌确实索引这些客户端的代码上面的变化。

小开

如果我们根本没有 meta 标签，那么我们可以使用以下内容:

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

小开

你可以使用更简单、更轻便的解决方案:

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

小开

对于任何试图改变 og: title meta 标签(或其他任何标签)的人，我设法这样做:

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

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

小开

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 标签，它会隐藏在某个地方。

小开

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 = '...'

小开

下面是如何使用普通的 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>

链接到工作示例: 博客 Svija.love。