使用javascript在wordpress文章中设置og:image和twitter:image meta

我在一个WP网站上工作，我对代码非常陌生，所以在我花了一整天的时间努力让它正常工作后，我放弃了，决定去问别人

---

除了图像，我对所有打开的图形和twitter卡都使用了动态元。 所有的网页都有一个容器，里面有一篇文章；有些文章有图像，有些则没有。对于那些没有图像的，我想使用公司标志

因此，我想使用javascript将og:image和twitter:image添加到wordpress，但我无法克服一个错误，即：

document.getElementsByTagName（“”）不是函数

//add image meta tag
addImageMetaTag();

function addImageMetaTag() {
    var imgHolder = document.getElementsByTagName("article")[0];
    var image = imgHolder.getElementsByTagName("img");
    var source;

    function getSource() {
        if (image.length != 0) {
            var source = image[0].getAttribute("src");
        } else {
            var source = "http://link_to_my_default_image.png";
        }
        return source;
    };
    var meta = document.createElement('meta');
    meta.setAttribute("property", "og:image");
    meta.content = source;
    meta.name = "twitter:image";
    document.getElementsByTagName('head')[0].appendChild(meta);
};

---

Gerald、open graphs和twitter卡用于创建共享代码段，因此它与爬行无关

你的另一个答案是对的，有两个错误：事实上，我使用了“getSource”而不是“source”，但是Wordpress仍然找不到“article”类，因为内容加载在标题之后，所以我使用了“var content=undefined”，所以我将函数改为：

// add image meta tag
window.addEventListener("load", function() {
    addImageMetaTag();  
});  

function addImageMetaTag() {
    var content = document.getElementById("primary");
    var images = content.querySelectorAll("img");
    var source;

    if (images.length != 0) {
        var source = images[0].getAttribute("src");
    }
    else {
        var source = "http://link_to_my_default_image.png";
    }

    var meta = document.createElement('meta');
    meta.setAttribute("property","og:image");
    meta.content = source;
    meta.name = "twitter:image";
    document.getElementsByTagName('head')[0].appendChild(meta);
};

---

用javascript添加这些标记对您没有好处。读取此信息的爬虫程序不执行JavaScript，因此只有使用它们的客户端才能看到它们。在服务器端正确添加它们。另一个注意事项是：您的代码可以正常工作（在Chrome 48中），只是

source

是空的，因为您从未执行过

source=getSource（）“开放图形和twitter卡用于创建共享片段，因此它与爬网无关。”twitter卡信息从不直接共享，当有人共享URL时，twitter爬虫会使用这些信息。