How can I tell Reddit to ignore my Logo for the Thumbnail?

Question

When a user shares content from my website, often the image appearing in the thumbnail is the logo of the website instead of the image itself.

How can I tell reddit to ignore the logo ?

I searched a lot and found answers on how to specify which image reddit should use with the og image meta tag, but I can't do that since my website is part UGC, meaning I wouldn't know what is the absolute URL for every image.

For example: reddit not pulling scraping image on link post

EDIT:

This doesn't seem to be working on my end. Does it work on yours ?

<script>
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 result = img_find();
$("meta[property='og:image']").attr("content", result[1]);
</script>

Aceous

I don't fully understand your problem. If you don't know your image urls/what image to specify for reddit how would reddit know? – Fauces

@kn I agree I may have been unclear. When a user uploads an image to my website, it's name is randomised to a long string of alphanumericals. So the absolute url is something like: website.com/page/fhj2kdshf4aje3dshfla8sdhfsjd with fhj2kdshf4aje3dshfla8sdhfsjd being the image. My issue is that I don't know how to specify the meta tag og:image such that it points to the absolute url of the current image :/ window.href gives me website.com/page/ , but how do I get the image name ? – Aceous

@kn That's why I am wondering if there isn't a way to simply tell the scraper to ignore the logo since the uploaded image is the only other image on the website. – Aceous

Deleted my answer because it made no real difference to helping you, wasn't able to find a way to do it I'm sorry – Sarsaparilla

@MrSanchez Discussing it with you actually gave me an idea and I think it might work :D So don't be sorry, you actually helped :) – Aceous

Well then I guess I'll undelete it XD, what ideia did ya get ? :P – Sarsaparilla

@MrSanchez Updated question with the idea. I am not sure it works. But undeleting your question wouldn't be useful unless you have a working solution XD – Aceous

That actually might work, good job ^-^ – Sarsaparilla

@MrSanchez Well, I was stuck until you posted your answer and I was like: "That won't work ! The only way this would work is if I could somehow scan the page to retrive the image url and... That's it !" – Aceous

Ill see what I can do with the new script ;) – Sarsaparilla

@MrSanchez Let's see if when sharing, you do get the correct thumbnail from your page ;) – Aceous

Can you upload your html please? – Sarsaparilla

Aint working on my end either, I'll try to see if I can fix it in any way. – Sarsaparilla

@MrSanchez Ok :D – Aceous

@MrSanchez Any ideas ? – Aceous

@Aceous I got one but its very vague, if you can get a way to return the image to the page, you can then with javascript get it's absolute url, and return it to the meta tag – Sarsaparilla

@MrSanchez Isn't this already what I am doing ? – Aceous

I guess xD sorry I cant test code right now, windows screwed up my partition table so I gotta reinstall my arch xD – Sarsaparilla

@MrSanchez Oh :O Good luck ! – Aceous

Answer 1

Your code

$("meta[property='og:image']").attr("content", result[1]);

is almost the solution. Let's do the last step:

$("meta[property='og:image']")
    .attr("content", $('css_selector_of_the_img')[0].src);

So what is css_selector_of_the_img? Since you have the website logo, I'd assume that you had some HTML around your image. Probably the image has a className or placed into a container e.g. css_selector_of_the_img could be div.content img or img.uploaded whatever. And throw away your img_find function J.

Whipple

Answer 2

I found the solution.

Adding property="og:image" to the <img> I want selected worked.

Aceous

That shouldn't be correct per my understanding of the way reddit's system works. I'll check and post an additional answer as to why this does work or why it shouldn't be used depending on what I find. – Mollescent

@Mollescent Wonderful ! Let's see what you find out ! – Aceous

OK, I looked over it, and I can't see why this works. The scraping code only looks for og:image on <meta> tags (which, in fact, is the only place where it's valid according to the OGP docs as far as I can tell). So this shouldn't be valid, and the fact that it is working is very odd. One thing to note: it might be falling back to the "no image specified" code, in which case reddit will guess the image (algorithm here). [continued] – Mollescent

[continuing] It might be that you're getting lucky with the choosing the images you want now. Setting the image via javascript won't work, since the scrapper only pulls HTML; it doesn't evaluate the javascript afterwards (you'd have to set the image serverside). If you want to suggest against it choosing your site's logo, you could put "sprite" in the file name for the logo (which causes reddit to treat it as if the image were smaller, thus preferring user images). I wouldn't recommend this, but it's an option. – Mollescent

@Mollescent Could you please give me your reference for the "sprite" thing ? – Aceous

@Mollescent If you do so and I can see it works, I may be able to award you the bounty. But there are only 22 hours left, so be quick :D – Aceous

Line 766 of the scraping code – Mollescent

@Mollescent Still waiting for you answer so I can accept it. – Aceous

Answer 3

the point of @Kosh Very's answer is to set the og:image tag with the first image in your page using jQuery, but this depends on the capability of reddit's scraper, which is whether the scraper can run javascript.

another solution is to use regex to parse for images in the UGC, and use it as your og:image url in your page generator.

hope that helps.

Matteo

You do realise I have no idea how to do that ? :D – Aceous

umm, did you build your own website? or you used the open source ones? I was assuming you build your own :D – Matteo

I built my own. 4000 lines of code. But "use regex to parse for images in the UGC" means nothing to me ^^ Could you please explain ? Where should I use regex ? – Aceous

UGC means user generated content right? just checking if we're talking the same thing. if so, then you have 2 option, 1 is when the user save their content, or 2, when you display their content to the public. as for the how part, it depends on your programming language of preference, just search for it for your prefered language. for example: find image url using regex for python – Matteo