Vue meta not getting updates

Vue itself is client-side JS framework. When you build, your index.html does not have any content - only JS that generates the content when executed. Same applies to VueMeta. Problem is, when you are sharing links (FB, Twitter etc), they download linked page by using their own bot (crawler essentially) and analyze the content without executing any JS inside - so yes, they don't see any meta generated by VueMeta...

Only solution to this is to deliver fully (or partially) prerendered page containing all important information without executing JS

One way of doing so is to use Vue server side rendering - and you are right, frameworks like Nuxt use exactly that.

Generally there are two flavors:

SSR - page is rendered at the moment it is requested by the client (or bot). In most cases it requires running Node server (because Vue SSR is implemented in JS). Most prominent example of this is Nuxt.js

SSG - server side generation. Pages are generated at build time including all HTML. When loaded into the browser server returns HTML + all the JS/CSS but when it loads it's the same Vue SPA. You don't need Node server for that so you can host on CDN or any static hosting service like Netlify. Examples in Vue world are Gridsome, VuePress, Nuxt can do it too...

Note: there are other ways for example using headless chrome/puppeteer or services like https://prerender.io/

Nuxt

As said before, Nuxt is great but is very opinionated about how your app is structured (file based routing), how to get data etc. So switching to Nuxt can mean a complete app rewrite. On top of that it requires running NODE server which has consequences of its own (hosting).

BUT it seems to me that you are already using server - Laravel. So your best bet is probably to implement your meta rendering directly in Laravel.

UPDATE: It seems it is possible to do Vue SSR directly in Laravel

Your assumptions are correct. I've also spent quite some time on trying to find a solution to this very same issue a while ago. Here is what I came up with at the end of the day:

1. Keep using vue-meta, for those crawlers that run JavaScript (there is no harm in it, right?).
2. Implement a server side solution (using a Laravel package).

Option 1 should be clear, since you already have a similar implementation.

For option 2, here is my approach:

• I picked this package for my Laravel application. It's easy to install and register. I'm sure there are many packages for Laravel or other frameworks and languages that do the same.

• I added this route at the end of my route files (web.php if you are using Laravel) that catches all the frontend routes requests:

Route::get('/{any}', 'IndexController@index')->where('any', '.*');

In IndexController, I first check the request to see if it's coming from a crawler. If so, I apply the relevant meta tags. Here is a glimpse:

<?phpdeclare(strict_types=1);namespace App\Http\Controllers;use Butschster\Head\Facades\Meta;use Butschster\Head\Packages\Entities\OpenGraphPackage;class IndexController extends Controller{    const CRAWLERS = [        'Mozilla/5.0 (Linux; Android 6.0.1; Nexus 5X Build/MMB29P) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2272.96 Mobile Safari/537.36 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',        'Mozilla/5.0 (iPhone; CPU iPhone OS 9_1 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 (compatible; AdsBot-Google-Mobile; +http://www.google.com/mobile/adsbot.html)',        'Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; Googlebot/2.1; +http://www.google.com/bot.html) Safari/537.36',        'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)',        'Mozilla/5.0 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)',        'Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534+ (KHTML, like Gecko) BingPreview/1.0b',        'Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53 (compatible; bingbot/2.0; +http://www.bing.com/bingbot.htm)',        'Googlebot-Image/1.0',        'Mediapartners-Google',        'facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)',        'facebookexternalhit/1.1',        'Twitterbot/1.0',        'TelegramBot (like TwitterBot)',    ];    public function index()    {        if ($this->isACrawler()) {            $this->applyMetaTags();            return view('layouts.crawler');        }        return view('layouts.index');    }    public function isACrawler()    {        if (in_array(request()->userAgent(), self::CRAWLERS)) {            return true;        }        return false;    }    private function applyMetaTags()    {        // Here you can check the request and apply the tags accordingly        // e.g.        //        preg_match("/articles\/[0-9]+/i", request()->path(), $url)        //        preg_match("/[0-9]+/i", $url[0], $id);        //        $article = Article::find($id);        //        //        Meta::prependTitle($article->name)        //            ->addMeta('description', ['content' => $article->description]);        //        //        $og = new OpenGraphPackage('some_name');        //        //        $og->setType('Website')        //            ->setSiteName('Your website')        //            ->setTitle($article->name)        //            ->setUrl(request()->fullUrl())        //            ->setDescription($article->description);        //        //        if ($article->picture) {        //            $og->addImage(asset($article->picture));        //        }        //        //        Meta::registerPackage($og);    }}

And finally I created a template with only the head section (that's the only part of html a crawler cares about) and apply the meta tags:

<!DOCTYPE html><html lang="{{ str_replace('_', '-', app()->getLocale()) }}">    <head>        @meta_tags        <link rel="shortcut icon" href="{{ asset('favicon.ico') }}">    </head></html>

Caveats:

• You need to customize the meta tags per request
• You need to maintain a list of crawlers

Benefits:

• It's simple and doesn't require much changes in your code
• It returns a fast and lightweight HTML to the crawler
• You have the full control in the backend and with a bit of adjustment you can implement a maintainable solution

Hope this helps! Please let me know if something is unclear.

You need to implement serverside rendering to process meta tags.Because almost all crawler doesn't support javascript process.

Here is the example for PHP - Laravel.

As we know vue.js is a Single Page Application. So every time it renders from one root page.

So for laravel, I configured the route as it is, and every time I return the index page with tags array and render that page in view (index page)

1. Laravel Routing

<?php        use Illuminate\Support\Facades\Route;        Route::get('users/{id}', 'UserController@show');        Route::get('posts/{id}', function () {        $tags = [            'og:app_id' => '4549589748545',            'og:image' => 'image.jpg',            'og:description' => 'Testing'        ];            return view('index', compact('tags'));    });        Route::get('/{any}', function () {        $tags = [            'description' => 'Testing',            'keywords' => 'Testing, Hello world',        ];            return view('index', compact('tags'));    })->where('any', '.*');        ?>