Game Website Basics: Favicon and Facebook Image Preview (OpenGraph for Social Websites like Reddit, Google Plus…)

Many games’ websites (for example the amazing Heroine Dusk as of May 2nd, 2013) miss two minimal elements that make a game’s website more noticeable and sharing it more rewarding to the sharing party: Favicons and preview images.

Favicons help find your website among 10-100 tabs.

Preview images allow users of the social website see content before clicking the link. This is necessary to process the masses of links in Facebook feeds for example. Text gets skipped.

Favicon

All you have to do is upload a 16×16 image “favicon.ico” and add the following code to the <head> section of all your HTML pages.

<link rel='shortcut icon' href='favicon.ico' />

You don't have to use .ico file format (supported by GIMP). See Wikipedia's How to use Favicons for other formats.

How a tab looks with and without favicon in Chromium's tabs

Favicon of your game site in tabs

Isn't this better? Even if the icon is ugly, at least it helps differentiate from other tabs.

Preview image

All you have to do is upload a screenshot of your game "screenshot.jpg" and add the following code to the <head> section of all your HTML pages. Important: the image path has to be absolute, not relative.

<meta property='og:image' content='http://example.com/screenshot.jpg' />

Sharing a link on Facebook with and without preview image

Social Media Previews thanks to OpenGraph

Now the "share" is noticeable in the Facebook/social whatever website feed.

OpenGraph

OpenGraph has many more metadata features. For example you can also use og:description to change the text that is displayed by social media sites like Facebook. Images are more important though. Sorry to say.

Other Stuff

Still reading? You should add short descriptions of your game to the website title and body. Think about the fact that the <head> <title> element gets displayed as the title in Google search results. Think about how to describe your game to somebody who does not know what your game is or who doesn't know the definition of your game's genre.

What I said above in action

I made a silly game a while ago. The best part about making it was learning about OpenGraph.

Advertisements
This entry was posted in qubodup and tagged , , , , , . Bookmark the permalink.

2 Responses to Game Website Basics: Favicon and Facebook Image Preview (OpenGraph for Social Websites like Reddit, Google Plus…)

  1. Thanks for the tips!

    Another thing I learned is to use this Facebook Debugger to test: https://developers.facebook.com/tools/debug

    My first image was too small at first, so it wasn’t showing up when I tried to Share. Plugging my URL into the debugger gave me helpful information, specifically that my image was too small (and that I should add title and url tags). Once I uploaded a larger image it was fixed.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s