Making content on the Internet is fun but is it better when people seeing your work. The best way to get new visitors of your website or blog is sharing that in social media. Of course, you must make a good first impression when someone sees what you share. Good sneak peek of what you share is a good point to click on it and read more. You can modify automatically created a card from a shared link, that gives you control of how people see it.
Open Graph
Open Graph is a standard introduced by Facebook to help developer integrate website with Facebook. In section <head> of your HTML document, you setting meta tags with information of your website. Facebook use it to create a card that people see when scrolling Facebook wall. Some information isn’t displaying on this card but is good to set it because that helps Facebook determine your receiving group. You can also set meta tags for Twitter.
Open Graph Examples
Let’s start with Facebook. The example that you see is from my personal page.
|
1 2 3 4 5 6 |
<meta property="og:title" content="Mateusz Zbylut - programmer, contractor, blogger"> <meta property="og:locale" content="en_US"> <meta property="og:url" content="http://mateuszzbylut.com/"> <meta property="og:type" content="website"> <meta property="og:description" content="Programmer portfolio, personal site by Mateusz Zbylut, good blog and more. Java, web developer and mobile application developer. Blog about programming."> <meta property="og:image" content="http://mateuszzbylut.com/img/Mateusz-Zbylut.png"> |
First I setting title, then information about the language of content. Next url, content type – I used “website” but is more types like article or video. At the end, I set page description and image that would be displayed on a card.
Twitter meta tags look a little bit different but data that you set is similar to Facebook.
|
1 2 3 4 5 6 |
<meta name="twitter:card" content="summary"> <meta name="twitter:title" content="Mateusz Zbylut - programmer, contractor, blogger"> <meta name="twitter:url" content="http://mateuszzbylut.com/"> <meta name="twitter:site" content="@chinet_zbylut"> <meta name="twitter:description" content="Programmer portfolio, personal site by Mateusz Zbylut, good blog and more. Java, web developer and mobile application developer. Blog about programming."> <meta name="twitter:image" content="http://mateuszzbylut.com/img/Mateusz-Zbylut.png"> |
Mata tag with name “card” is like Facebook “type”. In “site” you can type Twitter nick like I do this. Other meta tags are similar to Facebook.
More about Open Graph you can read on http://ogp.me/. About Twitter Card, you can read here: https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.
Now you have your personalized card when you or someone else share your content in social media people would see your own sneak peek.
Amazing! Thanks.