DEV Community

Gergő Móricz
Gergő Móricz

Posted on

How to make your site shareable

Using Open Graph tags, you can make sure your site will be correctly previewed on Facebook, Twitter, and other social networks.

You can use meta tags to specify your Open Graph settings in the HTML head.

<meta property="og:type" content="website" />
<meta property="og:url" content="http://yoursite.com" />
<meta property="og:title" content="My Website" />
<meta property="og:image" content="http://www.navipedia.net/images/a/a9/Example.jpg" />
Enter fullscreen mode Exit fullscreen mode

These tags are enough to make your site properly came up when sharing the link to it.

Do you want something different than a website as a type? Here are all the Open Graph types.

Do you have a Facebook application for your site? Perfect! Let's add that.

<meta property="fb:app_id" content="0000000000000000" />
Enter fullscreen mode Exit fullscreen mode

You can see how your crawled site looks like on Facebook with this dev tool.

Do you have a Twitter handle for your site? We can add that too!

<meta name="twitter:site" content="@skiilaa">
Enter fullscreen mode Exit fullscreen mode

Note that we are using the name attribute, not the property attribute in the meta tag.

You can see how your crawled site looks like on Twitter with this dev tool.

Do you want some other card style than the default one? We can fix that.

<meta name="twitter:card" content="summary_large_image">
Enter fullscreen mode Exit fullscreen mode

Learn More

Top comments (0)