#How to add meta information to pages like index.astro?

37 messages · Page 1 of 1 (latest)

worn star
#

How do I add meta information to my pages like index.astro in the src/pages folder? For example title, description and page link.

tacit cloak
#

you can use the meta tags, either in the layout or index.astro file,

worn star
#

I am using layouts

tacit cloak
#

then fetch the meta data on server side and put it into the meta tags

worn star
#

Is there no way to set meta titles and descriptions via index.astro?

still token
#

yea you can do that just the same. just put meta tags in it

worn star
#

@still token My index.astro file is like this:

import HomepageLayout from '../layouts/HomepageLayout.astro';

<HomepageLayout>

</HomepageLayout>

Can you tell me how to add meta tags as an example? Normally BaseHead file contains meta tags. But I don't know how to set a specific title and description for each page.

still token
#

so you can have more than one html tag per .astro file. try putting your desired <head> and <title> tags above the <HomepageLayout> and see if it overwrites it. i'm not sure, i'm new to astro

#

i will say that you can refactor out the necessary things as props

#

like if you want to change the title for each page, you could pass title in as a prop to <HomepageLayout>

worn star
#

import HomepageLayout from '../layouts/HomepageLayout.astro';

<HomepageLayout>

</HomepageLayout>

#

Can you make an example on this code

still token
#

sure, i'll show you

#

can you show me what's in HomepageLayout.astro? and could you wrap the code block such that before it, you type ```js and afterwards you put ```

#

this way it shows up in markdown as a code block and it's easier to read

worn star
#

Discord didn't accept it because the code was long.

still token
#

yeah that's fair enough

#

so what exactly are do you want to accomplish? is it just changing the title with every different page?

#

because the approach would change with how much modularity you want

#

if you want a completely different BaseHead for every page, then that's one thing

#

but if you just want to change the title, i would change BaseHead to accept the {title} as a prop, and then pass it to it

#

like how in the docs link i just gave

#

but this is one level deeper

#

i would also caution against making BaseHead its own file, unless you need to compose it for several different things

#

i mean, it's a head tag. you don't need to abstract it out just because you might reuse it

worn star
#

Now I have two page layouts.

  1. HomepageLayout.astro

  2. MySiteLayout.astro

Actually there is no problem in adding meta tags to HomepageLayout because it already affects only one page, that is only the homepage, because it is the template of my homepage.

But for my custom pages I use MySiteLayout. I can't edit MySiteLayout as each meta title and description will be different. For this, astro already has the BaseHead.astro template. There are already meta tags in that template. But the problem is that I can add BaseHead.astro file to my custom pages but I don't know how to add custom title and description meta tag to each page.

still token
#

so if you want to give something like BaseLayout.astro props, you do it like so inside of your pages/index.astro

---
import HomepageLayout from '../layouts/HomepageLayout.astro';
---

<HomepageLayout title="Definitely the homepage">

</HomepageLayout>

alternatively, if you want it to be a variable

---
import HomepageLayout from '../layouts/HomepageLayout.astro';
const newTitle = "Definitely the homepage"
---

<HomepageLayout title={newTitle}>

</HomepageLayout>

then, in the HomepageLayout.astro, you extract it with Astro.props

---
// import BaseHead from '../components/BaseHead.astro';
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import Drawer from '../layouts/Drawer.astro';
const { title } = Astro.props
---

<!DOCTYPE html>
<html data-theme="light" dir="ltr" lang="tr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    // <BaseHead />
    // other meta info from <BaseHead/>
    <title>{title}</title>
    <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-2CD166ZX5F"></script>
#

and, if for example you want to give the title variable straight to <BaseHead /> you can do something like <BaseHead title={title}/> just make sure that you take it out of Astro.props in BaseHead.astro

#

i commented out <BaseHead/> because like i said, it's probably something not worth refactoring out

worn star
#

How do add a description?

#

How do add a meta description?

wraith geyser
tacit cloak
#

Its easy both ways

#

Do chek mdn or other websites for meta tags and how to write different meta tags