Custom Page Header

The head section of your webpage contains information such as your page title, links to external CSS and JavaScript files, the location of your favicon, page description, and keywords. Overall, this information is known as meta-data. SiteSpinner allows you to enter or modify most of the standard meta-data and provides a method to add additional information.

If you are wondering why meta-data is essential, the primary reason is to improve Search Engine Optimization (SEO). Good SEO is necessary if you are running a business or want your site to be noticed. For a complete list of meta-tags, see <meta> Tag List in the Tools section. For more info about the <meta> tag and an explanation of the different tags, go to MDN Web Docs <meta>.

SiteSpinner provides three methods to enter additional custom meta-data:

  1. Using the Page Editor's Title, Meta Tags tab
  2. Using the Page Editor's Header tab
  3. Using a Code object

I’ll explain each method in this article.

Page Editor’s Title, Meta Tags tab

You use the Page Editor’s Title, Meta Tags tab to enter a single meta-tag, such as an author or robots (figure 1). Enter the meta-tag name in the “Name” field and the meta-tag content in the “List” field. Do not use quotation marks when entering information in the “List” field. This will cause an error when a search engine reads the meta-tag.

Fig. 1: Page Editor's Title, Meta Tags tab

Page Editor’s Header tab

If you right-click on an empty area of your work page, a menu will appear with an option of “Edit Page Properties.” This option will open the “Page Editor” window (figure 2). Next, click the “Header” tab, and you can add custom header meta-data, JavaScript code, links to CSS and script files, etc. Using the “Header” tab allows you to enter multiple meta-tags.

Fig. 2: Page Editor's Header tab

Information you enter in the “Header” tab should not define any meta-data that SiteSpinner automatically generates, such as title, copyright, and description.

Before entering any code in the “Custom Header” section, you must click the “New Header” button. If you try to enter code in the Custom Header field before creating a new header, a warning box will pop up telling you to create a new header. After clicking the new header button, a default name will appear in the drop-down menu to the left of the button. Header names default to “headerX,” where “X” is a sequential number indicating the number of headers created for your project

You can enter a title for the custom header instead of using the default name. The header name can only contain letters (lower and uppercase) and numbers. No special characters (e.g., dash, period, underscore, etc.) are allowed. If you intend to use more than one custom header in your project, then it would make sense to change the name so you can keep track of the header applied to a page.

The Page Editor controls page information for all pages in your project. Ensure you enter the proper HTML code when entering text in the “Custom Header” field. SiteSpinner will not perform any checks and will publish whatever you have entered. This could cause problems when the page is viewed in a browser.

If you want the custom header on all pages, click the “All Pages” button. Clicking the “All Pages” button will apply the custom header to the current pages in your project. If you add new pages after using the “All Pages” button, you must click it again to add the custom header to the newly added pages.

You must apply the selected custom header to the desired page if you have multiple custom headers. Clicking the “All Pages” button and clicking “OK” in the prompt will cause the current custom header to overwrite any existing header on other pages. If this was not the intended action, you must manually re-select each page’s custom header.

You should note that the is no delete button to remove a header. If you delete the contents of the custom header entry box, the header will still be present in your project; however, SiteSpinner will not publish an empty header.

Code object custom header

Instead of using the Page Editor Header tab, you can enter custom header meta-data using a Code object and select the “Header” option in the code placement drop-down menu (figure 3). One advantage of using a Code object instead of the Page Editor tabs is that it makes editing the meta-data much easier. The downside is that you must add the proper HTML meta-tags so the meta-data is in the correct format.

Set Code object to Header
Fig. 3: Set Code object to Header

Usage

You can have more than one custom header in your project. But SiteSpinner handles things differently depending upon the method used to enter the meta-data. If you use the Page Editor’s Header tab, only the currently selected header chosen in the drop-down menu is applied to the current page (unless you click the “All Pages” button). Adding a new page to your project will not automatically apply any previous custom header. To use a custom header on a new page, you need to create a new custom header for that page.

You can use more than one Code object set to “Header”. SiteSpinner will combine all the “Header” Code objects when it publishes your project. Using more than one Code object would tend to clutter your work page and is unnecessary since you can use a single Code object for all your custom meta-data. However, you can use the “Page Editor→Title, Meta Tags” tab to enter the page description and keywords. You can also use a Code object to add meta-data unsupported by SiteSpinner.

If you use multiple Code objects for a custom header, the entered data is in the order in which they are created. However, the creation order does not matter since each meta-data line is a stand-alone entity and is not dependent upon previous entries.