paulnicoue/composables/useAppHead.js

141 lines
3.9 KiB
JavaScript

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',
},
],
})
}