Coffee Space 
Previously I discussed doing some search engine optimization, to help search engines pick up the site a bit more and for people to find content. This is a quick discussion on how that is achieved (or attempted).
Allowing Open Graph to introduce itself:
The Open Graph protocol enables any web page to become a rich object in a social graph. For instance, this is used on Facebook to allow any web page to have the same functionality as any other object on Facebook.
While many different technologies and schemas exist and could be combined together, there isn’t a single technology which provides enough information to richly represent any web page within the social graph. The Open Graph protocol builds on these existing technologies and gives developers one thing to implement. Developer simplicity is a key goal of the Open Graph protocol which has informed many of the technical design decisions.
As I understand it, Facebook created some new standard a while back to give those “link previews” on their website, which requires a small amount of content (such as an image and some text) to bait a user into clicking them. While it is possible to pull out this information by default (and most social sites do attempt this), it usually pulls out the wrong information as it doesn’t understand the content correctly.
This standard asks you to add a few more metadata blocks in your page’s header, which they scan for when people paste links to your site. The most basic ones are:
og:title – This is the title of your content and should be plain text only.og:type – This is the type of the content. They appear to support website, music, video, article, book and profile - each with several other properties that can be set to expand.og:image – A preview image representing your content. There are some vague rules, like that it must be no longer than 3:1 aspect ratio, should be some high resolution (although this bar is always rising), etc. This should be the full URL of the image (not relative).og:url – This should be the full URL of the content (not relative).If you can’t provide all of these, it’s almost not worth trying to support any as they’ll struggle to make a proper object. These are some others that I recommend setting as during testing they are used regularly:
og:description – Some unique description of your content. Personally I would just take the first paragraph of your content, or whatever text you can generate that describes what exists.og:locale – What language your content is in. Some service will attempt to translate your content for you.Of course for this site, I just expanded the ever increasing build script (that is now too long to even post here). An example for this page (at the time of writing) is:
0001 <meta property="og:title" content="Open Graph" /> 0002 <meta property="og:url" content="https://coffeespace.org.uk/projects/open-graph.html" /> 0003 <meta property="og:image" content="https://coffeespace.org.uk/logo.png" /> 0004 <meta property="og:type" content="article" /> 0005 <meta property="og:description" content="Previously I discussed doing some search engine optimization[..]" /> 0006 <meta property="og:locale" content="en_GB" /> 0007 <meta property="og:audio" content="https://coffeespace.org.uk/projects/open-graph.mp3" />
As you can see, I also provide the audio that is generated for each page. I don’t believe that social media sites actually make use of this additional information, but my intention is to perhaps make life easier for say a blind viewer or some crawler.
After I release my new project, in theory website traffic should increase (if my ideas about large numbers of links is correct). I have already seen a small up-take - perhaps search engines have already begun caching the new page formats.