Search documentation v1.0.0

SEO

Improve your technical SEO

Source Report Issue

Use the SEO component to improve your site’s technical SEO score. It help you optimize titles, meta tags, load times, and structured content.

How to use SEO components in Astro
<html>
<head>
<SEO
title="Page title"
url="http://webcoreui.dev/blocks/seo"
description="Short description about your page"
faviconUrl="http://webcoreui.dev/favicon.ico"
prefetchGTAG={true}
prefetchGA={true}
noIndex={false}
meta={[{
name: 'category',
content: 'Component'
}]}
structuredContents={[{
'@context': 'https://schema.org',
'@type': 'WebSite',
'url': 'https://webcoreui.dev',
'name': 'Webcore'
}]}
/>
</head>
<body>...</body>
</html>

Note that the component does not generate a head tag. You must use the SEO component within a head. The above code will generate the following tags for you:

Output of the above SEO component
<title>Page Title</title>
<link rel="dns-prefetch" href="https://www.googletagmanager.com/" />
<link rel="dns-prefetch" href="https://www.google-analytics.com/" />
<link rel="icon" type="image/x-icon" href="http://webcoreui.dev/favicon.ico" />
<link rel="canonical" href="http://webcoreui.dev/blocks/seo" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Short description about your page" />
<meta name="robots" content="index, follow" />
<meta name="og:url" content="http://webcoreui.dev/blocks/seo" />
<meta name="og:title" content="Page Title" />
<meta name="og:description" content="Short description about your page" />
<meta name="og:type" content="website" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="Page Title" />
<meta name="twitter:description" content="Short description about your page" />
<meta name="Category" content="Component" />
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebSite",
"url": "https://webcoreui.dev",
"name": "Webcore"
}
</script>

If you’d like to use the SEO component with a premade layout, you can use the Layout component. You can also explore our template library where the SEO component is already integrated into each template.

API

type SEOProps = {
title: string
url: string
faviconUrl: string
description: string
canonical?: string
prefetchGTAG?: boolean
prefetchGA?: boolean
noIndex?: boolean
meta?: {
name: string
content: string
}[]
links?: {
crossOrigin?: 'anonymous' | 'use-credentials'
fetchPriority?: 'high' | 'low' | 'auto'
href?: string
hrefLang?: string
integrity?: string
media?: string
imageSrcSet?: string
imageSizes?: string
sizes?: string
type?: string
charSet?: string
as?: 'fetch'
| 'audio'
| 'audioworklet'
| 'document'
| 'embed'
| 'font'
| 'frame'
| 'iframe'
| 'image'
| 'json'
| 'manifest'
| 'object'
| 'paintworklet'
| 'report'
| 'script'
| 'serviceworker'
| 'sharedworker'
| 'style'
| 'track'
| 'video'
| 'webidentity'
| 'worker'
| 'xslt'
referrerPolicy?: 'no-referrer'
| 'no-referrer-when-downgrade'
| 'origin'
| 'origin-when-cross-origin'
| 'same-origin'
| 'strict-origin'
| 'strict-origin-when-cross-origin'
| 'unsafe-url'
}[]
structuredContents?: {
[key: string]: any
}[]
}
PropPurpose
title Sets the title, og:title, and twitter:title tags.
url Sets the og:url and canonical URL.
faviconUrl Sets the link for the favicon.
description Sets meta description as well as og and twitter description tags.
canonical Sets the canonical URL. Overrides the url prop.
prefetchGTAG Prefetches the Google Tag Manager script.
prefetchGA Prefetches the Google Analytics script.
noIndex Sets the robots meta tag to noindex, nofollow when set to true.
meta Sets additional meta tags for the page.
links Sets link tags for additional behavior, such as font preloading or hrefLangs.
structuredContents Sets structured content for the page.