utils.js

utils.js

import Vue from 'vue'

/* eg:
head() {
    const { baseUrl, env } = this.$config
    const robots = env === 'production' ? false : 'noindex, nofollow'
    const title = 'My Title'
    const description =
      'My Description'
    const url = `${baseUrl}/`
    // const date = this.$moment().format()
    // const author = 'Author'
    const photo = {
      url: `${baseUrl}${require('~/assets/img/og.jpg')}`,
      width: 1200,
      height: 630,
      type: 'image/jpg',
    }
    const robots = 'noindex, nofollow'
    return this.$head({ title, description, url, photo, robots})
  },
*/
Vue.prototype.$head = (d) => {
    const {
        title,
        description = false,
        url,
        date = false,
        author = false,
        photo: {
            url: photoUrl = false,
            width = 0,
            height = 0,
            type = '',
        } = false,
        ogType = 'website',
        robots: _robots = false,
    } = d

    let meta = [];
    if (description)
        meta.push(
            {
                hid: 'description',
                name: 'description',
                content: description,
            });


    // OPEN GRAPH
    meta.push(
        {
            hid: 'og:title',
            name: 'og:title',
            content: title,
        });
    if (description)
        meta.push(
            {
                hid: 'og:description',
                name: 'og:description',
                content: description,
            });
    meta.push(
        {
            hid: 'og:url',
            name: 'og:url',
            content: url,
        });
    if (photoUrl)
        meta = [
            ...meta,
            ...[
                {
                    hid: 'og:image',
                    name: 'og:image',
                    content: photoUrl,
                },
                {
                    hid: 'og:image:width',
                    name: 'og:image:width',
                    content: width,
                },
                {
                    hid: 'og:image:height',
                    name: 'og:image:height',
                    content: height,
                },
                {
                    hid: 'og:image:type',
                    name: 'og:image:type',
                    content: type,
                },
            ],
        ]
    meta.push(
        {
            hid: 'og:type',
            name: 'og:type',
            content: ogType,
        })
    // meta.push(
    //     {
    //         hid: 'article:author',
    //         name: 'article:author',
    //         content: author,
    //     })
    // meta.push(
    //     {
    //         hid: 'article:published_time',
    //         name: 'article:published_time',
    //         content: date,
    //     });

    // TWITTER:
    meta.push(
        {
            hid: 'twitter:card',
            name: 'twitter:card',
            content: 'summary',
        });
    // meta.push(
    //     {
    //         hid: 'twitter:site',
    //         name: 'twitter:site',
    //         content: '@owe',
    //     });
    meta.push(
        {
            hid: 'twitter:title',
            name: 'twitter:title',
            content: title,
        });
    if (description)
        meta.push(
            {
                hid: 'twitter:description',
                name: 'twitter:description',
                content: description,
            });
    meta.push(
        {
            hid: 'twitter:image',
            name: 'twitter:image',
            content: `${process.env.HOST}/apple-touch-icon.png`,
        });
    meta.push(
        {
            hid: 'twitter:image:alt',
            name: 'twitter:image:alt',
            content: 'Summary Card',
        });

    if (_robots)
        meta = [
            ...[
                {
                    hid: 'robots',
                    name: 'robots',
                    content: _robots,
                },
            ],
            ...meta,
        ]



    const link = [
        {
            rel: 'canonical',
            href: url,
        },
    ]
    return {
        title,
        meta,
        link,
    }
}