Web Presence & Personal Brand pt. 2

The Open Graph Protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

From this

http://sitekite.co

To this

Facebook OG

Twitter Cards

Easy to implement!

Just add this meta data in the head of your page! 

    
    <!-- Twitter Cards -->

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="http://sitekite.co/img/oghome.png">
    <meta name="twitter:site" content="@tommygaessler">
    <meta name="twitter:title" content="SiteKite">
    <meta name="twitter:description"
    content="SiteKite allows developers to make a website to showcase who they are,
    and what they've built!">

    <!-- OpenGraph -->

    <meta property="fb:app_id" content="892776057520144" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="http://sitekite.co" />
    <meta property="og:title" content="SiteKite" />
    <meta property="og:description"
    content="SiteKite allows developers to make a website to showcase who they are,
    and what they've built!" />
    <meta property="og:image" content="http://sitekite.co/img/oghome.png" />
    <meta property="og:site_name" content="SiteKite" />

Easy to test!

Both Twitter and Facebook have debuggers so you can if you set them up correctly!

Now when you share your website on Twitter, LinkedIn, Facebook, Slack, or even in iMessage you will have a rich preview, that will drive more traffic to your site!