{"id":685,"date":"2010-08-09T19:33:17","date_gmt":"2010-08-10T02:33:17","guid":{"rendered":"http:\/\/www.bryanhadaway.com\/?p=685"},"modified":"2025-05-22T15:26:11","modified_gmt":"2025-05-22T22:26:11","slug":"adding-social-scrape-images","status":"publish","type":"post","link":"https:\/\/webguy.io\/blog\/adding-social-scrape-images\/","title":{"rendered":"Adding Social Scrape Images"},"content":{"rendered":"

UPDATE<\/strong> \u2014 For Facebook, use:<\/p>\n

<meta property="og:image" content="http:\/\/website.com\/images\/icon.png" \/><\/code><\/pre>\n
From the title of this article it may not be immediately understandable what it’s about, but plenty of people are looking for this solution.<\/p>\n
Many have asked how do I set the image for sharing links?<\/em> They are referring to social sites like Facebook, Twitter, etc. when someone chooses to share an article of yours from your website there is an opportunity to share a thumb with the post. What the social websites do is scrape the page for a selection of images, sometimes that’s enough, sometimes it doesn’t serve up any related or quality images.<\/p>\n
Since images spark the eye more than just text, which could lead to a click-through to your website, naturally it would be beneficial to have relevant thumbs go out with these shares.<\/p>\n
So how can you control this?<\/em> There isn’t really any special code to define social thumbs (yet anyway that I know of). Well, we’ve learned that these sites just scrape the page for whatever images are available and serve them up. Okay, so then it’s just as easy as posting the image you want to be used at the very top of the page, right? Well yes… that would work, but it’s not always desired to post this image on your actual page for visitors to see while reading.<\/p>\n
So, with a little HTML and CSS, we can set an image to be picked up by social websites, but remain hidden to visitors on the website and here’s how:<\/p>\n
HTML<\/h2>\n
<img src="http:\/\/website.com\/images\/some-thumb.png" alt="Website Name" class="hide" \/><\/code><\/pre>\n
(you’ll want to paste this in just below the <body><\/em> tag of the page you want and I recommend using the absolute URL path for the image)<\/em><\/p>\n
CSS<\/h2>\n
.hide{display:none}<\/code><\/pre>\n
(drop in your stylesheet)<\/em><\/p>\n
OR Use a Quick & Dirty One-off<\/h2>\n
<img src="http:\/\/website.com\/images\/some-thumb.png" alt="Website Name" style="display:none" \/><\/code><\/pre>\n
(again you’ll want to paste just below the <body><\/em> tag)<\/em><\/p>\n
Now this will load it up for social site robots to scrape and collect, but will remain hidden to your users and not interfere with your design.<\/p>\n
UPDATE<\/strong> \u2014 Another trick to test out as well for Facebook is:<\/p>\n
<link rel="image_src" href="http:\/\/website.com\/images\/some-thumb.png" \/><\/code><\/pre>\n
(should be added between your <head> … <\/head><\/em> tags \u2014 doubling this up with my custom solution below should cover it)<\/em><\/p>\n
For WordPress users, here’s a plugin<\/a>.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"
UPDATE \u2014 For Facebook, use: <meta property="og:image" content="http:\/\/website.com\/images\/icon.png" \/> From the title of this article it may not be immediately understandable what it’s about, but plenty of people are looking for this solution. Many have asked how do I set the image for sharing links? They are referring to social sites like Facebook, Twitter, etc. …  Adding Social Scrape Images<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[39,17,40],"tags":[239,254,212,218,229,210,240,213],"class_list":["post-685","post","type-post","status-publish","format-standard","hentry","category-code","category-how-to","category-social-media","tag-code","tag-css","tag-facebook","tag-how-to","tag-linkedin","tag-myspace","tag-social-media","tag-twitter"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/685","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/comments?post=685"}],"version-history":[{"count":0,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/posts\/685\/revisions"}],"wp:attachment":[{"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/media?parent=685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/categories?post=685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webguy.io\/blog\/wp-json\/wp\/v2\/tags?post=685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}