Layouts and the Document Head

By Syncfusion®, Inc. · Last updated November 14, 2026

Layout components with slot, the html, head and body elements, a shared header and footer, passing props to a layout, nested layouts, page titles, meta descriptions, Open Graph tags, canonical URLs, favicons and a reusable head component.

Layouts

• Every page of a site shares parts: the <head>, the header, the menu, the footer.
• Copying them into every page is slow, and one change means editing every file.
• A layout is a component that holds these shared parts and a <slot /> for the page's own content.
• In this lesson, you will build layouts and fill the document head with the right tags.

Simple lesson: write the page frame once, in a layout. Each page fills in the middle.

A Real-World Example

• Asha's site now has a home page and an about page.
• Both need the same <head>, header and footer.
• When she adds a "Blog" link to the menu, it should appear on every page at once.
• She moves the shared parts into BaseLayout.astro. Each page only writes its own content.

Press ▶ Run. Then click About. The header and footer stay the same. Only the middle changes.

What happened:

• Each page wraps its content in <BaseLayout>.
• The content lands where the layout has <slot />.
• title is a prop. The layout puts it into the <title> tag.

What You Will Learn

In this lesson, you will learn:

1. What a layout is and where it lives.
2. How a layout uses <slot /> and props.
3. Why a layout holds <html>, <head> and <body>.
4. How to nest one layout inside another.
5. Which tags belong in the document head.
6. How to build Open Graph tags and canonical URLs.
7. How to make a reusable head component.

Layout Basics

What Layouts Are

• Layout = an Astro component that gives pages a shared structure.
• It is a normal component. The name "layout" only tells you its job.
• Put layouts in src/layouts. Name them after their use: BaseLayout.astro, BlogPostLayout.astro.

Using slot in a Layout

• The layout has one <slot />, usually inside <main>.
• The page's content fills it.
• This is the default slot from Slots and Composition, used for a whole page.

Applying a Layout to a Page

1. Import the layout in the page's script.
2. Wrap the page's content in the layout's tag.
3. Pass props, such as title, as attributes.

Simple lesson: a layout is a component with the page frame and one <slot />.

Page Structure in Layouts

The html, head and body Elements

• A full HTML page needs <html>, <head> and <body>.
• Put them in the layout, not in each page. Then no page can forget them.
• <html lang="en"> tells browsers and screen readers the page's language.
• <meta charset="utf-8" /> makes sure letters like "₹" and "é" show correctly.
• <meta name="viewport" content="width=device-width" /> makes the page fit phone screens.

Shared Header and Footer

• Write the header and footer once in the layout, or as components the layout imports.
• A change to the menu now shows on every page.
• The header can mark the current page, using Astro.url.pathname.

Press ▶ Run, then click Blog. The menu marks the page you are on.

• aria-current="page" tells screen readers which link is the current page.
• When the value is undefined, Astro leaves the attribute out.

Passing Props to a Layout

• A layout reads props like any component: const { title, description } = Astro.props;.
• Use them in the head, so each page gets its own title and description.

Press ▶ Run. Each page sends a different title and description to the same layout. Switch pages and read HTML sent to browser.

• The home page sends no description, so the layout's default is used.
• The projects page sends its own.

Simple lesson: the layout owns the page structure. Pages pass in only what is different.

Nested Layouts

Placing a Layout Inside a Layout

• A layout can use another layout.
• BlogPostLayout can wrap the post in a date and author line, then pass everything to BaseLayout.
• The page uses only BlogPostLayout. It gets the base frame for free.

When to Nest Layouts

• Nest when a group of pages adds something on top of the base frame.
• Examples: blog posts add a date and author. Docs pages add a sidebar.
• Do not nest just to split a file. Two or three levels are plenty.

• The page gives only the title, the date and its paragraphs.
• BlogPostLayout adds the heading and the byline.
• BaseLayout adds the <head>, header and footer.

Simple lesson: nest a layout when a group of pages adds its own frame on top of the base frame.

Managing the Document Head

• Document head = the <head> part of a page. Visitors do not see it, but browsers, search engines and social apps read it.

Title and Meta Description

• <title> is the text on the browser tab and the blue link in search results.
• Keep it under about 60 characters. Put the most important words first.
• <meta name="description"> is the short summary search engines may show under the title.
• Keep it to one or two sentences, about 150 characters.

Open Graph and Social Tags

• Open Graph tags = <meta property="og:..."> tags that social apps read.
• When someone shares your link on WhatsApp, LinkedIn or X, the app shows a card from them.
• The main ones: og:title, og:description, og:image and og:url.
• og:image must be a full URL, such as https://asha.dev/social.png.

Canonical URLs

• Canonical URL = the one official address of a page.
• The same page can sometimes be reached at two addresses, such as with and without ?ref=share.
• <link rel="canonical" href="..."> tells search engines which address to list.

• Build it from two values:

  • Astro.url.pathname = the path of the current page, such as /about.
  • Astro.site = the site from astro.config.mjs.
• new URL(Astro.url.pathname, Astro.site) joins them: https://asha.dev/about.

Favicons

• Favicon = the small icon on the browser tab.
• Put the file in public/, then link it: <link rel="icon" type="image/svg+xml" href="/favicon.svg" />.

Reusable Head Components

• Put all the head tags in one component, such as BaseHead.astro.
• The layout uses <BaseHead title={title} description={description} /> inside <head>.
• Every page now gets correct, complete head tags.

Press ▶ Run. Read HTML sent to browser. Then open the about page from the address bar and compare the canonical link.

• og:image became a full URL, because social apps need one.
• The canonical link changes from page to page, because Astro.url.pathname changes.

Simple lesson: a reusable head gives every page a title, a description, social tags and a canonical link.

TL;DR

1. Layout = a component with the page frame and a <slot />. Lives in src/layouts.
2. Use a layout = import it, wrap the content, pass props.
3. html, head, body = in the layout, so no page forgets them.
4. Nested layout = a layout that wraps another layout, such as BlogPostLayout around BaseLayout.
5. title = tab text and search link. meta description = search summary.
6. Open Graph = og:title, og:description, og:image, og:url for social cards.
7. Canonical URL = new URL(Astro.url.pathname, Astro.site).
8. Favicon = file in public/, linked with <link rel="icon">.
9. BaseHead = one component for all head tags.

Common mistakes

Check Yourself

Exercises

What to Remember

• A layout is a component with the page frame and a <slot />.
• Put <html>, <head> and <body> in the layout.
• Pass each page's title and description as props.
• Nest layouts when a group of pages needs an extra frame.
• A reusable head gives every page its title, description, social tags and canonical link.

Next: Routing, where you learn every way a file becomes an address.