Making website social media friendly with Open Graph

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.

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.

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.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *