fix: add missing SEO meta tags to metadata.svelte and news/[slug]

[10-trix]

Description

Fixes missing SEO meta tags on two pages:

1. src/lib/components/metadata.svelte — added og:title, og:description,
   twitter:title, and twitter:description which were absent from the global
   metadata component.

2. src/routes/news/[slug]/+page.svelte — replaced the minimal <svelte:head>
   block (which only had a broken canonical pointing to /news) with a full set
   of SEO meta tags using the blogpost's title, path, and markdown content.

Resolves: #2194

AI Tool Disclosure

• My contribution does not include any AI-generated content
• My contribution includes AI-generated content, as disclosed below:
  • AI Tools: [e.g. GitHub CoPilot, ChatGPT, JetBrains Junie etc.]
  • LLMs and versions: [e.g. GPT-4.1, Claude Haiku 4.5, Gemini 2.5 Pro etc.]
  • Prompts: [Summarize the key prompts or instructions given to the AI tools]

Affirmation

• My code follows the CONTRIBUTING.md guideline

[Adarshkumar0509]

see i have a doubt twitter:title and twitter:description appear twice in the HTML once from the global metadata.svelte and once from the article page. Duplicate meta tags cause unpredictable behavior in search engines and social platforms?

[10-trix]

@Adarshkumar0509 Thankyou for asking.As i knew that SvelteKit automatically deduplicates the head tags, so i thought it will not be a problem for Search Engines practicaly but you have stated a correct point it might create a Unexpected Behaviour for the Social media platforms as they rendered by the Server Side.
I will reomove the title/description from metadata.svelte and keep only true Global Tags there.
Thankyou!

[Adarshkumar0509]

overall i think its fine i think @ANNI160 , @immortal71 and @muhammad7865 will take a look.

[ANNI160]

Great catch, @Adarshkumar0509 ! And perfect response, @10-trix. You are right that SvelteKit tries to deduplicate svelte:head elements, but social media scrapers (like Twitter and LinkedIn bots) can be notoriously picky if they see competing tags in the raw SSR HTML.

Keeping the dynamic title/description tags strictly on the individual page level and leaving only the static, site-wide tags in metadata.svelte is definitely the safest architecture.

Go ahead and push that update, @10-trix. Once it is up, I will pull your branch locally, inspect the compiled DOM, and give it a final QA check before we mark it ready for Johan. Great teamwork, guys!

[sydseter]

@10-trix Thank you 🙏 for your time!

[Copilot]

Pull request overview

This PR aims to improve SEO/social sharing metadata by expanding the global metadata component and adding a complete set of per-article meta tags for individual news posts (/news/[slug]), addressing missing Open Graph and Twitter tags.

Changes:

• Added og:title, og:description, twitter:title, and twitter:description to the global Metadata component.
• Replaced the minimal/broken <svelte:head> in news/[slug] with canonical URL, title, description, and OG/Twitter tags derived from the blog post.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated 5 comments.

File	Description
cornucopia.owasp.org/src/routes/news/[slug]/+page.svelte	Adds full SEO meta tag set for individual news posts, including canonical URL and social preview metadata.
cornucopia.owasp.org/src/lib/components/metadata.svelte	Extends global metadata with title/description fields for Open Graph and Twitter.

[10-trix]

@sydseter @Adarshkumar0509 @immortal71 Updated the PR — removed og:title, og:description, twitter:title, and twitter:description from metadata.svelte to avoid SSR duplicate tag conflicts. These tags now live only in the page-level svelte:head blocks. Please have a look

[ANNI160]

Hey @10-trix , thanks for pushing that update! Removing the duplicate global tags looks good.

However, before I can give this the final approval, we need to address the null-safety bug that Copilot caught in src/routes/news/[slug]/+page.svelte.

If a blog post doesn't have markdown content, blogpost.markdown?.replace(...) will evaluate to undefined after the first replace, and the second .replace() will throw a 500 runtime crash.

Can you safely wrap those blocks with a fallback string like this?

JavaScript:
content={(blogpost.markdown || '')
.replace(/[#*_>`]/g, "")
.replace(/\n+/g, " ")
.trim()
.slice(0, 160)}

Once you push that quick fix, I'll test it locally and we should be good to go!

[10-trix]

Fixed both issues — added || '' null-safety fallback across all 3 description fields, and removed og:type from metadata.svelte to fix the duplicate conflict with news/[slug]. Please review!

[Adarshkumar0509]

hii @sydseter can you take a look at this when you have time?

[10-trix]

Hi @sydseter,
Fixed — || '' null-safety fallback now consistently applied to all 3 description fields with consistent indentation. Please re-review!

[ANNI160]

Tested this locally and the || '' null-safety fallback works perfectly! No runtime errors on empty posts, and the SSR duplicate tags are successfully cleared from the global layout. Excellent work getting this sorted, @10-trix !

@sydseter This is fully QA'd on our end and looks solid. It's ready whenever you have a moment to review the latest commits and clear the 'Changes requested' block!

[Copilot]

Pull request overview

Copilot reviewed 2 out of 2 changed files in this pull request and generated 3 comments.

[sydseter]

@10-trix 2 more issues.

[ANNI160]

@10-trix Almost there! Johan approved it, but the final Copilot run caught two tiny edge cases from our last refactor.

Formatting: In news/[slug]/+page.svelte (around line 68), the closing anchor tag got split across two lines (</a and >). Just join those back together into .

Global SEO: In metadata.svelte, we accidentally removed og:type completely. We should add back to the global component so the main site doesn't lose its base SEO type!

Once you push those two quick fixes, we should be 100% ready to merge