Writing

March 23, 2024

Layouts in Astro

Summary

Understanding how to use layout efficiently in Astro, helps you with better structuring of your codebase allowing you to leverage same structure, optimising for SEO and producing a more maintainable website along with you can use it as entry point for loading third party script, across your website!

Uses of Layouts

  • Describe data on the Page, through Meta tags such as title, description

  • As a Entry point for third party script

  • Preloading Fonts, Assets

  • Initialising Service Workers for PWAs

Describe data on the Page

Open Graph protocol is used to describe data on a page, Twitter card tags look similar to Open Graph tags, and are based on the same conventions as the Open Graph protocol, through which you can display useful information onto the social media platforms such as Discord, Whatsapp, Facebook and others

Open Graph tags

<html>
  <head>
    <title>The Rock (1996)</title>
    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://imdb.com/title/tt0117500/" />
    <meta property="og:image" content="https://imdb.com/images/rock.jpg" />
    ...
  </head>
  ...
</html>

It is easy to generate a Twitter card without duplicating tags and data. When the Twitter card processor looks for tags on a page, it first checks for the Twitter-specific property, and if not present, falls back to the supported Open Graph property. so we don’t need to include extra meta tags

<html>
  <head>
    <title>The Rock (1996)</title>
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:site" content="@nytimesbits" />
    <meta name="twitter:creator" content="@nickbilton" />

    <meta property="og:title" content="The Rock" />
    <meta property="og:type" content="video.movie" />
    <meta property="og:url" content="https://imdb.com/title/tt0117500/" />
    <meta property="og:image" content="https://imdb.com/images/rock.jpg" />
    ...
  </head>
  ...
</html>

Now, extract it into a SEO.astro component

---
const { title, description, image, twitterHandle, type, url } = Astro.props;
---
<title>{title}</title>
<meta name="description" content={description} />

<meta name="twitter:card" content={title} />
<meta name="twitter:site" content={twitterHandle} />
<meta name="twitter:creator" content={twitterHandle} />

<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content={type} />
<meta property="og:url" content={url} />
{image && <meta property="og:image" content={image} /> }

Create a Layout in src/layouts/Layout.astro and define the default values for title, description, type, Cover Image and canonicalURL for our website,

---
const {
 title = 'Website Title',
 description = 'Description of Website',
 type = 'website',
 image = null,
} = Astro.props;
const twitterHandle = "@q1b";
const canonicalURL = new URL(Astro.request.url, Astro.site);
---
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <SEO 
         title={title} 
         description={description} 
         type={type}
         twitterHandle={twitterHandle}
         image={image}
         url={canonicalURL}
    />
  </head>
  ...
</html>

in our above code snippet we are using Astro.site, you need to configure your hosted site url, in your astro.config.mjs in order to pass google lighthouse scores

export default defineConfig({
  site: 'https://sukhpreet.dev'
  ...
})

Structuring the skeleton of your website

Webpages can and will look pretty different from one another, but they all tend to share similar standard components:

Below, example is just html we haven’t written any code related to astro

<html>
  ...
  <body>
    <header></header>
    <main>
      <slot/> <!-- your content is injected here -->
    </main>
    <footer>
      <p>©Copyright 2050 by nobody. All rights reversed.</p>
    </footer>
  </body>
</html>

Bonus Tip for SEO

Along with Open Graph tags and Twitter Card tags, you can check how you can change your search appearance in google search using JSON-LD, for learning more you can check this link