DEV Community: Randeep Rana

Open Graph Tags: The Hidden SEO Weapon That Can 10x Your Clicks

Randeep Rana — Fri, 27 Feb 2026 19:58:31 +0000

Open Graph Tags: The Small Thing That Can Save Your Website 🚑

You built a beautiful website.

It’s fast ⚡ It’s clean ✨ It even scores 95+ on Lighthouse 🏆

You share the link on LinkedIn…

And boom 💥

No image.

Weird cropped text.

Your footer showing as description.

Pain. Pure pain. 😭

This is exactly where Open Graph (OG) tags come in and quietly save your reputation.

So… What Are Open Graph Tags? 🤔

Open Graph tags are small meta tags added inside your <head> that control how your website looks when someone shares it on social media.

Without OG tags, social platforms basically say:

“Hmm… let me guess what this page is about.” 🎯

And trust me — they guess wrong.

Why They Can Literally Save Your Website 🛟

1️⃣ First Impressions Matter (A Lot)

When someone sees your link, they don’t see your website first.

They see the preview card.

If that card looks boring, broken, or random… nobody clicks. 🚫

If it looks sharp, clear, and valuable?

Now we’re talking. 👀🔥

OG tags let you control:

The exact title people see 📝
The description that sells the click 💬
The image that grabs attention 🖼️
The URL that builds trust 🔗

It’s like choosing your DP before joining a Zoom call.

Small detail. Big impact. 😉

2️⃣ More Clicks Without Extra Traffic Effort 📈

You can spend hours:

Writing great content ✍️
Improving SEO 🔍
Optimizing performance ⚙️

But if your shared link looks ugly… people scroll past it. 🫠

A good Open Graph setup can increase your click-through rate without changing a single word in your article.

Same link.

Better packaging.

More clicks. 🚀

Marketing people call it optimization.

Developers call it “just adding a few meta tags.” 😄

3️⃣ It Protects Your Brand 🛡️

Without OG tags, platforms might:

Pick your logo as the preview image
Show random sidebar text
Cut off your title mid-sentence

That’s not a good look — especially if you’re selling services, building a SaaS, or growing a personal brand.

If you’re serious about your website, OG tags are not optional. They’re basic hygiene. 🧼

A Simple Example 💻


html
<meta property="og:title" content="How to Build High-Performance Websites" />
<meta property="og:description" content="Learn practical strategies to build fast, scalable web apps." />
<meta property="og:image" content="https://example.com/og-image.jpg" />
<meta property="og:url" content="https://example.com/blog/performance" />
<meta property="og:type" content="article" />

New To Coding?👋 These 3 VS Code Extensions can help you to save your time and make you more productive.🚀

Randeep Rana — Thu, 18 Nov 2021 18:56:49 +0000

Welcome to the coding community, if you just started your journey into coding or you are working as a professional, you all can read this blog.

Disclaimer:- These all are my personal favourite extensions which helped me, to become productive and more efficient in coding.

As slowly as you move forward in your coding journey you can go with other extension as well. But in the beginning these three VS Code Extensions will be wonderful for you.

So Without wasting further time let me tell you about these three extensions.

1. PRETTIER

This is one of the most recommended VS Code extension by developers all around the world. You know why?

Because Prettier does exactly what it says. It makes your code pretty and more readable.

Most of the time when someone starts their career into coding with the excitement but after seeing bad indentations and messy code, they get frustrated and they usually move their career into different career field. This is one of the common phrases that I have heard from coding newbies.

But Here Prettier came into picture, It automatically does the indentation for you and give you a awesome formatted code.

Even if you are a experienced person, prettier can save your time.
You don't have to do indentation for every line, prettier will do everything for you. You just to need to install it.

This is why Prettier is one of the most favourite VS code extension of developers.

2. Path Intellisense

It is a Visual Studio Code plugin that autocompletes filenames.

This extension is really very helpful when you have multiple files to attach, It can save a lot of time, because it put the file location or filenames automatically, so you don't have to waste your time to write the whole path manually.

This is my second favourite extension and I recommend you to try it once.

3. Bracket Pair Colorizer

This extension allows matching brackets to be identified with colors. Because you can identify which open bracket is the pair of which closing bracket you save a lot of time.

The user can define which cards to combine and which colors to use. You can change color settings as per your preference.

Code without Bracket Pair Colorizer:

Code with Bracket Pair Colorizer:

Each pair of brackets, curly brackets and parentheses has its own color, which makes it very easy to identify where you might have an 'oops'.

So Try these extensions and do let me know, your favourite vs code extensions in the discussion section.

Feel Free to give your views and suggestions. Your feedbacks are always appreciated.

See you in the next blog. Thanks For Reading.

Read My Recent Blogs

How I created My Portfolio with Nextjs and plainCss🚀

How I created my portfolio with Nextjs and PlainCSS!

Randeep Rana — Tue, 19 Oct 2021 13:29:49 +0000

At present Next.js has been a very popular library to build beautiful, scalable Full-Stack Applications. Today I would like to share my experience on building a portfolio with Next.js.

Before going to my Portfolio's explanation, Let me give a brief intro about Next.js.

Why Next.js?

Next.js is a React Framework used for front-end development that enables us to use functionalities such as generating static websites and server-side rendering for React-based web applications.

It's a great tool to build your next website. It has many great features and advantages, which can make Next.js your first option for building your next web application.

If you want to learn more about it please visit Next.js Official Website.

The Idea.

One Year ago⏲ I built my last portfolio website with React.js and SASS, and till now I was using that one. But Last weekend I thought why not make a new portfolio. Because it's my current fav framework so I picked Next.js and I started working on it.

Steps

Firstly I was planning🤔 to make it only single page portfolio, but then I decided to use Next.js routing and lets make different pages for different data, like about page, blog page, contact page and projects page.

After Deciding Number of pages, I started working on Homepage or you can say landing page. I divided homepage into three sections, Hero Section, About, Skills.

Background Videos in website is always excites😍 me, so I used a video in Hero Section's background, and I used Kaushan script fonts for Main Heading in Hero Section.

In About Section, I added two boxes one for image and second for details and A button to read more, and it redirects to about page.
For Skills section, I added logos of all framworks and technologies in a single box. I prefer logos instead of text because it creates attention.

Let's come to Other Pages, For Project's Page I made reusable component, this component create a box and it divide the screen width equally into two boxes and one box contains the Project's Image and other box contains the project's title and description. I loop through this component in projects data array and my projects page is ready.

About page contains the same component which we have in project page and I added my data in it and it works fine for about page as well.

Please Have a look on my Portfolio🚀.

If you want to check the source code please visit my Github Profile.

Hope you liked it

Thank you guys for reading my first blog. Feel free to write your view and suggestion. Your feedback is always appreciated😄.

Happy Coding😉