Inside the <head> element of every webpage, you will find a collection of <meta> tags. These tags do not display any content on the screen. Instead, they provide metadata—data about the data.
Meta tags are the direct line of communication between your website and outside systems like Google's search algorithms, mobile phone browsers, and social media platforms (like Facebook or Twitter).
If you create a blank HTML template today, there are three meta tags that you must almost always include for the page to function properly in the modern era.
This tells the browser exactly what alphabet dictionary it should use to read your code. If you omit this, special characters, emojis, or foreign languages might render as weird boxes or question marks. UTF-8 is the standard for the modern web.
<meta charset="UTF-8">Before smartphones existed, all websites were designed for giant computer monitors. When iPhones first launched, they would take a massive desktop website and simply "shrink" it down to fit the tiny screen, making the text unreadable without zooming in.
The viewport tag tells a mobile phone: "Do not shrink this page! Render the page at the exact native width of the physical device screen." Without this tag, responsive CSS design is impossible.
<meta name="viewport" content="width=device-width, initial-scale=1.0">When you search for something on Google, the short paragraph of text sitting directly underneath the blue clickable link is grabbed directly from this specific meta tag. It is crucial for convincing users to actually click your link over your competitors.
<meta name="description" content="Free, easy-to-understand HTML coding tutorials for beginners.">Have you ever copied a link, pasted it into an iMessage, a Discord chat, or a Facebook post, and watched it magically expand into a beautiful card with a title and a thumbnail image?
This happens because the developer included specialized meta tags—usually the Open Graph protocol (created by Facebook) or Twitter Cards.
<!-- Open Graph Data for Social Media Previews -->
<meta property="og:title" content="My Programming Blog">
<meta property="og:description" content="Read my latest articles!">
<meta property="og:image" content="https://example.com/thumbnail.jpg">
<meta property="og:url" content="https://example.com"><meta name="keywords" content="..."> to stuff hundreds of search terms into a page to trick Google into ranking them higher. Modern search engines completely ignore the keywords tag due to this historical abuse.