Lesson 11: Meta Tags & SEO (The Secret to Traffic)
When you share a link on X (Twitter) or Facebook and it shows a nice image and a description, that isn’t magic—it’s Meta Tags. These tags live in the <head> and tell the rest of the internet what your page is about.
1. The Meta Description
This is the short summary that appears under your website title in Google search results. If you don’t write one, Google will just grab random text from your page, which looks unprofessional.
The Code:
<meta name="description" content="Learn HTML, CSS, JavaScript, and PHP from scratch. Coding Learners provides easy-to-follow tutorials for beginners.">2. Social Media Tags (Open Graph)
To make your tutorials look great when people share them, we use Open Graph tags (created by Facebook but used by almost everyone).
The Code:
<meta property="og:title" content="How to Build a Website - Coding Learners">
<meta property="og:description" content="Start your journey with our free HTML course.">
<meta property="og:image" content="https://codinglearners.com/images/lesson9-banner.jpg">
<meta property="og:url" content="https://codinglearners.com/lesson-9">3. The Favicon
A Favicon is the tiny icon that appears in the browser tab. It makes your site look like a real brand rather than a student project.
The Code:
<link rel="icon" type="image/x-icon" href="/images/favicon.ico">4. Canonical Tags (Preventing Duplicate Content)
If your PHP code generates multiple URLs for the same page (like index.php?id=1 and lesson-1), Google might punish you for “duplicate content.” The canonical tag tells Google: “This is the main version of the page.”
The Code:
<link rel="canonical" href="https://codinglearners.com/lesson-1">🛠️ Practice Task: Upgrade Your Head
1. Open your index.html.
2. Go to the <head> section.
3. Add a <meta name="description"> that describes CodingLearners.com.
4. Add a <meta name="keywords" content="HTML, PHP, coding for beginners, tutorials">. (Note: Google doesn’t use these much anymore, but smaller search engines still do!)
2 Responses
[…] Previous Next […]
[…] Previous Next […]