Optimize the HTML Head element for a high performing website

The HTML The element is essential for web developers and other Internet technologists. The HTML The element contains machine-readable information (metadata) on the document, like yours title, scriptsi style sheets. Websites that do not implement this information correctly will rank poorly in SEO, cannot be shared across the Internet by other websites, and may not translate correctly in modern browsers. Getting this element right can mean the difference between life and death for an internet business, especially because of how important this element is to the discoverability of your website by search engines. .

Read more from Alex Zito on the Built In Expert Contributor NetworkWhy is the internet so slow? (And how we can fix it.)

How the HTML Head element is classified

The HTML specification defines categories for each HTML element and describes the position the element can fit in the document. The head element doesn’t actually fall under any HTML tag category, but it also needs to be the first child of the tag, placing it in a unique position in the HTML language.

Inside the head element there should be metadata tags, scripts, and links: Content that describes document details and links to external resources.

Learn more about HTML in the Built In Expert Contributor NetworkYou need to learn HTML again

Links and Scripts

When one user agent downloads and analyzes your web page, one of the first things it will do, even before rendering your page, is follow the links and scripts of the tag and to download and run the content there.

The element is most commonly used to link to stylesheets, but is also used to set site icons (both “favicon” style icons and icons for the home screen and apps on mobile devices), between other things.

The

Learn more about HTML and JavaScript at BuiltIn.comInnerText vs. InnerHTML vs. TextContent: What's Best?

meta tags

The main category of information included in the header element of an HTML document is meta tags. Meta tags are HTML elements that describe information about a web page unrelated to the visual representation of the page, such as the page's title, its language, and the website's description. Meta tags are very important for search engine optimization, as they are read by web crawlers that document website content for search engines such as Google, Yandex or Bing.

Types of meta tags

TitleDescriptionCharsetAlternate and canonicalSocial or sharedOG social

The title tag

The first and most important meta tag is the page title. This tag defines the text that is displayed on the tab when a user opens your web page and also defines the text that will appear in Google or other web searches on your web page. You define it as follows:

The description tag

The description tag defines the content of the web page in written words and will often be included in the search results of your website.

The Charset label

The The tag describes what the character encoding of the website is, for example, the most common character encoding is utf-8. A character set describes the mapping of the words you type in your HTML document to the characters they represent. For example, if you were to change the character encoding from UTF-8 to ASCII, any emoji you added to your web page would not be displayed because the ASCII mapping does not include those characters.

Alternatives and canonical tags

Alternative and canonical tags define the different language versions of your web page. For example:

These tags are very important because they allow internet crawlers to understand where your content is coming from.

Social or sharing tags

Social or sharing tags are a class of custom meta tags that are intended to allow social networking sites like Twitter, Facebook, and the like to allow richer content about your web page on their sites. Social networking websites, like search engines, also crawl web pages on the Internet, and their crawlers use these special tags to decide what information to add to posts. The content of these tags will ultimately determine, for example, the thumbnail images that will be displayed when people share your web page on these social platforms.

And Social Labels

OG tags are a custom set of meta tags based on opengraph protocol. They are the most accepted social meta tag, and most social media sites will honor it. An OG tag is added to your website by adding the following within your :

There is a long list of accepted OG tags, which can be seen on the opengraph website. They include:

The type of your object, for example "video.movie" An image URL that should represent your object within the chart The canonical URL of your object that will be used as a permanent identifier in the graph

Twitter social tags

Twitter tags are very similar to og tags, although they are primarily read by Twitter crawlers. They have a similar set of properties to og tags, and are even written the same way. An example Twitter hashtag might look like a Next:

Other tags include , i all of which send signals about what to add to your site when others share a link to your site.

More from Alex Zito on Built InThe back-end technology that front-end developers need to know

[ad_2]

Source link