paulnicoue/composables/useAppHead.js

export const useAppHead = (pageTitleChunk) => {

    // --------------------------------------------------
    // DATA
    // --------------------------------------------------

    const siteTitle = 'Paul Nicoué';
    const siteUrl = 'https://paulnicoue.com';
    const pageTitle = pageTitleChunk ? `${siteTitle} | ${pageTitleChunk}` : siteTitle;
    const pageUrl = siteUrl + useRoute().path;
    const metaDescription = `Intégrateur et développeur web.`;
    const metaImageUrl = `${siteUrl}/images/paul-nicoue-logo-1200x675px.png`;

    // --------------------------------------------------
    // HEAD
    // --------------------------------------------------

    return useHead({
        htmlAttrs: {
            lang: 'fr',
        },
        title: pageTitle,
        meta: [
            /* Basic metadata */
            {
                charset: 'utf-8',
            },
            {
                name: 'viewport',
                content: 'width=device-width',
            },
            /* Name */
            {
                id: 'schema_name',
                itemprop: 'name',
                content: siteTitle,
            },
            /* Description */
            {
                name: 'description',
                content: metaDescription,
            },
            {
                id: 'schema_description',
                itemprop: 'description',
                content: metaDescription,
            },
            /* Author */
            {
                name: 'author',
                content: siteTitle,
            },
            /* Image */
            {
                id: 'schema_image',
                itemprop: 'image',
                content: metaImageUrl,
            },
            /* Open Graph */
            {
                property: 'og:title',
                content: pageTitle,
            },
            {
                property: 'og:description',
                content: metaDescription,
            },
            {
                property: 'og:image',
                content: metaImageUrl,
            },
            {
                property: 'og:image:width',
                content: '1200',
            },
            {
                property: 'og:image:height',
                content: '675',
            },
            {
                property: 'og:url',
                content: pageUrl,
            },
            {
                property: 'og:type',
                content: 'website',
            },
            /* Twitter Card */
            {
                name: 'twitter:card',
                content: 'summary_large_image',
            },
            {
                name: 'twitter:title',
                content: siteTitle,
            },
            {
                name: 'twitter:description',
                content: metaDescription,
            },
            {
                name: 'twitter:image',
                content: metaImageUrl,
            },
        ],
        link: [
            /* Canonical URL */
            {
                rel: 'canonical',
                href: pageUrl,
            },
            /* Favicon */
            {
                rel: 'icon',
                sizes: 'any',
                href: 'favicon/paul-nicoue-favicon.ico',
            },
            {
                rel: 'icon',
                type: 'image/svg+xml',
                href: 'favicon/paul-nicoue-favicon.svg',
            },
            {
                rel: 'apple-touch-icon',
                href: 'favicon/paul-nicoue-apple-touch-icon.png',
            },
            {
                rel: 'manifest',
                href: 'favicon/paul-nicoue.webmanifest',
            },
        ],
        style: [
            /* Schema */
            {
                itemscope: true,
                itemtype: 'https://schema.org/WebSite',
                itemref: 'schema_name schema_description schema_image',
            },
        ],
    })
}