🔍[SEO] - Heading Structure

Heading structure is important for SEO because it helps search engines understand the hierarchy and organization of the content on a webpage. It also helps users navigate and scan the content more easily.

In HTML, headings are denoted by different levels of the <h1> to <h6> tags. The <h1> tag represents the most important heading, while the <h6> tag represents the least important. It is important to use these headings appropriately and in a logical order to create a clear hierarchy for both search engines and users.

Proper heading structure can also improve the readability and accessibility of your content. For example, using headings can help users with visual impairments navigate the content using a screen reader.

Overall, using a clear and logical heading structure can help search engines better understand the content on your website and improve the SEO of your pages.

Visually Hidden Headers

To hide the real header (in <h..> tag) you can use .visuallyhidden class (you can find it in CSS Utilities).

Some Examples

H1 on Apple.com website which is not visible for users

<h1 class="visuallyhidden">Apple</h1>

Hide part of the heading from user eyes

<h2><span class="visuallyhidden">Buy</span> New iPhone 14</h2>

Custom Headers for your Posts

⚠️ To use this feature, you must have the [Advanced Custom Fields plugin](https://www.advancedcustomfields.com/) enabled.

Let’s say you have some page named “Welcome to my site!”. By default, the h1 for this page will be the same, which isn't great for SEO, is it

If you care about SEO, you may want to customize your h1 tag, but leave the original one visible to users for marketing purposes.

It can be enabled in function.php file by setting the parameter value to true.

define( 'ADD_CUSTOM_HEADER_SUPPORT', true ); // Register shortcode for custom h1 heading for post and pages and automatically render if custom h1 is set.

How is it works?

1. The WP Rig Toolkit has a function in the file \functions\_functions-acf-fields.php that creates the custom field custom_h1 for posts and pages. To enable the feature for custom taxonomies, simply add your own using the same template..

2. In WP Dashboard you can find the field Custom H1 when you edit a post/page. You can fill it by your own.

3. If the field is not empty, your custom h1 will be placed in the beginning with .visuallyhidden class, the original h1 will be transformed to span.

If you want to customize the function, please search for the next line inside VS Code:

add_shortcode( 'custom_header', 'custom_header_shortcode' );