Challenges

Implement On Page SEO Support

Overview

To add on-page SEO support, we have to add a set of HTML elements that stays in our page's HTML head. Here's is an example

<html>
    <head>
        <title>This my web page</title>
        <meta name="description" content="This is a description of my web page" />

        <meta name='twitter:card' content='summary_large_image' />
        <meta property='og:site_name' content='My Blog App' />
        <meta property='og:url' content="https://url.com/path" />
        <meta property='og:title' content="This my web page" />
        <meta property='og:description' content="This is a description of my web page" />
    </head>

    ...

</html>

The title is a special HTML element that is used for many things, including showing the browser tab's title. Google uses this HTML element to show the title inside Google search.

For all other information, we use HTML meta tags. The meta tag with the name description is the most common one. Google search uses that as the description for your web page.

Open Graph

Open Graph is a specification, which defines a set of names for metatags. We can use them inside our web pages. Then different apps like Twitter, Slack can read these metatags and render them nicely when someone shares our web pages.

Here's an example for some of those open graph metatags:

<meta property='og:site_name' content='My Blog App' />
<meta property='og:url' content="https://myblog.com/post/hello" />
<meta property='og:title' content="This is the post title" />
<meta property='og:description' content="This is the description" />
<meta property='og:image' content="https://myblog.com/images/hello.png" />

JSON LD

With JSON LD you can expose structured data. You can find information about movies, reviews, datasets, social media contacts, etc. Interestingly, Google will use this information to list your web page with more information.

JSON LD does not use HTML Meta tags but a custom script tag inside the HTML head.


This is more than enough information for now. Let's get our hands dirty.

šŸ™ We need your help

We need your help to keep maintain & add new content to this course. Here's how you can support us: