Question

我的计划是在页面上找到第一个img并自动在头部创建og：image标签。但是，出于某种原因，虽然下面的代码找到了第一个元标记，但是当我尝试向它添加某些内容时，或者在它之前添加一些内容时，它确实起作用。任何帮助，无论这是否值得，赞赏。

这是我目前的代码

function img_find() {
    var imgs = document.getElementsByTagName("img");
    var imgSrcs = [];
    for (var i = 0; i < imgs.length; i++) {
        imgSrcs.push(imgs[i].src);
    }
    return imgSrcs;
}
var img = img_find();
var ogmetatag = document.createElement('meta');
ogmetatag.content = img[0];

var metatags = document.getElementsByTagName('meta')[0];
console.log(metatags);
metatags.appendChild(ogmetatag);
//    jQuery(document).ready(function() {
//     var img = jQuery('img').attr('src');
//     jQuery("meta[property='og:image']").attr('content', img);
//     jQuery('head').append('hiya');
// });
</script>

Answer 1

替换此行：

metatags.appendChild(ogmetatag);

用这个：

metatags.parentNode.insertBefore(ogmetatag, metatags.nextSibling);

Answer 2

您在这里缺少的是将元标记添加到页面（即标题），您只在DOM中创建它。你可以这样做：

var img = img_find();
var ogmetatag = document.createElement('meta');
ogmetatag.setAttribute('property', 'og:image');
ogmetatag.setAttribute('content', img[0]);
document.head.appendChild(ogmetatag);

不确定机器人是否可以访问使用JavaScript生成的元标记。

在页面上找到img标签，创建og：图像元标记并附加到头部

2 个答案: