How to add meta tags and micro-markup in vue(+vue routes) + laravel?

D

Dmitry Baskakov2020-11-09 17:27:43

Laravel

Dmitry Baskakov, 2020-11-09 17:27:43

How to correctly add meta tags (depending on the page) if the front is on vue + vue routes, and the back is on the lara? Moreover, you need to make sure that both search engines and various social networks see the data. Is it possible?

Project data:

Just one blade template

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <link rel="shortcut icon" href="/favicon.ico" type="image/vnd.microsoft.icon">
        <title>Laravel</title>
        <style>
            [v-cloak] {
                display: none;
            }
        </style>
        <link rel="stylesheet" href="/css/app.css">
    </head>
    <body>
        <div id="app" v-cloak>
            <app-header></app-header>
            <router-view></router-view>
            <app-footer></app-footer>
        </div>
        <script src="/js/app.js"></script>
    </body>
</html>

Just one .js file in the public directory

In theory, I do not see normal non-crutch ways to solve the problem. However, maybe search engines and social networks already know how to render pages?

Additionally, right there: if search engines understand js well, then how will they react to skeletal animation / layout. When gray blocks appear before loading content

yes, I'm far from perfect in vue and lara - in case the question is too stupid

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

V

Vladimir Korotenko, 2020-11-09
@firedragon

Use ssr or perender. In the second case, do something like document.title = title in the mounted