Do you need it?
Yes. I, as indie hacker with no budget to promote my app updatify.io, use all available tools. OG protocol is one of them. It takes literally few minutes to add, but it greatly improves your visual visibility on social networks. Here’s few screenshots with/without and how it differs when you post links to your SaaS on social networks
What is the Open Graph Protocol?
The Open Graph protocol is a set of meta tags that allows web developers to control how their web pages are represented when shared on social media platforms and other websites. Developed by Facebook in 2010, it has since become a widely adopted standard across the web.
Why is it Useful for Web Apps?
-
Improved Social Sharing: When users share your web app’s pages on social media, Open Graph tags ensure that the content appears in an attractive and informative way, increasing the likelihood of engagement.
-
Better Brand Control: You can specify exactly which images, titles, and descriptions appear when your content is shared, maintaining consistent branding across platforms.
-
Increased Click-through Rates: Well-crafted Open Graph tags can make your shared links more appealing, potentially increasing click-through rates from social media platforms.
-
Enhanced SEO: While not a direct ranking factor, properly implemented Open Graph tags can indirectly benefit your SEO by improving social signals and increasing engagement.
-
Cross-platform Compatibility: Many platforms beyond Facebook, including Twitter, LinkedIn, and Pinterest, recognize Open Graph tags, ensuring consistent presentation across various social networks.
How to Add Open Graph Tags to Your Website
To implement Open Graph tags on your website, you need to add specific tags within the section of your HTML. Here are the basic Open Graph tags you should consider:
-
og:title: The title of your page.
-
og:type: The type of your content (e.g., website, article, product).
-
og:image: The URL of the image you want to appear when your content is shared.
-
og:url: The canonical URL of your page.
-
og:description: A brief description of your content.
Here’s an example of how to implement these tags:
<head>
<meta property="og:title" content="Updatify | Instant product updates"/>
<meta property="og:type" content="https://updatify.io"/>
<meta property="og:image" content="https://link_to_image"/>
<meta property="og:url" content="https://example.com/page"/>
<meta property="og:description" content="A brief description of your page content."/>
head>
You can also customize these values for each page separately. For ex if its blog – you might want to have different title or image or description.
Twitter specific tags
Besides regular “og:” tags twitter has few extra tags you can use to improve visibility on twitter platform.
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="URL TO Image"
<meta name="twitter:site" content="@handle for site in case you use separate account for your app on twitter" />
<meta name="twitter:creator" content="@handle of the author, usually yours" />
For “twitter:card” you can have either “summary” or “summary_large_image. Here on screenshot below you can see difference between “summary” and “summary_large_image” types of content
Verification
The easiest way to verify how your link looks on various platforms – simply post it. Some platforms provides preview even before its posted. Also if you even posted before – platform might have your link cached, so you might see old preview. To overcome this – simply add / to end of your link, so it would look like https://updatify.io/ or even extra query param. It takes time for cache to expire.
Summary
By implementing Open Graph tags, you’re taking a significant step towards improving your web app’s visibility and engagement on social media platforms. As you saw on screenshots above – it changes how users see your links and you can provide more value to them even without making them click. It’s also very important what kind of content provided. There are services which allows you to dynamically generate OG links based on your current page UI.
Follow me on Twitter where I provide more interesting content and my journey building updatify.io
Subscribe To Our Newsletter
Enter your email address to subscribe
