HTML tutorials
Improve your site with "open graph."
With social media on the up and up, it's something that we should all consider when designing/ developing websites for our clients and even ourselves. A simple way to do this is by adding "open graph" tags to your website. It's rather easy to do and no one should have a problem implementing them.
Basically, they function the same way in which META tags do.
Let me give you an example.
Code:
<meta name="og:title" content="Overclock.net">
As we can all see that is basically a META tag with "og:" in it. It's this "og:" that tells the browser it's an "open graph" function. As with all other meta tag, they go in the header of your website. E.g.:
Code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="og:title" content="Overclock.net">
</head>
There are many different types of og functions, with the above, "og:title" telling social media sites to reference the title as "overclock.net" when "shared", linked etc.
They are very self explanatory and three more needed open graph functions are here:
Code:
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.overclock.net" />
<meta property="og:image" content="LINKTOIMAGE" />
Here is a short table describing what each does:
| Function | Description |
| og:title | The title of the object, e.g. overclock.net |
| og:type | The type of object e.g. "website", "video", "image" etc. etc. |
| og:url | The URL of the object e.g. www.overclock.net |
| og:image | An image used to represent the object. |
All of the above are mandatory, as in you should now be including them in web pages. However there are still some optional functions which can be seen here.
Once you have added them to your site, or a clients site for that matter, you can check out what Facebook "knows" about your site, by clicking here: https://developers.facebook.com/tools/debug and inputting your URL. If you've added them successfully to your page, you should be taken to a blank page with the open graph properties of your website.
And that's that for another tutorial.
Thanks for reading
Now go hack the graph!
Josh
Main Rig.
(14 items) | 
Battlefield 2 review.
Battlefield 2 PC Game EA |
|
Main Rig.
(14 items) |
Battlefield 2 review.
Battlefield 2 PC Game EA |
