In this local seo tutorial we explore with live examples how to implement H1, H2, H3 tags via Duda, Wordpress and the Joomla CMS. The principles are the same whether you are using a CMS or a hand coding html.
Local Business SEO | Page 1 | Page 2
H1, H2, H3, Examples | Local SEO Tutorial | Duda Joomla Wordpress | Dallas, TX
Mike Zittel - SEO speaker (00:00):
Hey, it's Mike with Serr.biz search engine, ranking rules, SEO tutorials, and comprehensive digital marketing tutorials. Pretty much anything digital, digital marketing, we write about. So today we're going to now implement some header tags on a web page, and we're also gonna explore bold tags, why and where and how et cetera, et cetera. If you're not sure what a header tag is, please check out the previous tutorial that we did on what header tags are. So let's just jump in. We're gonna optimize a DUDA page. Okay. So this is, is a Duda website as we've been working on it before in other tutorials, it's TKA dojo. And this is the wysiwyg editor. This is where you edit your page, add content, et cetera, et cetera. We have our global navigation right here. The, you could technically , speaking include an H1 tag here, a header tag, if you wanted except this is global.
Do not set a global H1 tag - This applies to Duda, Wordpress, Joomla any HTML page
Mike Zittel - SEO speaker (01:12):
So it would be the exact same one all the way across the entire website. And you're supposed to use header tags in their proper format. So H1 is always the most important and it should be found in your code first, then H2, then H3, H4, H5, et cetera. So it's really not advisable to make a global header tag that is in the H1, because it would be the same tag all the way through your website. And that's not really what we want. We want to have unique and proper markup for our SEO keywords for each individual page. However, down in the footer if you wanted to use a global header tag, like fh4 or h5 that's okay. And in fact, we do do that on this site. So we're looking at this page and the, the first big bold text we have here is martial arts karate class aikido, blah, blah, blah.
Only use ONE H1 tag on a page - target keywords from HTML title / Meta - Example applies to Duda and all CMS and HTML pages
Mike Zittel - SEO speaker (02:18):
This, if we take a look at it, is actually in an H1 and this lines up with some of the keywords that are in my HTML title: martial arts karate classes, Dallas, Texas, those are the big ones. We included aikido and self defense in this headline because it's also in our meta description and people might be expecting to see that. It's also what this website is about. So remember, SEO is not all about just the search engines. It's about humans, right? Search engines drive the humans to our webpage. And then the webpage has to sell to the humans, encourage them, get them to engage with your content. In some capacity, most businesses are looking for a contact, a phone call to sell a product. So that's why we included aikido and self defense in our major headline. Now, if we scroll down, on underneath the headline, we have some just standard text.
Bold Text ads SEO juice - Be sparring
Mike Zittel - SEO speaker (03:21):
Some of that text is bolded, karate, aikido, self defense class, sensei, the Daniel, his last name certified shotokan, point is, is we highlighted that text by bolding it, which gives it a little bit more weight than the other texts around it. And it corresponds with our headline. Underneath that over here, we have an FAQ widget, which is a really handy widget that Duda has. I'll talk about that more in a second, but as far as the headline goes, traditional martial arts class, I didn't just say classes, I have already said that once now I'm just using a variation of class, right? Additionally, this is in an H2 tag. Now there's some debates whether or not you should use H2 tags more than once or not. And one of the golden rules is only use the H1 tag once on your page.
Only use ONE H2 Tag AFTER the H1 tag
Mike Zittel - SEO speaker (04:26):
Then as appropriate use an H2 tag. Now I know some SEOs use H2 tags unlimitedly. We don't. I like to follow the H1 once and H2 once. Then, if I have more headlines, H3, H3, H3, H3 and then down on the footer, maybe H4 or H5. Right? But for the most part, the policy that I follow is one H1, one H2, and then multiple H3's as needed. Additionally, when I'm setting up a page for optimizing it, I try to make the key terms of the first header tags, H1 and H2 relevant to the HTML title and meta description. I try to have the same key words in header tags. And so we have a, you know, we already talked about it. We have martial arts, Karate, Aikido, blah, blah.
Mike Zittel - SEO speaker (05:26):
I also say martial arts again, and then class. All of those words are in my HTML title, as well as the meta description. And now right here in the upper, above the fold content of the website. Now we scroll down here. It might look like this is a header tag, but it's not, it's just bold. The reason I didn't make those header tags is Google has a very, you know, distinct position about the use of header tags, use them sparingly and use them in the proper order. So at this point there wasn't any need to have a new header tag, but if we scroll down the page we do have some more. Now this doesn't really look like a header tag, and I did that from an aesthetic point of view. I didn't want another big bold headline. It would be too big for this space.
Use H3 tags as many times as need and appropriate - Be sparse
Mike Zittel - SEO speaker (06:21):
However, if we look at this, it's in an H3 tag and then underneath is just standard paragraph text. And then a link. Now links are also giving more weight to a keyword phrase. I could have just left it as learn more but I didn't want to, I wanted to give more weight to the key term kids, karate classes, same thing over here. These are also H3, H3, aikido classes, adult aikido classes. So you can see how we're laying out the page with our H1 at the top. Then in H2, then multiple H3's. Now, here we have another headline and the reason we put this in a, a tag, an actual H tag, right, it's an H3 tag is because this is important. This is a whole new subsection, subheader header tag that we want to draw attention to.
Use WYSIWYG or CSS to handle design aesthetic of header tags
Mike Zittel - SEO speaker (07:21):
We also wanted to draw more attention to it than as far as visual size and colors. The color changed. It's bigger, even though it's an H3 tag, I controlled the font size right here and the color as well with the wysisyg editor. So from the Google's point of view, it just says H3, but from the user point of view, it's bigger. Again, we have two audiences when we're optimizing a page and web designing, we have the Google bot, you know, search engines, the robots, and we also have humans. So you have to make those choices. And with Duda, particularly, you've got a lot of flexibility. You could also control this with CSS, but that gets little more geeky, and that's not really what most local business owners want to do. They just want to get a site that works and get some traffic and get some business.
Mike Zittel - SEO speaker (08:13):
So, we put this in an H3 tag, as I said. Now, scrolling down. We also use some bold text here. This isn't really good SEO key terms. Nobody's searching "knowledgeable". Somebody might search "sensei" related to an actual karate class, but again, we have a human audience ultimately that we want to help learn about our product and our service, et cetera. This is in the reviews section. So we decided to highlight the things that we felt were important and would get people's attention. And when they're scanning the page quickly, so in reviews, "knowledgeable". "sensei," "would highly recommend", right? Again, not, nobody is searching "would highly recommend" as a search phrase, but we bolded it because our only audience is not Google. It's also humans. So that's the review section of our homepage. Then down here we have the global footer.
Use H4, H5 tags in global footer as appropriate
Mike Zittel - SEO speaker (09:23):
We didn't have to use a header tag here, but it's not a bad place to use a header tag, but again, we used the right header tag. We used in H4 tag here. In particular some people might actually search, you know "TKA dojo location" map, et cetera. So that's in part why we did it, but also aesthetically it worked. We also wanted to draw more attention by using a header tag to this information. This helps Google know that we consider this to be important. Now Google might decide otherwise, but we consider it to be important. So we, we gave it a little bit of code juice, if you will, by putting locations in an H4 tag. Other little trick is we did put the address, but we also linked the, to their individual Google map profiles.
SEO Tip: Link footer address to official Google Map page(s)
Mike Zittel - SEO speaker (10:18):
So that's a nice link telling Google that yeah, the Google map listing and this website are connected and authorized and official and validated. Now that's how you add and where you should add header tags to your Duda website. The philosophy is basically the same. The principle is the same, no matter what platform you're using, whether you're hand coding or you are using a CMS. So that's how you do it in DUDA. Now at the very end here, if we made any changes, we'd have to remember to republish. So that those changes get committed to the database and are shown publicly. Now let's take a look at a WordPress.
Wordpress - Use editor to set header tags
Mike Zittel - SEO speaker (11:04):
Again, we're back over on the Serr.biz free WordPress blog. It's not nearly as pretty looking because the WordPress wysiwyg editor just doesn't lay out as nice. They don't show me my video.
Mike Zittel - SEO speaker (11:18):
They just show me that I am including a video, et cetera. But how you would change the markup is right here. You just highlight it and then choose what tag you want. It's just that simple. If I made changes, then I'd have to say update, et cetera. Now, over in Joomla, the way I have things set up, is I don't have to ever add an H1 tag to any of my pages or my blog posts unless there's some other outside third party type of component I'm using because my template does it automatically. It takes my title and puts it in an H1 tag. Let's go see over in the front end, here's the blog post. And if we highlight the title that was auto inserted, for us, and we look at the source code.
Tips: In Joomla, or any CMS, hardcode titles to display as H1 - Steam line work flow
Mike Zittel - SEO speaker (12:16):
We can see that, yes, it is in an H1 tag right there. I did that deliberately. It was not part of the template by default, and it may or may not be part of the template by default that you have on your Joomla website or your WordPress, et cetera. If not, you can try and hard code it or have your webmaster or a graphic designer, your web designer do that for you. I like it, cuz it just, I don't have to worry about forgetting to set an H1 tag. Kind of streamlining my workflow. Now, if we go back to the back end of Joomla, its wysiwyg editor is also not as nice as Duda, but it is there. This particular blog post is really a video that we transcribed. We didn't want to write a whole article because we've just spoken about in the video. However, we did transcribe it with a platform called Temi .Very handy. If you don't know what it is, go check it out. T E M I, it will transcribe your videos for you or your
SEO Tip : Use Temi to transcribe your video and podcasts - It's easier to speak 1000 words than write them
Mike Zittel - SEO speaker (13:30):
Podcast. It's pretty handy. It's much easier to speak a 1000 words than it is to type out well written sentences in, you know, on a keyboard. In this. So we have our transcript, right? It comes to us as simple text and I copied and pasted it in, but I wanted to format it a little bit. So the first thing I do after putting in my video is I put in a headline here and this is just transcript of how to create a blog post in DUDA. Now the actual title of this is a little bit longer. If we check it right, it's blog post Duda hosted SEO, CMS photo gallery. I'm just trying to pick up a little extra keywords there in the title, but they're not really the primary SEO focus of this blog post. What is the primary focus of this blog post is "how to create a blog post in DUDA".
Mike Zittel - SEO speaker (14:22):
So I wrote here's the transcript and I turned this into a header tag. If you look right there, it's H2. Now it doesn't look big, but we know that it's set properly. Joomla wsiwyg editor, as I said, is not as good as Duda but it is set and I did verify it. Then underneath it. I highlighted the timestamp of the speaker. Who's speaking in this video, which in this case was me again. But I, I add that as a bold text primarily for visual ease when people are trying to scan, if they want to, like, line up time in the video with what they're reading they can do so here. It also gave me some more keywords on the page, but they're just bolded. They're not like H3 tags. What I did add as H3tags are new subheadings right here, what's actually occurring at this timestamp.
Reason, if using transcripts, to format them with header tags
Mike Zittel - SEO speaker (15:26):
And I did that throughout this transcript. The reason I did that that is two reasons, one three, one SEO purposes, right? I've, you know, got some SEO targeted key terms in header tags, but also when it renders in full HTML and the front end, it makes it pretty easy to scan the page, I don't know about you, but I rarely ever read a full article about anything. Especially related to HTML , and so forth. You know, I'm looking for the quick fix my bug fix that I need to fix. I need to know and move on. Cause I got tons of stuff to do. So, I like to lay these pages out in this format where I have some bigger text headlines, so people can quickly scan, see what they need and move on. Another, and the final reason that I do this is these titles are actually corresponding with the timestamp function that you can add to your YouTube videos.
Mike Zittel - SEO speaker (16:29):
Okay. So that's a totally different tutorial. We'll talk about that, but you can see how the, it relates. Now. Let's just take a look at the front end of this. Let me close the screen code there. And if we scroll down, right, here's my title? My H1, then here's my H2. And then my H3, H3 H3. Notice the H3 and the H2 tags look identical. You wouldn't know, you would think that they were using the exact same markup. But they're not. And we know that cause we verified it in the back end. However, from an aesthetic point of view, I prefer to, you have all of this information in the blogs anyway. The H2 and H3 is to be all the same especially because I also have this in bold.
H1, H2, H3 Example Summary
Mike Zittel - SEO speaker (17:25):
So not too many tags, et cetera. So that is how you implement H1, H2, H3 tags on your on your website using Duda, Joomla and WordPress. You could obviously do this if you're hand coding it in HTML, you would use the proper, you know, header tag bracket, h1, bracket, et cetera. Most other content management systems are going to have a similar functionality. If they don't. You probably wanna look at a different content management system. If you're concerned with local SEO. If you have any questions, feel free to leave a comment below, be sure to like, I'll see you next time. Thanks for watching. Bye.
Local Business SEO | Page 1 | Page 2
