Friday, April 15, 2016

Tips and Tricks for Posting Links to Your Site on Social Media

Ever wonder how you can choose which image shows up in the thumbnail for Facebook, Reddit, and Twitter? If you are posting a link your your own website, it is up to you how the thumbnail appears, but it takes a bit of work to really get it going.

First, sites like Facebook and Reddit use a thing called Open Graph protocol to search through your html to grab the info that will post as a thumbnail. To enable Open Graph protocol on your website, swap out your <html> tag for <html prefix="og:">. Next, use Meta tags to set the specific information you want to use. For Facebook and Reddit, the most important of these is the image.

These are the meta tags you will most likely need:
<meta property="og:title" content="YourTitle" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://YourWebsiteURL" />
<meta property="og:image" content="http://YourImageURL" />
<meta property="og:image:width" content="YourImageWidth" />
<meta property="og:image:height" content="YourImageHeight" />
<meta property="og:image:type" content="image/jpeg" />

Anything that starts with "Your..." should be filled in by you :)  There seems to be a minimum size on the image, which I found out through trial and error but could not find documentation on (it worked for me once I got above 500x300). These meta tags go BETWEEN your <head> tags.

Once you have filled those in and uploaded your site, you can test using this debugging tool (so you don't have to keep making actual Facebook posts to test)  -

Since Reddit and Facebook use the same protocol, testing it for Facebook should mean it will also work for Reddit.

Now for will need another set of meta tags (Twitter does not use the Open Graph protocol to grab info, Twitter has their own custom "cards"). Here are the Twitter meta tags for Google Play (the ones for iOS are similar):

<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@YourTwitterHandle">
<meta name="twitter:description" content="Your Description.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:googleplay" content="Your App Title">
<meta name="twitter:app:id:googleplay" content="com.YourCompanyName.YourAppName">
<meta name="twitter:app:url:googleplay" content="http://YourAppURLOnePlayStore">

So when I was all done filling this in for Slapdash Bones, here's what I had:

<html prefix="og:">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="sbd.css" type="text/css" media="screen" />
    <meta charset="utf-8" />
    <title>Slapdash Bones</title>
<meta property="og:title" content="Slapdash Bones" />
<meta property="og:type" content="website" />
<meta property="og:url" content="" />
<meta property="og:image" content="" />
<meta property="og:image:width" content="770" />
<meta property="og:image:height" content="600" />
<meta property="og:image:type" content="image/jpeg" />
<meta name="twitter:card" content="app">
<meta name="twitter:site" content="@moarKitties">
<meta name="twitter:description" content="Slapdash Bones is a multiplayer dice game for 2-4 players on one phone or tablet.">
<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:googleplay" content="Slapdash Bones">
<meta name="twitter:app:id:googleplay" content="com.Astire.Slapdash_Bones">
<meta name="twitter:app:url:googleplay" content="">

And this is what it looks like on Twitter -
And on Facebook -

No comments:

Post a Comment