Feat: Enhance metadata handling in BaseHead and layout components - #16
Feat: Enhance metadata handling in BaseHead and layout components#16julienG-48 wants to merge 1 commit into
Conversation
|
@Lozweb is attempting to deploy a commit to the WhitePaper233's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
There was a problem hiding this comment.
Pull request overview
This PR enhances per-page metadata support by allowing layouts/components to pass dynamic title/description/image values down to BaseHead, enabling better SEO and social sharing previews across pages and posts.
Changes:
- Add optional
title,description, andimageprops toBaseHeadandBaseLayout. - Build a dynamic page title (
Page Title | Site Title) and fall back to site defaults for description. - Render
og:imageandtwitter:imagetags when an image is provided, and thread metadata fromMainLayout.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
src/layouts/MainLayout.astro |
Passes title/subTitle/bannerImage into the base layout as head metadata inputs. |
src/layouts/BaseLayout.astro |
Accepts metadata props and forwards them to BaseHead. |
src/components/BaseHead.astro |
Computes dynamic title/description and conditionally outputs OG/Twitter image tags. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <link | ||
| rel="alternate" | ||
| type="application/rss+xml" | ||
| title={YukinaConfig.title} | ||
| href={new URL("rss.xml", Astro.site)} | ||
| rel="alternate" | ||
| type="application/rss+xml" | ||
| title={YukinaConfig.title} | ||
| href={new URL("rss.xml", Astro.site)} | ||
| /> | ||
|
|
||
| <!-- SiteMap --> | ||
| <link rel="sitemap" href="/sitemap-index.xml" /> | ||
|
|
||
| <!-- CSS --> | ||
| <link | ||
| rel="stylesheet" | ||
| href="https://fastly.jsdelivr.net/npm/katex/dist/katex.min.css" | ||
| rel="stylesheet" | ||
| href="https://fastly.jsdelivr.net/npm/katex/dist/katex.min.css" | ||
| /> | ||
| <!-- Fonts --> | ||
| <link rel="preconnect" href="https://fonts.bunny.net" /> | ||
| <link | ||
| href="https://fonts.bunny.net/css?family=noto-sans-sc:100,200,300,400,500,600,700,800,900|raleway:500,700" | ||
| rel="stylesheet" | ||
| href="https://fonts.bunny.net/css?family=noto-sans-sc:100,200,300,400,500,600,700,800,900|raleway:500,700" | ||
| rel="stylesheet" | ||
| /> |
| YukinaConfig.bannerStyle == "LOOP" && ( | ||
| <Banner | ||
| title={props.title} | ||
| subTitle={props.subTitle} | ||
| bannerImage={props.bannerImage} | ||
| slug={props.slug} | ||
| /> | ||
| ) |
| <BaseHead title={title} description={description} image={image} /> | ||
| <body class="overflow-y-hidden"> | ||
| <slot /> |
| <meta property="twitter:card" content="summary_large_image" /> | ||
| <meta property="twitter:url" content={Astro.url} /> | ||
| <meta property="twitter:title" content={YukinaConfig.title} /> | ||
| <meta property="twitter:description" content={YukinaConfig.description} /> | ||
| <!-- <meta property="twitter:image" content={new URL(image, Astro.url)} /> --> | ||
| <meta property="twitter:title" content={pageTitle} /> | ||
| <meta property="twitter:description" content={pageDescription} /> | ||
| {ogImage && <meta property="twitter:image" content={ogImage} />} |
|
Hi, I'm currently on vacation. I'll review all the comments and address them when I'm back in approximately two weeks. |
Thank you for the contribution. The comment above was actually generated by GitHub Copilot. I’ll take care of addressing the remaining points and handle the final merge when I have some time. There’s no need for you to make any further changes or follow-ups on this PR. Wishing you a wonderful vacation! |
Problem
Currently,
BaseHead.astrouses static values fromYukinaConfigfor all pages:og:imageandtwitter:imagetags were commented out and never renderedSolution
title,description, andimageprops toBaseHeadandBaseLayoutPage Title | Site Title(falls back to site title)title,subTitle, andbannerImagefromMainLayoutthrough the chainThis allows individual pages and posts to have proper social sharing previews.