fix: add missing SEO meta tags to metadata.svelte and news/[slug]#2946
fix: add missing SEO meta tags to metadata.svelte and news/[slug]#294610-trix wants to merge 1 commit intoOWASP:masterfrom
Conversation
|
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? |
|
@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. |
|
overall i think its fine i think @ANNI160 , @immortal71 and @muhammad7865 will take a look. |
|
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! |
There was a problem hiding this comment.
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, andtwitter:descriptionto the globalMetadatacomponent. - Replaced the minimal/broken
<svelte:head>innews/[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. |
| name="description" | ||
| content={blogpost.markdown | ||
| ?.replace(/[#*_>`]/g, "") | ||
| .replace(/\n+/g, " ") | ||
| .trim() | ||
| .slice(0, 160)} |
| property="og:description" | ||
| content={blogpost.markdown | ||
| ?.replace(/[#*_>`]/g, "") | ||
| .replace(/\n+/g, " ") | ||
| .trim() | ||
| .slice(0, 160)} |
| name="twitter:description" | ||
| content={blogpost.markdown | ||
| ?.replace(/[#*_>`]/g, "") | ||
| .replace(/\n+/g, " ") | ||
| .trim() | ||
| .slice(0, 160)} |
| <!-- Facebook Meta Tags --> | ||
| <meta | ||
| property="og:url" | ||
| content="https://cornucopia.owasp.org/news/{blogpost.path}" | ||
| /> | ||
| <meta property="og:type" content="article" /> | ||
| <meta property="og:title" content="{blogpost.title} | OWASP Cornucopia" /> | ||
| <meta | ||
| property="og:description" | ||
| content={blogpost.markdown | ||
| ?.replace(/[#*_>`]/g, "") | ||
| .replace(/\n+/g, " ") | ||
| .trim() | ||
| .slice(0, 160)} | ||
| /> | ||
| <meta property="og:image" content="/images/opengraph.png" /> | ||
|
|
||
| <!-- Twitter Meta Tags --> | ||
| <meta name="twitter:card" content="summary_large_image" /> | ||
| <meta name="twitter:title" content="{blogpost.title} | OWASP Cornucopia" /> | ||
| <meta | ||
| name="twitter:description" | ||
| content={blogpost.markdown | ||
| ?.replace(/[#*_>`]/g, "") | ||
| .replace(/\n+/g, " ") | ||
| .trim() | ||
| .slice(0, 160)} | ||
| /> | ||
| <meta name="twitter:image" content="/images/opengraph.png" /> |
| <meta property="og:url" content="https://cornucopia.owasp.org/" /> | ||
| <meta property="og:type" content="website" /> | ||
| <meta property="og:title" content="OWASP Cornucopia" /> | ||
| <meta | ||
| property="og:description" | ||
| content="A threat modelling card game to help development teams identify security requirements." | ||
| /> | ||
| <meta property="og:image" content="/images/opengraph.png" /> | ||
|
|
||
| <!-- Twitter Meta Tags --> | ||
| <meta name="twitter:card" content="summary_large_image"> | ||
| <meta property="twitter:domain" content="cornucopia.owasp.org"> | ||
| <meta property="twitter:url" content="https://cornucopia.owasp.org/"> | ||
| <meta name="twitter:image" content="/images/opengraph.png"> | ||
| <meta name="twitter:card" content="summary_large_image" /> | ||
| <meta property="twitter:domain" content="cornucopia.owasp.org" /> | ||
| <meta property="twitter:url" content="https://cornucopia.owasp.org/" /> | ||
| <meta name="twitter:title" content="OWASP Cornucopia" /> | ||
| <meta | ||
| name="twitter:description" | ||
| content="A threat modelling card game to help development teams identify security requirements." | ||
| /> |
Description
Fixes missing SEO meta tags on two pages:
src/lib/components/metadata.svelte— addedog:title,og:description,twitter:title, andtwitter:descriptionwhich were absent from the globalmetadata component.
src/routes/news/[slug]/+page.svelte— replaced the minimal<svelte:head>block (which only had a broken canonical pointing to
/news) with a full setof SEO meta tags using the blogpost's title, path, and markdown content.
Resolves: #2194
AI Tool Disclosure
[e.g. GitHub CoPilot, ChatGPT, JetBrains Junie etc.][e.g. GPT-4.1, Claude Haiku 4.5, Gemini 2.5 Pro etc.][Summarize the key prompts or instructions given to the AI tools]Affirmation