Skip to main content
Practice

Key Elements Inside the <head> Tag

The HTML head tag is the critical part of the document that defines metadata, describing general information about the document and informing search engines about this information.

Let's examine how the head tag is utilized in the portfolio template.


1. Setting the Webpage Title

  • Code: <title>Website Title</title>
  • Sets the title displayed in the web browser's title bar or page tab.

2. Setting Viewport and Responsive Design

  • Code: <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • Specifies how the webpage should respond to mobile devices and responsive design.

3. Setting the Webpage Description

  • Code: <meta name="description" content="Website Description" />
  • Provides a brief description of the website. This can be displayed in search engine results.

4. Setting Character Encoding

  • Code: <meta charset="UTF-8" />
  • Specifies the character encoding method to convert characters into a format that computers can use.

5. Configuring Social Media Sharing

  • Code: 
    <meta property="og:title" content="Website Title" />
    <meta property="og:description" content="Website Description" />
    <meta property="og:locale" content="en_US" />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="Website URL" />
    <meta property="og:site_name" content="Website Name" />
    <meta property="og:image" content="Image URL" />
  • Utilizes Open Graph to specify how the page should be displayed on social media platforms (e.g., Instagram).

6. Setting Search Engine Verification

  • Code: 
    <meta name="google-site-verification" content="" />
  • Verifies site ownership with search engines like Google. Insert the verification code in the content value.

7. Specifying the Canonical URL

  • Code: <link rel="canonical" href="Website URL" />
  • Specifies the canonical URL as the official version of the page to prevent SEO issues with duplicated content across multiple URLs.

8. Setting Browser Tab Icon

  • Code: <link rel="icon" href="Image URL" />
  • Specifies the favicon to be displayed in the browser's tab.

9. Optimizing Page Load Speed

  • Code: 
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  • Optimizes page load speed by preconnecting to resources.

10. Connecting Google Fonts

  • Code: <link href="https://fonts.googleapis.com/css2?family=Noto+Sans" rel="stylesheet" />
  • Description: Connects the Google "Noto Sans" font to the webpage for usage.

In the next lesson, we will explore the body tag for different templates πŸ‘¨πŸ»β€πŸ’»

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.