Fun fact: I learned SEO after learning how to code. So I always knew the importance of an optimized title for SEO purposes, but I never put the one and two together until now.
While relearning HTML, I was reading about the title tag. The title tag's purpose is to tell search engines and you what the web page is about.
Well, mostly, it gives it a name. So yep, it is the name of the web page. No matter if the web page is the home page or a page of the home page, each one should have its own name.
And that's where the title tag comes into play.
Where To Find The Title Tag?
In the HTML file, the title tag is at the beginning of the file. It will look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
If you don't give your web page a name, it will display as the name of the file, which could be "index.hmtl".
So before you start coding the rest of your web page, take this time to properly name the title.
On the user side of the browser, we can see the title tag information on the tabs. Look at what's on your current tab right now. As I'm writing this post, mine says: "New Post - DEV Community".
That means the devs named this specific web page "New Post" along with their branding "DEV Community" as the title.
If you are using a CMS like WordPress, configuring the title tag will be in Settings > General > Site Title.
Depending on certain plugins for WordPress, you can configure the title on each webpage and add your branding at the end of the pages, just like DEV Community did.
What Does The Title Tag Have To Do With SEO?
SEO stands for search engine optimization. It's when you organically and strategically optimize a website or webpage for it to show up on search engines by certain keywords.
So when it comes to reading the code on your web page, search engine browsers will view the title tag first before your H1 tag.
The difference between the two tags is the title tag gives your webpage a name, while the H1 tag defines the content of the webpage.
Was that kinda confusing? I'll give you an example.
Let's say you (Joe Johnson) are a freelance web developer located in Atlanta, GA. On your home webpage, the title could be:
<title>Joe Johnson | Atlanta Web Developer</title>
And the H1 on your home page could say something like:
<h1>Joe Johnson Is A Creative Freelance Web Dev In Atlanta</h1>
So now, search engines will have a clear understanding of what the website is about and people can now find your website by keywords, "freelance web developer, web developer in Atlanta, Joe Johnson web developer, etc..."
When doing local SEO, it is important to include your location in your title tag and header tags.
But don't overdo it because it could come off as spammy and search engines could flag your website for keyword stuffing.
Are the Title and Head Tag The Same?
Nope, they are completely different. The head tag is where you put all of the important information strictly for browsers to understand what your web page is all about.
This information is not shown on the webpage as content.
It includes the meta tag, (charset encoding), which tells the browsers how to display special characters and symbols from different languages.
The meta tag also tells the browser the viewpoint name and how to scale the content of the webpage.
And lastly, the title tag is hosted inside of the head tag.
I hope this information helps you because it helped me understand how to properly title my webpages instead of giving them generic names like a placeholder.
Is anyone into SEO? I'm currently learning how to keep SEO in mind when creating clean code while optimizing it for a great user experience.
Top comments (0)