#730 updatemetadesc

[AnilKumar3494]

Pull Request

Updating a few things to improve SEO

Change Summary

Updated meta tags and the index.html to improve SEO

RESULTS:

Pages now have dedicated routes
--- / (default),
/about,
/join and
/contact
And each page gets dedicated meta data!

for home page

for /about page

for /join page

for /contact page:

Each page and resource gets dedicated page title as well.
Example below:

[AnilKumar3494]

This update should create nice sharable cards for different platforms ... this will work once these changes are live in prod.

Another way would be to host the 'tessellation' first and use that URL in all the necessary meta tags content attributes:

<meta
    name="twitter:image"
    content="https://phlask.me/assets/phlask-tessellation.png"
  />

Results:

[gcardonag]

Code review

Found 3 issues:

1. Vite public-directory asset imported as ES module instead of referenced by URL — SelectedResourceDetails.tsx imports the tessellation image via a relative path into public/, which is incorrect. Vite does not bundle files from public/ through the module system; they should be referenced as URL strings (e.g., '/assets/images/phlask-tessellation.png'), not imported.

phlask-map/src/components/SelectedResourceDetails/SelectedResourceDetails.tsx

Lines 23 to 25 in 4ac8b90

	import sampleImg from '../../../public/assets/images/phlask-tessellation.png';

2. og:image and twitter:image URLs are missing the images/ subdirectory and will 404 — The tessellation was moved to public/assets/images/phlask-tessellation.png, but both meta tags in index.html point to https://phlask.me/assets/phlask-tessellation.png (without images/). Social media scrapers will receive a 404 for the preview image.

phlask-map/index.html

Lines 32 to 35 in 4ac8b90

	<meta
	property="og:image"
	content="https://phlask.me/assets/phlask-tessellation.png"
	/>

phlask-map/index.html

Lines 46 to 49 in 4ac8b90

	<meta
	name="twitter:image"
	content="https://phlask.me/assets/phlask-tessellation.png"
	/>

3. Default ogImage in SEO.tsx is the favicon, not the tessellation image — All pages using <SEO> without an explicit ogImage override (About, Contact, JoinTheTeam) will render the small favicon as their social share card image. The default should match index.html's og:image: https://phlask.me/assets/images/phlask-tessellation.png.

phlask-map/src/components/SEO/SEO.tsx

Lines 13 to 17 in 4ac8b90

	description,
	ogType = 'website',
	ogImage = 'https://phlask.me/assets/favicon.png',
	canonicalUrl
	}: SEOProps) => {

🤖 Generated with Claude Code

_{- If this code review was useful, please react with 👍. Otherwise, react with 👎.}

[gcardonag]

Don't mind the Claude review too much, just trying the code review plugin in Claude Code out to see how well it works for us :)

[AnilKumar3494]

Don't mind the Claude review too much, just trying the code review plugin in Claude Code out to see how well it works for us :)

-- that's accurate!