SEO Optimization in technical point of view: Visible Content

Previously we covered most meta tags that should be included in each page, now let’s have a look at the page content itself.

Headings

Headings in any pages are the hx tags, starting from the h1 to h6.

Headings structure the page content to tell Google how is your page is structured.

You probably want need more than one h1 in your page, however, you can add more than one if needed.

Image alts

Image alts alternatives are text that is displayed if the image is not visible in the browser i.e the image is no longer exists, but that’s not really the case here as the image alt tells the search engine what is this image about.

This is quite useful when you open Google pictures and search for some type of images like Nature it will display all images related to that keyword, so do not neglect adding it to each image.

<img src="image-link" alt="Image Alternative" />

Full Page Content

<!DOCTYPE html>
<html lang="en">
<head>
    <!-- UTF8 -->
    <meta charset="UTF-8">
    <!-- Responsive Viewport Meta -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Page Title -->
    <title>Page Title</title>
    <!-- Meta description -->
    <meta name="description" content="your page description here">
    <!-- Meta Keywords -->
    <meta name="keywords" content="your,keywords,list,here">
    <!-- Meta Image -->
   <meta name="image" content="http://www.example.com/image.jpg">
    <!-- Open Graph Tags -->
    <!-- Title -->
    <meta property="og:title" content="Page Title">
    <!-- Description -->
    <meta property="og:description" content="Page Description">
    <!-- Image -->
    <meta property="og:image" content="https:://site-name.com/path-to-image">
    <!-- Type -->
    <meta property="og:type" content="website">
    <!-- URL -->
    <meta property="og:url" content="https:://site-name.com/page-route">
    <!--/ Open Graph Tags -->

    <!-- Twitter Card -->    
    <meta name="twitter:card" content="summary">
    <meta name="twitter:site" content="@username_in_twitter">
    <meta name="twitter:title" content="Page Title">
    <meta name="twitter:description" content="Page description less than 200 characters">
    <meta name="twitter:image" content="http://www.example.com/image.jpg">
    <!--/ Twitter Card -->
</head>
<body>
    <!-- Page visible content -->
    <h1>Page Main Heading</h1>

    <!-- Image Example -->
    <img src="https://google.com/some-pic.jpg" alt="Nature and beauty" />
</body>
</html>

To Be Continued…

seo series1 - SEO Optimization in technical point of view: Meta Data Part I2 - SEO Optimization in technical point of view: Meta Data Part II: Facebook Open Graph Protocol3 - SEO Optimization in technical point of view: Meta Data Part III: Twitter Cards4 - SEO Optimization in technical point of view: Visible Content
SEO#SEO