SEO & Open Graph Setup
Relevant source files
The following files were used as context for generating this wiki page:
The SEO and Open Graph setup manages search engine optimization and social sharing metadata for the website. It transforms content metadata into structured JSON-LD schemas and Open Graph meta tags to ensure accurate representation on search engines and social platforms.
The system relies on a central SeoMeta interface that consolidates page titles, descriptions, canonical URLs, and content types. It uses specific mapping logic to differentiate between standard pages, blog posts, and articles.
Sources: src/utils/seo/types.ts:1-24, src/utils/seo/schema.ts:1-12
Data Resolution and Schema
The system resolves SEO data by prioritizing specific SEO overrides over general page frontmatter or rendered content. The resolvePageSeo function executes this prioritization logic.
Sources: src/features/pages/pages.utils.ts:72-85
SEO Resolution Priority Table
| Priority | Field | Source |
|---|---|---|
| 1 (High) | Title | data.seo.title |
| 2 | Title | data.title |
| 1 (High) | Description | data.seo.description |
| 2 | Description | data.description |
| 3 (Low) | Description | rendered.html |
Sources: src/features/pages/pages.utils.ts:77-83
Content Type Mapping
The system maps internal content types to standard Schema.org and Open Graph types to ensure correct semantic indexing.
| SeoContentType | Schema.org Type | Open Graph Type |
|---|---|---|
article | Article | article |
blog | BlogPosting | article |
page | WebPage | website |
Sources: src/utils/seo/schema.ts:7-12, src/utils/seo/social.ts:6-10
Structured Data (JSON-LD)
The buildGraphJsonLd function generates a structured data graph containing three primary nodes: the WebSite, the specific WebPage (or Article/BlogPosting), and the Person (author).
The diagram shows the flow of metadata into the triple-node JSON-LD graph structure.
Sources: src/utils/seo/schema.ts:73-78
Person and Website Identity
- Person Node: Includes the author's name, URL, and social profile links (
sameAs) such as GitHub and LinkedIn. - Website Node: Identifies the site using the origin URL, site name, and hostname.
Sources: src/utils/seo/schema.ts:14-41
Social Metadata and Open Graph
Social meta tags are generated for both Open Graph (Facebook/LinkedIn) and Twitter platforms. The buildSocialMetaTags function converts relative paths to absolute URLs using the site origin.
Social Metadata Components
| Meta Tag | Value Source |
|---|---|
og:title / twitter:title | Page title |
og:description / twitter:description | Page description |
og:image / twitter:image | Absolute path to ogImage or default fallback |
og:url / twitter:url | Absolute canonical URL |
twitter:card | Hardcoded to summary_large_image |
Sources: src/utils/seo/social.ts:19-46
Image Handling
The system uses standard dimensions for social sharing images:
- Width: 1200 pixels
- Height: 630 pixels
If no specific ogImage is defined in the content frontmatter, the system defaults to a predefined path (DEFAULT_OG_IMAGE_PATH).
Sources: src/utils/og.ts:16-18, src/utils/seo/social.ts:15-17
Implementation Example
The following code illustrates how the system builds the structured data for a page.
function buildPageJsonLd(meta: SeoMeta) {
const { canonicalUrl, contentType = 'page', description, title } = meta
const type = CONTENT_TYPE_MAP[contentType]
const url = canonicalUrl ? new URL(canonicalUrl, GLOBAL_CONFIG.site.origin).toString() : undefined
return {
'@context': 'https://schema.org',
'@type': type,
...(url && { '@id': url }),
description,
headline: title,
url,
publisher: personRef(),
}
}
Sources: src/utils/seo/schema.ts:43-71
Conclusion
The SEO & Open Graph Setup provides a robust framework for managing site visibility. By centralizing metadata resolution and automating the creation of JSON-LD and social tags, the system ensures consistent and high-quality presentation across search engines and social media platforms.