动态更改标题中的元标记？答案

【问题标题】：Change meta tag in header dynamically?动态更改标题中的元标记？
【发布时间】：2020-01-04 16:35:17
【问题描述】：

我正在使用一个按钮创建可共享连接，我之前单击的按钮将执行一项功能，该功能会在 OPEN GRAPH 发布到社交媒体后对其进行修改。我尝试单击按钮并使用共享 API 将其与社交媒体共享，但标题、链接、缩略图和描述没有改变。

const share = $("#change").click(()=>{
   $("meta[name=description]").remove();
   $("head").append("<meta name='description' content='new description'>" 
);})

【问题讨论】：

什么共享API？他们是否根据 URL 请求页面，而不是从用户的浏览器中读取？因为这既有意义又会导致问题。
你是对的，我一定是错误地实现了 facebook 分享按钮。我使用 facebook 分享按钮，当用户在我的网站上分享图片时，我希望用户获取图片（作为缩略图）、描述（作为描述本身）、标题等。就像在 Facebook 上分享带有缩略图、标题和描述的文章链接一样。

标签： javascript jquery css web dynamic

【解决方案1】：

您可以使用此更改元标记

$('button').on('click', function() {
    $('meta[name=description]').remove();
    $('head').append( '<meta name="description" content="this is new">' );
    console.log($('meta[name=description]').attr('content'));
});

<head>
    <meta name="description"content="this is old">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>
<button>Change Meta</button>

【讨论】：

如果我使用facebook分享按钮怎么办？我认为，facebook 限制我这样做。或者我错了

【解决方案2】：

你也可以试试这个方法

$('#mybutton').on('click', function(){

console.log(document.getElementsByTagName('meta')["description"].content);
document.getElementsByTagName('meta')["description"].content = "this is new meta tag!";
console.log(document.getElementsByTagName('meta')["description"].content);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<head>
    <meta name="description"content="this is old meta tag!">
</head>
<button id="mybutton">Modify</button>

【讨论】：

如何使用此代码修改 facebook 分享按钮？
你真正想改变什么，请给我们一些例子