When you read a book or a magazine, every chapter or article starts with a title.
That’s true even for the web, where a title on the page is called an h1 header.
However, please don’t confuse the “title on the page” with the
tag! The latter is a part of the HTML code of the page that tells browsers to display a text (a title, indeed) in the top bar -- a text that is often used by search engines as well to show a title in search results. The title may or may not be the same text as your h1 header.</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_titletag.png" alt="H1 Tags SEO: Example of title tag and h1 header"></p>
<p>In this post, you’ll learn about what h1 headers are, why they are important and how to create them on your site using platforms like Weebly, Wix, Squarespace, <a href="https://themoneymaniac.com/shopify-vs-etsy">Shopify</a> and Wordpress.</p>
<p>If you want to skip to a specific section, below is the menu. Otherwise, just start reading!</p>
<p><em>Skip Directly to:</em></p>
<ul>
<li><a href="#section1">What are H1 Headers?</a></li>
<li><a href="#section2">Why are H1 Headers important?</a></li>
<li><a href="#section3">How to add H1 tags in Weebly?</a></li>
<li><a href="#section4">How to add H1 tags in Wix?</a></li>
<li><a href="#section5">How to add H1 tags in Wordpress?</a></li>
<li><a href="#section6">How to add H1 tags in Squarespace?</a></li>
<li><a href="#section7">How to add H1 tags in Shopify?</a></li>
</ul>
<h2 id="what-are-h1-headers%3F" tabindex="-1"><a href="#what-are-h1-headers%3F" class="header-anchor">What Are H1 Headers?</a></h2>
<p>You may have heard the words “main header” or “heading tags”.</p>
<p>These are also known as <strong>h1</strong> tags, and you can recognize them because usually they appear as <strong>the largest text on your page</strong>, and can also act as the title of your page or post.</p>
<p>We call them “tags” because they appear as parts of the HTML language that give commands for displaying information in web pages. These elements of the HTML language are called tags and appear between angle brackets: <...>.</p>
<p>H1 appears in HTML code as <h1> -- therefore it’s a tag.</p>
<p>The screenshot below shows how it looks like in the HTML code of a page:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_h1code.png" alt="H1 Tags SEO: what an h1 HTML code looks like"></p>
<p>(Note: the class=”entry-title” in this example is meant to style the h1 header in a particular way. When you look at the HTML code for an h1, it may have no 'class' at all, or you may come across different class names. Don't worry about that now.)</p>
<p>H1 is not the only heading tag, though. There are 6 levels, from h1 to h6, that form a top-down hierarchy. The most important one is the h1 tag and the least important is the h6 tag.</p>
<p>Ideally, you want to have a heading structure that flows and makes sense both from a design and SEO point of view. However, nothing horrible will happen if you start with an h1 tag followed by an h4 tag, or if you have multiple h1 headings.</p>
<p>While this is generally considered a bad practice from a design viewpoint -- as well as making it harder for screen readers used by visually impaired people, so you may want to avoid it for their sake -- your final goal is “making sure the content is organized in a practical and sensible manner", as stated in <a href="https://www.searchenginejournal.com/h1-tag-seo-how-important/387306/">this Search Engine Journal article</a>.</p>
<p>That means that a correct heading structure is always preferable, but when in doubt you should aim for user experience and a coherent content organization.</p>
<p>Now, for an example of “correct structure”, you can think about how chapters and subchapters in a nonfiction book are organized, or you can take a look at the following taxonomy to get an idea of the relative importance and semantic hierarchy of tags:</p>
<ol>
<li><em>Organism</em> would be like <h1></li>
<li><em>Animal</em> would be <h2></li>
<li><em>Mammal</em> would be <h3></li>
<li><em>Carnivore</em> would be <h4></li>
<li><em>Dog</em> would be <h5></li>
<li><em>Beagles</em> would be <h6></li>
</ol>
<p>You start with the broad, and you end up with the more specific.</p>
<h2 id="why-are-h1-header-tags-important%3F" tabindex="-1"><a href="#why-are-h1-header-tags-important%3F" class="header-anchor">Why Are H1 Header Tags Important?</a></h2>
<p>It’s simple: h1 headers matter because they are one of the things search engines like Google or Bing scan in order to understand what your site is about.</p>
<p>In fact, the “h1” describes the topic of the post or page, and together with other headers, it indicates the structure of the page or post.</p>
<p>Also, h1 header tags are important for the actual visitor of your page, who will see the header as a clear indicator of what the page content is about.</p>
<h3 id="what-does-the-task-look-like-in-marketgoo%3F" tabindex="-1"><a href="#what-does-the-task-look-like-in-marketgoo%3F" class="header-anchor">What Does the Task Look Like in marketgoo?</a></h3>
<p>In marketgoo, this task falls within the <em>Optimize</em> section.</p>
<p>Once you choose the keywords you want to focus on, you will optimize each page and post on your website for those keywords. In marketgoo, if your h1 header is not optimized, you will get a recommendation to have it include one or more of your focus keywords.</p>
<p>See the screenshot below:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_marketgoo.png" alt="H1 Tags SEO: task in marketgoo"></p>
<p>As you can see, marketgoo can detect your missing titles, h1 tags and tells you how to insert them in your site. To find this recommendation, go to <em>Optimize</em> -> <em>Pages to optimize</em> -> click on a page -> read marketgoo’s recommendations for it.</p>
<h4 id="%E2%80%9Chow-do-i-insert-keywords-in-h1-tags%3F%E2%80%9D" tabindex="-1"><a href="#%E2%80%9Chow-do-i-insert-keywords-in-h1-tags%3F%E2%80%9D" class="header-anchor">“How do I insert keywords in h1 tags?”</a></h4>
<p>Depending on what platform you are using, the instructions will vary.</p>
<h3 id="h1-tags-in-weebly" tabindex="-1"><a href="#h1-tags-in-weebly" class="header-anchor">H1 Tags in Weebly</a></h3>
<p>Weebly is famous for its easy, drag-and-drop style, perfect for those who don’t want to get stuck in the technical details of building and optimizing their websites.</p>
<p>So it’s easy to drag and drop a “Title” element into one of your pages in your website builder, but as it turns out, this will create an <h2> header, not an <h1>.</p>
<p>(Note: you can vote on <a href="https://community.weebly.com/t5/Vote-on-Features/Add-ability-to-select-different-headings-like-H1-H2-etc-to-Title/idi-p/226513">this community post</a> to request a native h1 feature!)</p>
<p>If you recall the header hierarchy, you’ll know that having an h1 is important.</p>
<p><strong>Currently, there are 2 workarounds for this:</strong></p>
<ul>
<li>The <strong>easiest way</strong> is to add the free <a href="https://www.weebly.com/app-center/h-tag">H+ app from the Weebly App Center</a> to your Apps, and then drag it into your post or page wherever you want your h1 or other headers to go. They have different font, color and size options.</li>
<li>The <strong>second way</strong> involves dragging the “Embed Code” element into your page, and insert the following HTML code:</li>
</ul>
<pre><code><h1 style="text-align:left;color:#028c6a;font-size:28px;"> This is your Page's H1</h1>
</code></pre>
<p>As you can see, this code specifies the alignment of the text, the size, and the color. These are all things you can change.</p>
<p>Use <a href="https://www.color-hex.com/">Color-Hex.com</a> to choose a color and copy its hexadecimal code (the one starting with #).</p>
<p>Where it says “This is Your Page’s H1”, you can replace that text with your own.</p>
<p>As you can see in the screenshot below, we experimented with both workarounds (the Embed Code element and the H+ App) and this was the result:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_weebly.png" alt="H1 Tags SEO: h1 tags in Weebly - example"></p>
<h3 id="h1-tags-in-wix" tabindex="-1"><a href="#h1-tags-in-wix" class="header-anchor">H1 Tags in Wix</a></h3>
<p>There are two ways to create an h1 header in Wix.</p>
<p>If you’re working on your <strong>blog</strong>:</p>
<ul>
<li>Click <em>Add</em> on the left side panel</li>
<li>Click <em>HTML Code</em> at the end of the list of options</li>
<li>Write <h1>This is my new title</h1> in the HTML field that appears, changing the text within the <h1> … </h1> tags with your own title</li>
<li>Click <em>Save</em></li>
</ul>
<p>See the screenshot below:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_wixblog.png" alt="H1 Tags SEO: h1 tags in Wix - example"></p>
<p>If you want to edit your h1 header, just click on it and the HTML field will appear again.</p>
<p>To add an h1 header to your <strong>site pages</strong>, go to your Dashboard and click <em>Site actions</em> -> <em>Edit Site</em> from the middle panel.</p>
<p>When you’re in the Wix Website Editor:</p>
<ul>
<li>Choose your page from <em>Pages</em> on the left side toolbar or create a new one</li>
<li>Click <em>Add</em> on the left side</li>
<li>Click <em>Text -> Themed Text</em> -> <em>Add Heading 1</em></li>
<li>Click <em>Edit Text</em></li>
<li>Edit the text to include your title. You can also adjust its size and font</li>
<li>Drag and drop your new title to your preferred position on the page</li>
</ul>
<p>To edit this h1, click on it and then on the <em>Edit Text</em> button that appears above your title.</p>
<p>You can find more information and screenshots in <a href="https://support.wix.com/en/article/about-heading-tags">this Wix support page</a>.</p>
<h3 id="h1-tags-in-wordpress" tabindex="-1"><a href="#h1-tags-in-wordpress" class="header-anchor">H1 Tags in Wordpress</a></h3>
<p>WordPress makes things very easy when it comes to formatting titles and paragraphs in a page or post.</p>
<p>In fact, you can add and edit all your headings right in the post editor.</p>
<p>Now, there’s a difference in how you do that depending if you use WordPress’ Classic Editor or the Gutenberg Editor.</p>
<p>For the <strong>Classic Editor</strong>, all you have to do is open the drop-down menu on the Paragraph item on the menu bar and choose “Heading 1” among the heading options.</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_classiceditor.png" alt="H1 Tags SEO: Classic Editor in Wordpress"></p>
<p>If you have yet to write the title, click on “Heading 1” and then write your title. If you have already written the title, select it with your mouse and then choose “Heading 1” from the menu.</p>
<p>If you use the <strong>Gutenberg Editor</strong>, you have to click the blue “+” button at the top left of your post/page editor to open the block inserter. In the window that opens, click “Heading” and then click on the “Heading” text that appears on your post/page.</p>
<p>This heading is generally an h2 and you can see this because, after you clicked on the “Heading” text, an options bar appears and says “H2”.</p>
<p>All you have to do now is click on that “H2” in the options bar and then select “H1” from the heading options that you are shown. See the screenshot below:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_gutenberg.png" alt="H1 Tags SEO: Gutenberg Editor in Wordpress"></p>
<h3 id="h1-tags-in-squarespace" tabindex="-1"><a href="#h1-tags-in-squarespace" class="header-anchor">H1 Tags in Squarespace</a></h3>
<p>Creating h1 headings on Squarespace is pretty simple:</p>
<ul>
<li>Choose your page under <em>Main Navigation</em></li>
<li>Click the Edit button at the top</li>
<li>Write your heading text in the body of the page (or select it if you’ve already written it)</li>
<li>Choose “Heading 1” from the drop-down menu</li>
</ul>
<p>See the screenshot below:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_squarespace.png" alt="H1 Tags SEO: h1 tags in Squarespace - example"></p>
<p>Certain templates on Squarespace add h1 tags to your pages and posts automatically, and due to this your site can have more than one of the same tags. This is simply because of the way those templates are set up.</p>
<p>However, this is no problem at all! In fact, Squarespace has said that while multiple h1 tags make some users nervous, they should rest assured that it will not have a negative effect on SEO <strong>if they are correctly used</strong> (that is, to highlight different sections on a Page or Post).</p>
<h3 id="h1-tags-in-shopify" tabindex="-1"><a href="#h1-tags-in-shopify" class="header-anchor">H1 Tags in Shopify</a></h3>
<p>When you add a new product in <em>Products</em> -> <em>Add product</em>, you can add an h1 heading to your product description by clicking the “<>” button on right side of the description box and writing the HTML code for the h1 heading:</p>
<h1>This is an example title</h1>
<p>See the screenshot below for an example:</p>
<p><img src="https://www.marketgoo.com/wp-content/uploads/2016/07/h1-tags-seo_shopify.png" alt="H1 Tags SEO: Shopify"></p>
<p>It’s also worth noting that your product Title will automatically convert to an h1, so you’d follow these instructions if you wanted to add an additional h1.</p>
<p>Please keep in mind that any further h1 headings in your shop’s theme can only be edited through the theme editor (<em>Online Store</em> -> <em>Themes</em> -> <em>Customize</em>) and you can’t add headings to the theme manually.</p>
<h2 id="h1-tags-and-seo%3A-best-practices" tabindex="-1"><a href="#h1-tags-and-seo%3A-best-practices" class="header-anchor">H1 Tags and SEO: Best Practices</a></h2>
<h3 id="1.-don%E2%80%99t-stuff-your-heading-tag-with-keywords" tabindex="-1"><a href="#1.-don%E2%80%99t-stuff-your-heading-tag-with-keywords" class="header-anchor">1. Don’t stuff your heading tag with keywords</a></h3>
<p>Google hates that, and it doesn’t help readers either.</p>
<p>Incorporate keywords naturally in your heading just the same way you do with your post or page text.</p>
<p>Try to not use more than one h1 tag on a page, but as we said, having more h1s doesn’t put you in trouble with Google, so don’t worry if you can’t help it, as in the case of certain templates, where this is beyond your control.</p>
<p>Just make sure your headings work as titles and dividers to different sections and not just randomly interspersed within your page or post.</p>
<h3 id="2.-don%E2%80%99t-make-the-same-as-your-page-title" tabindex="-1"><a href="#2.-don%E2%80%99t-make-the-same-as-your-page-title" class="header-anchor">2. Don’t make <h1> the same as your page title</a></h3>
<p>Unless it makes sense to repeat your <title> tag in your h1 heading (for example, when you want to have your blog post title in both the <title> and the heading), try to not make it the same as your page title, aiming to vary the use of your focus keywords and to better inform the reader about your content.</p>
<p>A good rule of thumb is to make your h1 header text consistent with that of the <title> but not identical.</p>
<h3 id="3.-always-have-an-tag-on-your-page" tabindex="-1"><a href="#3.-always-have-an-tag-on-your-page" class="header-anchor">3. Always have an <h1> tag on your page</a></h3>
<p>If the <h1> tag is missing on your page, search engines can and will use any available heading they find on your page, which means they will take the h2, h3, h4 , h5 or h6 tags as the page’s title (and therefore as the title that’s representative of the whole page’s content).</p>
<p>Make sure you have at least one h1 header on your page and that this gives users information about your content.</p>
<p>Want to see what you need to do to optimize your h1 headers? <a href="https://app.marketgoo.com/login">Login to marketgoo now</a>!</p>
</div>
</article>
<nav class="page-pagination pagination">
<ul> <li class="pagination-prev">
<a href="/posts/free-website-report-teardown-dhilton-com/" rel="prev">
<span>← Older post</span>
<strong>Free Website Report Teardown: dhilton.com</strong>
</a>
</li>
<li class="pagination-next">
<a href="/posts/robots-txt-weebly-wix-wordpress/" rel="next">
<span>Newer post →</span>
<strong>What is the robots.txt file? (2022)</strong>
</a>
</li>
</ul>
</nav>
</main>
<!-- Current page: /posts/h1-tags-how-to-weebly-squarespace-wix/ -->
</body>
</html>