Inertia

Meta tags facebook etc.. on SSR what is going on

I have a problem with meta tags. Facebook debugger does not see or interpret tags. The photo is not loading. The website is hosted on Forge (DO). I compile it using npm run build and it runs without errors. SSR starts. Strange behavior because the fb debugger shows the file with translations in the og:description section. (Your translation course)

I am attaching the demo and files: abctest.pl Please take a look at the Facebook debugger (abctest.pl) where do these problems come from?

ssr.js

import {createInertiaApp} from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import {renderToString} from '@vue/server-renderer'
import {createSSRApp, h} from 'vue'
import {ZiggyVue} from '../../vendor/tightenco/ziggy';
import __ from "@/lang.js";

createServer(page =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: name => {
            const pages = import.meta.glob('./Pages/**/*.vue', {eager: true})
            return pages[`./Pages/${name}.vue`]
        },
        setup({App, props, plugin}) {
            let app = createSSRApp({
                render: () => h(App, props),
            });
            app.config.globalProperties.__ = __;

            app.use(plugin)
            app.use(ZiggyVue, {
                ...page.props.ziggy,
                location: new URL(page.props.ziggy.location),
            });
            return app;
        },
    })
)

FrontLayout.js

<script setup>
import { Head, Link, router } from '@inertiajs/vue3';
import Banner from '@/Components/Banner.vue';
import ApplicationMark from "@/Components/ApplicationMark.vue";
import NavLink from "@/Components/NavLink.vue";

defineProps({
    title: String,
});

</script>

<template>
    <div>
        <Head>
            <meta property="og:title" content="Strona główna - work4global" />
            <meta property="og:site_name" content="abctest.pl" />
            <meta property="og:url" content="https://abctest.pl" />
            <meta property="og:description" content="cxvxcvxcvcxvcx" />
            <meta property="og:type" content="website" />
            <meta property="og:image" content="https://abctest.pl/images/inne.jpg" />
            <title>{{title}}</title>
            <meta name=keywords content="portal pracy, szukam pracy, praca za granicą, porady zdrowotne, przepisy kulinarne, darmowe lekcje niemieckiego" />
            <meta name=description content="Opsi - Work" />
        </Head>
        <Banner />
...

app.blade.php

<head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title inertia>{{ config('app.name', 'Work') }}</title>
        <!-- Fonts -->
        <link rel="preconnect" href="https://fonts.bunny.net" />
        <link href="https://fonts.bunny.net/css?family=figtree:400,500,600&display=swap" rel="stylesheet" />
        <link rel="apple-touch-icon" sizes="180x180" href="{{asset('/images/apple-touch-icon.png')}}" />
        <link rel="icon" type="image/png" sizes="32x32" href="{{asset('/images/favicon-32x32.png')}}" />
        <link rel="icon" type="image/png" sizes="16x16" href="{{asset('/images/favicon-16x16.png')}}" />
        <link rel="manifest" href="{{asset('/images/site.webmanifest')}}" />
        <link rel="mask-icon" href="{{asset('/images/safari-pinned-tab.svg')}}" color="#00A0E3B2" />
        <meta name="msapplication-TileColor" content="#00A0E3B2" />
        <meta name="theme-color" content="#00A0E3B2" />
        <meta name=mobile-web-app-capable content="yes" />
        <meta name=msapplication-navbutton-color content="#00A0E3B2" />
        <meta name=apple-mobile-web-app-status-bar-style content="#00A0E3B2" />
        <!-- Scripts -->
        @routes
        @inertiaHead
        @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
    </head>

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    ssr: {
        noExternal: ['lodash', '@spatie/media-library-pro-vue3-attachment','vue-multiselect','axios'],
    },

    plugins: [
        laravel({
            input: 'resources/js/app.js',
            ssr: 'resources/js/ssr.js',
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => tag.startsWith('sm:')
                },
                transformAssetUrls: {
                    base: null,
                    includeAbsolute: false,
                },
            },
        }),
    ],
});

Member

marcin18481

9 months ago

206