Building Static Pages with Astro for Perfect Core Web Vitals/

...

/

Creating an SEO Component

Creating an SEO Component

Learn why we should use an SEO component that can ensure an ideal technical SEO for our site.

We'll cover the following...

Having an SEO component present in our layout can ensure that the HTML tags responsible for improving technical SEO are present on all pages. This helps with perfecting our technical SEO for our website across all pages. In this lesson, we’ll take a look into what types of tags we need to include in all our pages to ensure an ideal SEO.

Creating the SEO component

In the code widget below, notice an empty SEO component next to Layout.astro. Import the component into the Layout component using an import alias (configured in tsconfig.json) and call it inside head.

// TODO - export `seo` adnd `author` here
Importing SEO component

Import the SEO component in line 2, then call the component inside the head tag in line 8. If you get stuck, you can click the "Show Solution" button below to learn how to achieve this:

Note: Characters might be rendered improperly because of missing UTF-8 character encoding that we’ll add in the next step.

Show Solution

Inside the SEO component, we’re going to need a couple of elements to ensure ideal technical SEO on all pages. To make tags easier to configure, we can collect global details about the blog in a configuration file. Notice that we have an empty config.ts file at the root of the src directory. We can add global details about our blog to this file, which can be reused everywhere else. This is also the perfect place to add details about the blog author. Export the following two objects from config.ts:

Javascript (babel-node)
export const seo = {

    title: 'Astro Blog - (Around max 60 characters)',

    description: 'A short description of the website, preferably between 70 and 150 characters.'

};



export const author = {

    name: 'John Doe',

    role: 'Front-end developer',

    profile: 'https://images.unsplash.com/photo-1534308143481-c55f00be8bd7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=200&q=80',

    about: 'Description about the author, including previous work experiences, studies, and projects. Anything that can establish credibility, experience, and expertise should be listed here to instill trustworthiness in the reader.',

    socials: [

      'https://educative.io',

      'https://twitter.com',

      'https://linkedin.com',

      'https://medium.com'

    ]

};

  • Lines 1–4: The seo object will hold information about the website that is relevant to SEO.

  • Lines 6–17: The author object will hold information about the author of the blog, such as role, description, or links to social pages.

Inside the SEO component, we can reuse the values of the objects in different ways. Add the following to ...