Photo by Growtika on Unsplash

HTML head section

The HTML header (or <head>) section is an essential part of an HTML document. It is located between the opening <html> tag and the opening <body> tag. The header contains metadata and other information about the HTML document, which is not directly displayed on the web page but provides instructions and details to the browser and search engines.

Here are some key elements commonly found in the HTML header:

1. <title>: The title tag is your main and most important anchor and it defines the title of the HTML document, which appears in the title bar of the browser window or in the tab for that page. The <title> element typically appears as a clickable headline in the Search Engine Result Page(SERPs).

<title>10 Most Important Meta Tags for SEO</title>

Title tags are placed in the <head> of your webpage and are meant to provide a clear and comprehensive idea of what the page is all about.

2. <meta>:
Meta tags also resides in the <head> of a webpage and is commonly displayed in a SERP snippet along with a title and page URL.

The <meta> tag is used to provide metadata or additional information about an HTML document. It is placed within the <head> section of the HTML document. Here are some commonly used attributes within the <meta> tag:

• charset: Specifies the character encoding for the HTML document, such as UTF-8.

<meta charset="UTF-8">

The charset=utf-8 attribute/value pair in the <meta> tag is used to specify the character encoding for the HTML document. It indicates that the document should be interpreted and displayed using the UTF-8 character encoding scheme.

• name and content: These attributes are used together to provide specific metadata information. The name attribute defines the type or name of the metadata, and the content attribute provides the corresponding value. Some commonly used combinations include:
• description: Specifies a brief description of the webpage. It is often used by search engines to display a summary of the page in search results. For example:

<meta name="description" content="Some tags are vital for SEO. Others have little or no impact on rankings. Here's every type of meta tag you need to know about.The purpose of a meta description is to reflect the essence of a page, but with more details and context."/>

• keywords: Specifies a comma-separated list of relevant keywords. The meta-keyword tag is not used by Google Search, and it has no effect on indexing and ranking at all. For example:

<meta name="keywords" content="gardening, tips, plants, flowers, vegetables">

• viewport: viewport meta tag allows you to configure how a page would be scaled and displayed on any device. Helps to control the layout and behavior of the webpage on different devices and screen sizes.

<meta name="viewport" content="width=device-width, initial-scale=1"/>

Where “width=device-width” will make the page match the screen’s width in device-independent pixels, and “initial scale=1” will establish a 1:1 relationship between CSS pixels and device-independent pixels, taking screen orientation into account.

• author: Indicates the author of the document.

<meta name="author" content="Kevin">

• robots: A robots meta tag which instructs the search engine crawler not to index a page, or follow any links on it

<meta name="robots" content="noindex,nofollow">

If you don’t add a robots meta tag, the default for crawlers is to index and follow your page.

Why would you need to use this meta tag? It might be that you have some pages on your site which are necessary, but quite thin content-wise. You don’t necessarily want them to be indexed in search, but they’re still important to the site, so you can use a noindex tag to prevent them from appearing in the SERPs.

Get Kevin Mavani’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

http-equiv:

<meta http-equiv="refresh" content="delay_time; URL=new_website_url" />

• http-equiv="refresh": The <meta> tag contains two attributes, http-equiv and content. The value of http-equiv is always refresh — this tells the browser that you want to automatically refresh the page.

Next, the content attribute takes two values:

• delay_time is a numeric value that sets the delay before the browser loads the new web page. For instance, a value of 3 would make the browser wait three seconds on the old page before redirecting.
• new_website_url is the URL of the web page you want to redirect to.

Be sure to place these two values for content inside one pair of double quotes, separated by a semicolon. Otherwise, the redirect will not work.

3. <link>: This tag is used to include external resources, such as CSS stylesheets, favicons. The rel attribute specifies the relationship between the current document and the linked resource.

<link rel="stylesheet" href="styles.css">
<link rel="preconnect" href="https://www.google.com">

4. <style>: This tag is used to define CSS styles directly within the HTML document. It can be used to modify the appearance and layout of elements on the page.

5. <script>: The <script> tag is used to embed or reference JavaScript code within the HTML document. It can be placed in the header or the body section, depending on the specific requirements.

6. <base>:

<base href="https://www.example.com/">

For instance, if you have an image with the source <img src="images/pic.jpg">, the browser will resolve the URL relative to the base URL specified in the <base> tag. In this example, the image would be loaded from https://www.example.com/images/pic.jpg.

By setting the base URL using the <base> tag, you establish a common reference point for all relative URLs within the HTML document. This simplifies the process of linking to resources and ensures consistent behavior across the webpage.

It’s important to note that there should be only one <base> tag per HTML document, and it should be placed within the <head> section. Additionally, the <base> tag is optional, and if it is not included, the base URL for relative URLs is typically the URL of the current webpage.

Social Media Meta Tags

Open Graph was initially introduced by Facebook to let you control how a page would look when shared on social media.

Here are the main Open Graph tags:

• og:title — here you put the title which you want to be displayed when your page is linked to.
• og:url — your page’s URL.
• og:description — your page’s description. Remember that Facebook will display only about 300 characters of description.
• og:image — here you can put the URL of an image you want to be shown when your page is linked to.

Use the specific social media meta tags in order to boost how your links look to your following.

It doesn’t influence your rankings on the search engines. However, by configuring how the links to your pages look, you can greatly boost your CTR.