SEO
Improve your technical SEO
Use the SEO
component to improve your site’s technical SEO score. It help you optimize titles, meta tags, load times, and structured content.
<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:
<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 }[]}
Prop | Purpose |
---|---|
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. |