Meta Tags and SEO

Help search engines understand Alex's portfolio with the right meta tags and optimize it for better search rankings.

Meta tags are like business cards for your web pages. They tell search engines what your page is about. SEO stands for Search Engine Optimization — making your website easier for Google to find and understand. Think of it this way. When you write a book report, you put your name and the book title at the top. Meta tags do the same thing for web pages. They give search engines the important details about what's inside. Alex's portfolio looks great to visitors. But search engines can't see the pretty colors or read the text like humans do. They need special hints in the HTML code. That's where meta tags come in.

Essential Meta Tags

Every web page needs a few basic meta tags. These go in the head section — the part visitors never see but search engines read first. The title tag shows up in browser tabs and search results. Make it specific and helpful. "Alex's Portfolio" is okay. "Alex Johnson - Web Developer Portfolio" is better. The meta description appears under your link in Google search results. It's like a movie trailer for your webpage. You have about 160 characters to convince someone to click. The viewport meta tag makes your site work on phones. Without it, mobile visitors see a tiny desktop version they have to pinch and zoom.

<!-- Essential meta tags for Alex's portfolio -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Alex Johnson - Web Developer Portfolio</title>
  <meta name="description" content="Web developer specializing in modern HTML, CSS, and JavaScript. View my projects and get in touch for your next website.">
</head>

What just happened?

The charset tells browsers how to read special characters. The viewport makes the page mobile-friendly. The title appears in the browser tab. Try this: Right-click and view the page source to see all the meta tags in action.

Open Graph Tags

When someone shares Alex's portfolio on Facebook or Twitter, what shows up? Without Open Graph tags, it might be a broken mess. With them, you control exactly how the link looks. Open Graph was created by Facebook. But now most social platforms use it. You set the title, description, and image that appear when your link gets shared. The og:title can be different from your page title. Maybe your page title is "Alex Johnson - Web Developer Portfolio" for SEO. But for social sharing, "Check out my latest web projects!" works better. The og:image should be 1200x630 pixels. That's the size social platforms prefer. Make it eye-catching because it's the first thing people see.

<!-- Open Graph tags for social media sharing -->
<meta property="og:title" content="Alex Johnson - Web Developer">
<meta property="og:description" content="Modern websites built with clean code and creative design">
<meta property="og:image" content="/images/portfolio-preview.jpg">
<meta property="og:url" content="https://alexjohnson.dev">
<meta property="og:type" content="website">
<meta property="og:site_name" content="Alex Johnson Portfolio">

<!-- Twitter uses its own tags too -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:creator" content="@alexjohnson">

Test your Open Graph tags with Facebook's Sharing Debugger or Twitter's Card Validator. They show you exactly how your link will look when shared.

SEO Best Practices

Good SEO isn't about tricking Google. It's about making your content clear and valuable. Search engines want to show users the best, most relevant results. Write your meta descriptions like you're telling a friend about your site. What makes it worth visiting? What will they find there? Be specific and honest. Keywords matter, but don't stuff them everywhere. If Alex is a web developer in Portland, that phrase should appear naturally in the content and maybe once in the meta description. Page speed affects SEO rankings. Heavy images slow down your site. Use the right image formats and compress them. Your meta tags don't help if people leave because your page takes forever to load.

Good Meta Description

"Web developer in Portland creating custom websites for small businesses. View my portfolio of 20+ projects built with modern HTML, CSS, and JavaScript."

Bad Meta Description

"Web developer web development websites Portland Oregon HTML CSS JavaScript coding programming sites web design designer"

Structure your HTML with semantic tags. Use <header>, <main>, and <article> instead of just <div> everywhere. Search engines understand the meaning of semantic tags better. Internal linking helps too. If Alex has a projects page, the home page should link to it with descriptive text. "View my projects" is better than "click here" for both users and search engines.

Technical SEO Tags

Some meta tags handle technical stuff behind the scenes. The robots tag tells search engines what they can and can't do on your page. Most of the time, you want search engines to index your page and follow your links. But maybe Alex has a test page that shouldn't show up in Google results. That's when you use noindex. The canonical tag prevents duplicate content issues. If the same page can be reached through multiple URLs, canonical points to the "official" version.

<!-- Technical SEO tags for Alex's portfolio -->
<meta name="robots" content="index, follow">
<meta name="author" content="Alex Johnson">
<link rel="canonical" href="https://alexjohnson.dev/">

<!-- Language and location -->
<html lang="en">
<meta name="geo.region" content="US-OR">
<meta name="geo.placename" content="Portland">

<!-- Structured data for rich snippets -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Person",
  "name": "Alex Johnson",
  "jobTitle": "Web Developer",
  "url": "https://alexjohnson.dev"
}
</script>

Common Mistake

Don't set robots to "noindex, nofollow" on pages you want people to find through Google. That tells search engines to completely ignore your page.

Complete Portfolio Head Section

Here's how all the meta tags work together in Alex's portfolio. This goes in the <head> section of every page, customized for each page's content. Notice how each meta tag has a specific job. The title and description target search engines. Open Graph handles social media. The viewport makes mobile work. Together, they create a professional web presence.

<!-- Complete head section for Alex's homepage -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  
  <!-- SEO meta tags -->
  <title>Alex Johnson - Web Developer Portfolio | Portland, OR</title>
  <meta name="description" content="Experienced web developer in Portland creating modern, responsive websites. Specializing in HTML5, CSS3, and JavaScript. View my portfolio of 20+ projects.">
  <meta name="keywords" content="web developer, Portland, HTML, CSS, JavaScript, responsive design">
  <meta name="author" content="Alex Johnson">
  
  <!-- Open Graph for social sharing -->
  <meta property="og:title" content="Alex Johnson - Web Developer">
  <meta property="og:description" content="Modern websites built with clean code and creative design">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://alexjohnson.dev">
  
  <!-- Technical SEO -->
  <meta name="robots" content="index, follow">
  <link rel="canonical" href="https://alexjohnson.dev/">
</head>

The magic happens when someone searches for "web developer Portland" or shares the link on LinkedIn. Google sees the optimized title and description. Social platforms grab the Open Graph data. Mobile devices use the viewport setting. Search engines love websites that help users find what they need quickly. Your meta tags are the first impression. Make them count.

Quiz

Up Next: Accessibility Basics

Make Alex's portfolio work for everyone with proper accessibility features and ARIA attributes.

← Previous Course Index Next →