Sample Web Page
This is an example of a simple web page showcasing the usage of the svead package for SEO optimization.
Here’s the code for this page:
<script lang="ts">
import { page } from '$app/stores';
import {
Head,
SchemaOrg,
type SchemaOrgProps,
type SeoConfig,
} from 'svead';
export let data;
let { Copy } = data;
const seo_config: SeoConfig = {
url: $page.url.href,
website: 'https://example.com',
title: 'Sample Web Page',
description:
'This is an example of a simple web page showcasing the usage of the svead package for SEO optimization.',
open_graph_image: 'https://example.com/images/web-page-image.jpg',
language: 'en',
twitter_handle: '@example',
site_name: 'Example Site',
};
const schema_org: SchemaOrgProps['schema'] = {
'@type': 'WebPage',
'@id': $page.url.href,
url: $page.url.href,
name: seo_config.title,
description: seo_config.description,
inLanguage: seo_config.language,
isPartOf: {
'@type': 'WebSite',
'@id': seo_config.website,
},
primaryImageOfPage: {
'@type': 'ImageObject',
url: seo_config.open_graph_image,
},
datePublished: '2023-06-03T09:00:00Z',
dateModified: '2023-06-03T11:30:00Z',
author: {
'@type': 'Person',
name: 'John Doe',
url: `${seo_config.website}/author/john-doe`,
},
publisher: {
'@type': 'Organization',
name: seo_config.site_name,
url: seo_config.website,
logo: {
'@type': 'ImageObject',
url: `${seo_config.website}/logo.png`,
},
},
breadcrumb: {
'@type': 'BreadcrumbList',
'@id': `${$page.url.href}#breadcrumb`,
name: 'Breadcrumb',
itemListElement: [
{
'@type': 'ListItem',
position: 1,
name: 'Home',
item: seo_config.website,
},
{
'@type': 'ListItem',
position: 2,
name: seo_config.title,
item: $page.url.href,
},
],
},
potentialAction: [
{
'@type': 'ReadAction',
target: $page.url.href,
},
],
};
</script>
<Head {seo_config} />
<SchemaOrg schema={schema_org} />
<main>
<h1>{seo_config.title}</h1>
<p>{seo_config.description}</p>
<!-- Rest of your page content -->
<Copy />
</main>