Timothy J Melody
  • Home
  • Web Design
  • SEO
  • Google Places
  • About
  • Blog
  • SEO Analysis
  • Contact

How to Add an H1 Tag to Weebly and Other HTML Headings

10/20/2012

42 Comments

 

The Weebly basic website elements menu including title with paragraph, picture with paragraph, picture, title text and more.
Weebly Drag and Drop Emements
Since the beginning of web design, basic HTML has allowed for the definition of various types of headings and subheadings - for the top of web pages, before paragraphs, above different page sections and other web page elements, etc. These are labeled in order of importance or prominence as H1 - H6, or Heading 1 - Heading 6 and are most widely known as heading tags. "Headings" refers basically to what they are or are meant for and "tags" refers to the HTML conventions that define headings.

By default, all Weebly TITLE text is set to H2. 

But what if you want to add an H1 title? You've probably read that this is good for SEO and want the best for your website and you are right. It's also good for a number of other reasons. 

So how exactly do you do it?

Adding an H1 tag to your Weebly website is easy and follows three broad steps.
  1. Drag and drop the EMBED CODE element to where you want it on the page.
  2. Enter your title with the proper <h1></h1> code.
  3. Advanced: define the H1 style in your main-style CSS or in the EMBED CODE element.

If you are inexperienced with CSS step 3 will be the most challenging. But we will do our best to give you the right tips.


Weebly basic website elements menu, highlighted custom HTML element.
Weebly Custom HTML Element
Custom HTML editor.

Step 1. Drag and Drop the Custom HTML Element

Drag and drop the EMBED CODE - also called CUSTOM HTML - element to where you want it on your webpage. Best practice for design, users and SEO is usually to have just one H1 tag, usually at the top of the page and allow all other headings to be H2, H3, etc. The main idea being order of importance . . .


Step 2. Enter Your Title with the Proper <h1></h1> Code

An h1 tag placed in the Weebly custom HTML element.
Type the heading title you want in the Custom HTML element between the proper tags.
Simply enter whatever you want your title to be between opening <h1> and closing </h1> HTML tags. For example:


<h1>Whatever You Want Your Title to Be</h1>


<h1> is the opening HTML tag for your title and </h1> is the closing HTML tag for the same. If you forget to add the closing </h1> tag, then the rest of the page may also render as H1 . . . and, whoops, that's not really best practice by any standard.

Click out of it and you now have an H1 heading tag on your website page!

But wait! . . .

Since H1 is usually not fully defined in the CSS of most Weebly website themes, you're likely going to see a generic H1 styling, usually large, bold and black. If this works for your styling then simply leave it. If not, then to change this you are going to have to add styling definitions in one of two places: either in your main-style.css sheet or use in-line CSS styling within the custom HTML element itself. 
H1 heading in Weebly without CSS styling.
Your h1 heading will likely have generic CSS styling.
 
Defining font, size and color in the main-style.css may be a little easier so we will look at how to do that first.
 

Step 3. (Advanced) Define the H1 Tag in Your Main-Style CSS


Click on the Design tab and then Edit HTML/CSS

Weebly WYSIWYG editor, design tab and edit html/css highlighted.
Click DESIGN then Edit HTML / CSS

Click on main-style.css and find the h1 CSS definitions. 

Weebly html/css editor, stylesheet and h1 definitions highlighted.
What you will find will vary depending on the Weebly website theme you are using. What you will need will also vary depending on your own design and styling goals. But here are a few tips. 

Some themes may already had a distinct h1 { } present in the main-style.css sheet. Our example theme did have any h1 definition at all. If tht is the case you will have to add it.  Like this:

h1 { }

Your style commands then go in between the { } as you can see in all of the other styling definitions.

In other themes you may find something different such as 

h1,
h2,
h3 { . . .} 

which is a way of grouping them altogether.

If this is the case you will have to add the proper opening { and closing } codes (in white) to keep all of your styling commands separate and working properly for the different elements.


    

How to Change the H1 Font Size

