Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated metadata #26

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

FrankiePower
Copy link

@FrankiePower FrankiePower commented Jan 11, 2025

Update Metadata for Better Social Media Previews

Overview

Updated the metadata for the website to provide a custom title, description, and an eye-catching thumbnail. The updated title now appears in the browser tab.

Features

  • Customized title and description for better branding
    OgraphPreview

  • Eye-catching thumbnail image for social media previews. I used the design provided by @NikolaiL and also modified the background.
    thumbnailPreview

  • Edited the Logo to white to upload for the browser tab
    browsertab

Technical Implementation

  • Updated the layout.tsx file to customize the title and description meta tags
  • Replaced the existing thumbnail.jpg in the Next.js public folder with the new design
  • Used the Open Graph Previewer Chrome Extension to ensure the metadata is displaying correctly

Components Updated

  • layout.tsx file (for title and description updates)
  • public/thumbnail.jpg (replaced with new visually appealing image)

Additional Information

Related Issues

Closes #9

Your ENS/address: 0x24e765Fcd00106D7175837848ec9073f9fEb9d8e

Copy link

vercel bot commented Jan 11, 2025

@FrankiePower is attempting to deploy a commit to the BuidlGuidl Team on Vercel.

A member of the Team first needs to authorize it.

Copy link
Collaborator

@phipsae phipsae left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice job of implementing the issue, thanks!

I just found a little thing. See below.

@@ -44,7 +44,7 @@ export const getMetadata = ({
images: [imageUrl],
},
icons: {
icon: [{ url: "/favicon.png", sizes: "32x32", type: "image/png" }],
icon: [{ url: "/logo-white.png", sizes: "64x64", type: "image/png" }],
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's great that you considered having a white version for dark mode!

But what about light mode? For me, if the tab isn't selected, it looks like this:
Screenshot 2025-01-13 at 10 37 32

However, when I click on the tab, it becomes invisible:
Screenshot 2025-01-13 at 10 37 27

Copy link

vercel bot commented Jan 13, 2025

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
batch12.buidlguidl.com ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jan 13, 2025 9:52am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4. Update metadata for improved social sharing and branding
2 participants