Creating a cool website is only half the battle. The biggest challenge is how to make your website appear on the first page of Google when people are searching.
Now, this is where SEO (Search Engine Optimization) plays a role, and one of its secret weapons is Metadata Tags.
Metadata is like a "cover letter" inside your HTML code that tells Googlebot:
"Hey, my website is about this!"
To make your website more eye-catching to Google and attract more visitors, here is a list of mandatory metadata tags you need to install, summarized in everyday casual language.
1. Title Tag (Page Title)
This is the most crucial tag. The title you write here will appear in Google search results (SERP) and also in the user's browser tab.
Code:
<title>Effective Ways to Learn Coding from Scratch for Beginners</title>
SEO Tips:
- Place the main keyword at the beginning.
- Keep the length between 50โ60 characters so it doesn't get cut off in Google.
- Make it attractive to spark curiosity and get clicks, i.e., have a high Click-Through Rate.
2. Meta Description (Page Description)
Meta description is a brief summary of your web page's content. It appears right below the title in Google search results.
Code:
<meta name="description" content="Want to learn coding but don't know where to start? Check out this comprehensive guide to learning coding from scratch specially for beginners!">
SEO Tips:
Although it doesn't directly boost rankings, a good description can encourage people to click.
Ideal length is around 120โ160 characters.
Include a subtle Call to Action (CTA), such as:
- Read more here!
- Check it out!
3. Meta Robots (Signal for Googlebot)
This tag gives instructions to search engine crawlers, whether they are allowed to index the page or not.
Code:
<meta name="robots" content="index, follow">
Explanation:
index: "Please Google, display this page in search results."follow: "Please also follow the links on this page."
If there is a private page, like an admin dashboard, you can change it to:
<meta name="robots" content="noindex, nofollow">
4. Open Graph Tags (Make It Look Great When Shared on Social Media)
Have you ever shared a web link on WhatsApp, Facebook, or X, and then the image, title, and description appeared neatly?
Well, that's thanks to Open Graph (OG) Tags.
Although focused on social media, these tags are important for driving indirect traffic to your website.
Code:
<meta property="og:title" content="Effective Ways to Learn Coding from Scratch" />
<meta property="og:description" content="Complete guide for beginners wanting to enter the IT world." />
<meta property="og:image" content="https://your-website.com/coding-image.jpg" />
<meta property="og:url" content="https://your-website.com/learn-coding" />
SEO Tips:
Make sure the image you use in og:image has the right dimensions, usually 1200 x 630 pixels, so it doesn't break when shared.
5. Meta Viewport (Mobile-Friendly)
Nowadays, Google follows the Mobile-First Indexing principle.
That means Google prioritizes websites that look good on mobile phones. This viewport tag is mandatory so your website automatically adjusts to the device screen size.
Code:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
SEO Tips:
Never skip this tag. If your website looks messy on mobile, Google will be reluctant to boost your ranking.
6. Canonical Tag (Prevents Duplicate Content)
Sometimes, a single web page can be accessed through multiple different URLs.
Examples:
httpversionhttpsversion- URL with additional parameters like
?ref=social
Google can get confused because the content is the same but the URLs are different. To avoid being flagged as plagiarism or duplicate content, you can use the canonical tag.
Code:
<link rel="canonical" href="https://your-website.com/learn-coding" />
SEO Tips:
This tag tells Google:
"Hey Boss, this is the original and main URL; the others are just aliases."
Conclusion
Optimizing meta tags is like dressing up your website before meeting the "future in-laws," i.e., Google.
If your meta tags are tidy, Google will find it easier to understand your website's content, and the chance to sit on the first page will be much wider.
So, have you checked your website's HTML code yet? Are all the tags above complete?
Written by
Wilan
A regular contributor to Bali Island Tekno who actively shares knowledge about technology, programming, and the world of software engineering.