Generally speaking, your h1 font-font-size should be larger than your h2 (h3, h4, etc.). This is a factor for SEO as well as just general use and styling. The whole point, really, of an H1 tag is that is emphasizes itself as the most important heading on the page. Thus, larger and heavier (bold) naturally fit that bill and always will by general HTML default. But to change the font-size, simply change the number you find.

    font-size: 33px;
    font-size: 45px;
    font-size: 80px; etc.

So

h1 {
    font-size:32px;
}

How to Change the H1 Font Color

To change the color enter a different #hex code, rbg code, HTML color name or whatever you would prefer. If you're not familiar with which color code or name to use, simply do a Google search for HTML color codes, etc. and there are many wonderful resources.

    color: #34260a;
    color: #ffffff;
    color: black; etc.

e.g.

h1 {
    font-size:32px;
    color: #34260a;
}

(A great resource for html color codes is here.

How to Change the H1 Font

To define the font for your H1 you'll need to enter a font-family definition or change the one that is already there. Often you'll simply want the h1 font to be the same as you've chosen for your H2 (Title element)

Here we change the H1 font to 'Uglyqua' by adding

    font-family: 'Uglyqua', arial, sans-serif;

The "arial, sans-serif;" part is a standard convention in case for some reason a browser can't display Uglyqua.
Example of h1 in UglyQua font.
H1 tag with the 'UglyQua' font

Step 4. (Alternate Method) Use in-line CSS in the Custom HTML Element

To use inline styling in the custom HTML element simply apply inline commands in the proper format. For this example we restrict ourselves again to font, size and color for simplicity. All styling goes within the opening <h1> tag, adding style=" . . . ." In the example below we used Verdana as our font, red as our color and 40px as our size.

<h1 style="font-family:Verdana;color:red;font-size:40px;">


In-line CSS styling within the Weebly Custom HTML Element.
Place in-line CSS in the Custom HTML element itself within the opening h1 tag.
And here is our result.
H1 with in-line CSS styling.
H1 tag with in-line CSS styling.

How to Align Your H1 Heading Center, Right or Left

To align your heading center (left or right) use 

text-align:center;

before the closing " of your in-line styling.

You can also enter the same command in your main-style.css. Or, you can also use Weebly's align command for the Custom HTML element, but it seems you will have to reset it each time you click in and click out of the element again, if making any changes.

H1 aligned center.

How to Add H2, H3, H4, H5, H6 to Weebly

As we already said, Weebly title elements are H2. So you can easily change the size, font, styling, etc. for those in the main Weebly editor and add them in wherever you would like.

But to add any other heading tag - h3, h4, h5, h6 - simply follow exactly the same steps above that we outlined for h1. And of course, change the number.

Heading tags in Weebly H1-H6
Headings 1-6 (h1-h6)
Beyond that, enjoy your Weebly H1 tags!

Here are a few more tips.
  • Don't over-use h1 tags. As we said, one h1 tag at the top of every page is best practice.
  • There isn't really a limit to the number of characters you can use in an h1 or any other heading tag, but keep it short and to the point, using some keywords, generally following the way all heading tags were intended - to be a heading for users. Just like, say, in any book, outline, formal report or proposal, etc.
  • A larger or more pronounced (bold) font for h1 than h2, h3 etc. is generally best practice.
  • Don't think that placing whole paragraphs in an h1 or any other tag will earn you ranking points for SEO. It's the opposite. Anything other than a reasonable heading will likely drive your ranking in search engines down, not up.


Once again, enjoy your Weebly H1 and other heading tags!
42 Comments
John link
5/13/2013 07:48:38 am

great information. Will be using this information on my site.

Reply
martin link
8/5/2013 03:56:45 am

Thank you soooo much mate,absolutely helpful.

Reply
Evelyn link
8/13/2013 01:06:44 pm

Great article. Thank you so much. It is really so helpful.

Reply
jhem link
8/29/2013 03:15:16 am

Thank you for this information!! thunbs up!

Reply
jhem link
8/29/2013 03:17:21 am

ooppppsss, sorry, I mean THUMBS UP!
Thanks again for sharing this info!

Reply
City Mowing
10/27/2013 10:17:24 am

Thank you very, very much! You made it so easy and in words we can all understand. The one thing though is that Weebly changed their site a little and now instead of it saying Custom HTML is says </> Embed Code.

Reply
Rob
11/7/2013 04:57:13 am

Great article - glad I found it. So, are there ANY h1 tags on individual pages of Weebly? I ask because if I add one to a page but there already is one, won't it screw up SEO? For instance, the site name carries over to each page - correct? Is that h1, and do you have to change it if you add an h1?

Reply
Tim Melody link
11/7/2013 05:29:03 am

Actually that is a really good question regarding the Site Title. But the answer is no, it is not marked up as an H1 but simply a unique header element and will not affect your SEO in this regard. The other answer is no, there are no H1s in Weebly anywhere by default, and will only be there if you add them as the article outlines . . . using the "Custom HTML" element which is now called the "Embed Code" element. I will be updating someday when I get the chance!

Thanks all for feedback!

Reply
Rob
11/7/2013 05:36:23 am

Wow, thanks for such a quick response. Great info you have here, thank you for sharing. Two follow-up questions - on my home page, then, I need to make my site title and tag line h1...correct? And, on the blog that Weebly has, can you assign h1 to those blog titles as well? Thank you again...great resource!

Tim Melody link
11/7/2013 09:04:25 am

It's not necessary to add an H1 matching your site as search engines will pick that title up in a different way (on every page) just fine. Better to use it to define what your page (or company or site) is all about in a different way. (Example, if my site title is Joe's Plumbing, home page H1 could be Best Plumbers in Portland, Oregon. etc.) And actually, it worth mentioning, you really should think of the Weebly site title as your BRAND name, as that has become very important too.
Weebly blog titles are also an H2 class and there is no way to change that (and, I wouldn't add an extra H1 below it either) but that is a good example of how, while any given SEO factor is important and can help, H1 is just one of hundreds of factors that go into good SEO and Google (or the other guys) determining what you are about and how to rank you. This blog is an example of H2 title ranking number 1 on Google (for Weebly H1 tags no less!) and I have many others across many websites. So not an issue at all.

Reply
Rob
11/9/2013 06:17:22 am

Thank you so much for all of the information. So, if I insert h1 tags via the method you outline, should I still use the Weebly "Title" element for anything, or just use the "Text" element? I believe the title element is h2 - correct? Not sure if it increases SEO to also have h2 if I have h1...any input is appreciated. Also, very important - if I enter information into the native page (page not site) "Page Title," "Page Description," and "Meta Keywords" settings, will that info in any way conflict with the fact that I inserted an h1 tag (for SEO purposes)? And, does that info in those settings really work for SEO? Thank you again!

Reply
Simeon link
2/20/2014 11:22:39 am

Great article! I was surprised to find out that the default heading tags are h2 and not h1. Thanks for educating me!

Reply
Marry link
3/2/2014 02:33:28 pm

Ohh... great information.

Thank you very much.

Reply
melissa link
4/3/2014 11:57:26 pm

thanks again!!

Reply
Phyllis Gault link
4/11/2014 06:55:03 am

There does not appear to be a custom HTML element. Can you tell me where it is?

Reply
Tim Melody
4/11/2014 08:08:10 am

It is now called EMBED CODE and has this </> symbol . . fourth from the bottom right hand column of drag and drop elements. Need to update terms and images in blog as someone pointed out earlier.

Reply
Terrance link
4/23/2016 01:45:59 pm

If I add the h1 tag to the main style css as described above. How do I depict which type of title tag I would like to use when placing them on the website. Does this change the current title element to h1 or is it still an h2. if so, how do I know when I'm placing an h1 or h2 tag with this method. thanks

Kathleen Marvin link
4/27/2014 05:27:08 am

Thank you for this clear information. However, given the importance of h1 tags for seo, I believe Weebly should do this for us. Most people who choose Weebly are probably not very technical, which is the whole point of Weebly, or so I thought.

Reply
Ginger
7/31/2014 04:03:34 am

I agree. If this is so important, why doesn't Weebly have it available to us? The reason I chose to build my website this way, and subsequently chose Weebly, is that I do not know how to write code. I understand what it is and what it looks like, but I am not a code writer and I am petrified of messing up my site with writing my own code.

Reply
Tim Melody
7/31/2014 06:06:18 am

I agree it would be nice if, say, the title element had an option to choose h1, h2, h3, etc. especially as most standard web page "rich text" editors have this feature.

That said, I totally believe Weebly made the right, smart call here in their original concept for several reasons.

One, if you're targeting the super "easy" then even having h1, h2, h3 etc styling options I just mentioned only complicate things as many people will not know how to use them and/or why. (Most professional web designers actually get h tags wrong!)

Two, they could have made the choice to be like some of the other CMSs out there (and website designers) and skip any H tags altogether, simply formatting the text with a bigger font, etc. and skipping the H code. So the fact that they do anything is a big plus for their users and their websites.

Next, with a choice of 6 different h tags, choosing H2 as the default option is definitely best for SEO. More than one H1 is a well known possible negative SEO factor, and H3, H4, etc. carry less and less weight.

So all said, while it is imperfect I actually really appreciate how they handled their original setup.

All of which means, if you're not comfortable with any type of code, they really do have your back in about the best ways that they can.

Eric Wolfendale link
6/5/2014 12:45:21 am

Thank you Timothy! That was a big help and easy to follow. I've bookmarked you for the future.

Reply
Jasamoah link
6/5/2014 09:24:41 pm

Rubbish it doesn't work , if you want to see if you want to see if your changes have been effected just go to view source on browser settings and you realized that even after changing the tags from <h2> to <h1> it still shows as <h2> ...why make it <h2> by default whilst its the best SEO practice to have it in <h1>?

Reply
Top Webhosts link
7/30/2014 06:59:16 pm

What is the difference between H1 tag and 'Page Title'? If I insert the H1 tag to my home page, do I also need to specify the page title name as well?

Reply
Tim Melody
7/31/2014 05:49:11 am

I am not sure what you mean by page title. Are you referring to when you, say, create a page and give it a name? If so that part becomes the URL of the page as well as the navigation menu name . . . both important SEO factors (especially the URL e.g. this-cool-page.html) but have nothing to do with H tags.

Reply
Matthew link
8/1/2014 10:24:56 am

Excellent instructions, thanks.

Reply
Alastair link
8/10/2014 04:50:22 am

Hi Tim - Thanks so much. I followed your steps and used the first method. It's not quite working for me. Even when I make the H1 the same as the H2, the H1 result is smaller and thicker text. Can you see an issue with what I have here?

h1, h2, h3, h4{
color:#333;
font-family: 'Open Sans', sans-serif;
font-weight:300;
}
h1{
font-size: 36px;
line-height:1.1;
color:white;
padding: .3em 0;
}
h2, h3{
line-height: 1.1;
padding: .3em 0;
font-size:36px;

Reply
Tim Melody
8/10/2014 05:51:09 am

Actually, that's a little complicated to figure out without seeing the site and also without knowing exactly what you want it to look like.

That said, I am betting it is the font-weight:300; that is throwing it off.

Try this.

One, got to Design and then Edit Fonts and then Paragraph Titles and hit Reset at the bottom. This will make it so CSS is only coming from the style sheet.

Two, the CSS code you copied is a little too muddled and confusing. Try replacing ALL of it - all h1, h2, h3, etc. - with something like this:

h1{
font-family: 'Open Sans', sans-serif;
font-size: 36px;
font-weight:300;
line-height:1.1;
color:white;
padding: .3em 0;
}

h2, h3{
font-family: 'Open Sans', sans-serif;
font-size: 34px;
font-weight:300;
line-height:1.1;
color:white;
padding: .3em 0;
}

That's going to make them on the same par with the H1 slightly bigger.

Past that, then experiment with
font-weight: 400;
font-weight:bold;
or just get rid of font weight altogether.

You can see all the possible font weights for Open Sans here

https://www.google.com/fonts/specimen/Open+Sans

Reply
Julien Roussel link
8/19/2014 03:11:42 pm

Incredibly clear and succinct. Thank you for your help!

Reply
kevin link
10/24/2014 12:20:58 am

Thank you this so helped me a lot

Reply
Robert Royce link
11/4/2014 09:33:08 am

Best information that I have found on Weebly H1 and HTML in general.
Thanks for your help. Like most people I am struggling to get more visitors to my site and my sales funnel. This has really helped, yes I book marked this page and also printed off a copy using Snagit where I can trim all the excess off the pages.

Reply
debbie link
8/2/2015 07:27:20 pm

This is all so new to me. Is there a www.youtube.com tutorial?

Reply
Mary link
8/3/2015 03:56:05 pm

Hi, great info. I've used this technique to get h1 element. Earlier, I was feeling lost how to get it but it helped me a lot.
Thanks,

Reply
Sandy link
9/23/2015 08:16:13 am

Thank you so much! I am trying to learn as much as I can about this stuff. Last year, when Google changed their rules, my business sales plummeted. I used to get 4 sales a day, but now I'm lucky if I get 2 sales a month. I wish I had more time to keep up with Google's rules.

Reply
Charlotte link
9/23/2015 12:13:10 pm

Hi Tim, thanks for the information! It's great!
The only thing is that I cant't remove the post title and I can't put the Embedded code in the post title :( So now I have an empty title (Weebly fills it automaticly with a date) and below I have my H1-tag. Can you help me with that?

Best wishes,
Charlotte

Reply
Biker link
9/30/2015 08:24:53 pm

Great tutorial thanks. Just a note...when editing the CSS to add in H1 format I was forced to then save a new theme and give it a name...then once I saved that theme...I had to then go back into Design and choose the same theme. This then showed my changes including H1. Thanks guys

Reply
Biker - Best bike pump link
9/30/2015 08:29:38 pm

Forgot to ask this question. Does anyone know if its possible to update Weebly in the following way: Blog landing page...e.g. blog preview page where all blog posts are listed...can this be setup so that it only has one H1 on it...I am finding that when I add in the H1 to individual blog posts it works great...but this is also pulling through to the blog landing page which then shows multiple H1s which isnt good for SEO...is there some sort of template control elements for each section of the blog...e.g Can I set rules in the code to achieve the above? I'm not a web tech...but have project management background...so understand this could normally be done on an open source type site...but not sure about Weebly...any help appreciated

Reply
CodCow link
10/7/2015 04:12:04 am

Another great post, I appreciate all the work you put into this site, helping out others with your fun and creative works.

Reply
ismail link
2/14/2016 11:56:42 pm

thanks. Your article really helped me who was making web at weebly.

Reply
Fajari link
11/3/2017 01:14:39 pm

Optimization becomes easier with the inclusion of headline and sub headline, thanks for the enlightenment
Warm regards

Reply
web designers vs web developers link
1/16/2019 02:39:11 am

A plenitude of thanks incredibly for your post. Hold writing. I can't thank you enough for the blog. Really savor your heart! Fantastic. I welcome you looking at this blog post. Really getting amped up for considering extra. Great.Very wonderful report post. Really getting amped up for reading more. Can read on.

Reply
V8Web link
3/4/2021 01:04:26 am

It's great! Thanks for the information!

Reply
MckimmeCue link
2/22/2022 05:24:32 am

This is a very informative—edifying article to all. Thanks a lot! Continue to post!
If you are looking for coupon codes and deals just visit coupon plus deals dot

Reply



Leave a Reply.

    Timothy J Melody

     

    Archives

    March 2015
    September 2014
    August 2014
    November 2012
    October 2012
    June 2012
    January 2012
    November 2011

    Categories

    All
    Google Places Optimization
    Local Seo

    RSS Feed

Serving clients in
Houston, Austin, San Antonio, Dallas, Sacramento, San Diego, Los Angeles, Philadelphia, Portland, Seattle
and more.
  • Home
  • Web Design
  • SEO
  • Google Places
  • About
  • Blog
  • SEO Analysis
  • Contact