Header Tags - H1, H2, H3, etc.

Header tags (Heading Tags) are important to use as they separate out the the Headings and Subheadings on the page of your website. They are placed in order of importance on your page from H1 to H6 (Heading 1 to Heading 6). H1 being the title at the top of the page. Header tags play a role in improving the readability and SEO (search engine optimisation) of the pages in your website.

NOTE: Headings have both "SEO importance" AND "styling/appearance importance" on your pages: 

• Header Tags/Heading Tags are how Google "sees" the words or copy on your site.  Search engines will pick up that a Heading Widget on your page is set to H1, H2, H3, etc. and will assign "SEO importance" to the words contained within those Heading widgets as such. 

• Global Text Styling on the other hand is part of creating THE FOUNDATION of your website in the beginning of your build. With Text Styling you will "style" the Headings across all your pages globally in terms of font choice, size, color, spacing, etc.  (See this important article: Text Styling - Set your Heading, SubHeading & Paragraph Fonts across your Site While you can always make individual on-page styling edits to any Heading widget and "override" the Global Text Styling settings - it is best to try to tie your text to "global styling" as much as possible. If all Heading and text widgets are "tied" to Global Text Styling settings, any adjustments to font choice/size/sizing, etc. in the future can be made in one step vs. having to edit each individual Heading widget across all pages. 

Here is a guide to what Header Tags are used for:

* H1 - The title of your page summing up the product / service you offer. (Only use 1 H1 tag per page - right at the top)

* H2 - Are sub-headers that are the main points of your paragraphs and sections as follow on to your H1 tag point.

* H3 - Are sub-sections that are used to further clarify the points is H2 and are also used for lists and bullet points.

* H4 -Are sub-sections that are used to further clarify the points is H3 and are also used for lists and bullet points.

* H5 & H6 - will be used below your H4 etc.

Here’s an example of the structure of the above:

H1 - The Title

        H2 - Sub-Title 1

                H3 - Sub-section

                        H4 - Sub-section

                        H4 - Sub-section

                H3 - Sub-section

                        H4 - Sub-section

                        H4 - Sub-section

        H2 - Sub-Title 1

                H3 - List Item

                H3 - List Item

                H3 - List Item

Now that we understand the structure of H Tags, make sure that the copy in all of your header tags speak to your client and have keywords specific to your business.

HOW TO SET AND CHECK YOUR H1 TO H6 TAGS

ShinePages page templates and header blocks automatically have the H tags set (So the work is done for you 😀). See the Blog Template on out Demo site as an example of this: https://demo-site.shinepages.com/blog/add-your-blog-post-url-here

You will have or if you haven’t as yet edit the Text Styling in Global Styling (we recommend setting this before you do any editing on your site), which will have set the font choice and size of the fonts for your Headings 1 to 6. Please see this IMPORTANT article on Text Styling - Set your Heading, SubHeading & Paragraph Fonts across your Site

Once you have set this up, you can go through your pages and check to see which H tags are where by following the below steps:

- MAKE A NOTE of your Heading 1 to Heading 6 styling in Global Styling. Head over to your global styling and “Text Styling” - click on the “CLICK TO EDIT" on the right of each Heading.

When the window opens up on each Heading edit, make a note of the font and size of the font.

Then go ahead and check the headers throughout your page to see which Header (H) tag is connected to which header or text by highlighting over the text and you’ll be able to establish the H tag by the font and the size of the font in the mini popup tab.

Should you wish to change the H tag in a specific header / text on page that has been set in global styling to a different H tag, highlight over your text - click on the “style” icon on the far left in the mini menu bar and select your H tag option here (by editing your text and headers this way it will still be tied to your Global Styling).

When you add the following widgets to the page:

-Text Widgets get added to the page automatically with "Paragraph" Global Text Styling Settings.

-Heading Widgets get added to the page automatically with "Heading 2 (H2)" Global Text Styling Settings. You can then apply your choice of H Styling by using the "wand" icon / drop down menu (as mentioned above).

IMPORTANT NOTE:

Note that if you make any "on-page" edits (using the toolbar) to the font choice, font size, line spacing, text color, etc - you will be "OVERRIDING" the connection to the Global Styling settings for that particular Heading or Text element on the page. 

Therefore - If you were to come back and make any changes to the Global Text Styling section after making any "on-page" edits - you will see that this particular text or heading widget will NOT change in terms of the styling you had overridden. 

For example - if you change the font choice on-page for a Heading widget from Poppins( global) to Raleway, but you don't change the size or spacing - then you have overwritten the Global Font choice for that particular Heading widget. If later on you were to make changes to the Global styling - the font choice for that one heading widget will NOT change (it will stay as Raleway on the page) - but the size and/or spacing would change to whatever it's now set to in Global Styling.

- Please see this article on Trouble-Shooting Text Styling Issues