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.

Layout documentation ->

Template library ->

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.