如何将tumblr og：image更改为至少200x200？

Question

I'm trying to help my friend with his tumblr blog since I know code and he doesn't. Facebook Open Graph requires that an og:image be at least 200x200 to display the image when you link to your site, but tumblr forces an icon of 128x128 on your home page, so Facebook won't correctly link to your picture.

For example, visit Facebook's Object Debugger for his site and you can see there is a warning saying

Provided og:image is not big enough. Please use an image that's at least 200x200 px. Image ' http://24.media.tumblr.com/7058d8a59658ff7e39e8ee83a8a72fc9/tumblr_n2ho09BYPS1sej21so1_500.jpg ' will be used instead.

I tried writing a jQuery function that should change the value of his og:image on his site, but it almost seems as if tumblr later goes in and changes the code after I have made my changes. Below is my code:

<script>
$( document ).ready(function() {
    var metas = document.head.getElementsByTagName("meta");
    for (var i=0; i<metas.length;i++)
    {
        if(metas[i].getAttribute("property"))
            console.log(metas[i].getAttribute("property"));
        if(metas[i].getAttribute("property") == "og:image")
        {
            console.log("GOT IT!");
            metas[i].setAttribute("content", "http://25.media.tumblr.com/avatar_8c69b027eab0_512.png");
            console.log(metas[i].getAttribute("content"));
        }
    }
});
</script>

It seems to print out everything like how I would expect it to, but when I go to his site and view his source code, it keeps the old value for his og:image and not the new one that I set.

You can go to his site and view the console to see that my code is printing out the expected results, but the og:image is not getting updated when you view the source code.

Answer 1

Javascript does not get executed when facebook reads the page for posting to its site. The jQuery gets ignored, so its going to grab the first large image on the page.

If you are just setting to the avatar. why not just hardcode the link in the tumblr theme HTML?

<meta property="og:image" content="http://25.media.tumblr.com/avatar_8c69b027eab0_512.png"/>