logo标签列表

可以使用JavaScript更改页面的meta标签吗？

javascriptjquerymeta-tags
167
如果我在head中插入一个display:none的div，然后使用JavaScript将其显示出来，这样能行吗？
编辑：
我有一些通过AJAX加载的内容。当我的AJAX更改了网站的“主要”部分时，我也想同时更改meta标签。
52
这就像是把鞋子当作帽子戴一样。 - Ben
9
或者使用文本编辑器作为集成开发环境。等等，这被认为很酷。 - Dan Rosenstark
23
你说得对，我很愚蠢。 - TIMEX
2
嗨TIMEX，也许更改接受的答案是合适的吗？如果没有其他原因，只是为了让Byron在过时的答案上得到一些喘息时间。 - Alex
1
我想这样做是为了使用我的JavaScript框架管理元标签（特别是og），然后让我的预渲染引擎为爬虫编写/缓存此内容。否则，我需要额外的中间件来确定我的API中的标签，然后再呈现我的SPA索引，这会拖慢加载速度，其中之一... - Soft Bullets
显示剩余4条评论
20个回答
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';
}
5

对于任何试图更改og:title元标记（或任何其他元标记）的人。我是通过以下方式实现的：

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

请注意，'meta[property="og:title"]' 中包含单词PROPERTY，而不是NAME。
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);
2

简单示例：为每个 meta 标签添加 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, ");

}
1

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

编辑：那么搜索引擎得到的只会是基本的HTML，而不是ajax修改后的HTML。

我希望这不是真的。 - David Spector
1

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

Android不尊重元标记的删除？

但是，除了删除它之外，我不知道如何更改它。顺便说一下，在我的示例中，当您单击“ADD”按钮时，它会添加标记并相应地更改视口，但我不知道如何将其恢复（在Android中删除它）。我希望有一个适用于Android的Firebug，这样我就可以看到发生了什么。Firefox确实会删除该标记。如果有人对此有任何想法，请在我的问题中注明。

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

在我的情况下，我编写了这段代码，所有的元标签都可以正常工作，但我们无法看到实际的元标签，因为它们会被隐藏起来。
0

这似乎适用于一个刚性几何设置的应用程序，在移动设备和其他浏览器上运行时需要很少更改，因此需要查找移动/非移动浏览器状态，并为移动设备设置视口宽度。由于脚本可以从头部运行，因此下面的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">

. . . . . .

0

在索引中有这个

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

在ajax文件中添加以下内容：

og:type"og:title"og:description和og:image

还需添加以下内容：

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

然后在 ajax 调用之后添加 js

FB.XFBML.parse();

编辑：然后您可以在txt/php文档中显示正确的Facebook标题和图像（我的文件只是以.php作为扩展名，但它们更像是txt文件）。 然后我在这些文件中有元标记，并且每个文档都有指向索引的链接，还有一个索引文件中的元链接用于每个子文件。

如果有人知道更好的方法，请告诉我，我会感激任何补充 :)

这似乎不是关于如何动态添加元标记的问题的答案？ - Alex
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。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接