I am currently changing the page title and (in the near future) meta data via Vue router like below:
$route (to, from){
document.title = to.meta.title
}
This works fine when I inspect the title:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Updated Page Title</title>
<link href=" /css/app.css?id=b21c63ebd0cb0655a4d8" rel="stylesheet">
</head>
However when I view page source it shows the old info:
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
*** <title>Old Page Title</title> ***
<link href=" /css/app.css?id=b21c63ebd0cb0655a4d8" rel="stylesheet">
</head>
I need both the title and the meta info to be dynamic for SEO purposes. My question is two-fold:
-
Will using vue-meta plugin solve the page title issue from original source?
-
Do I have to use something like SSR or pre-rendering to get dynamic meta info or is their any other route similar to this approach to do it?
2
Answers
I ended up using this package supplied by hatef for a psuedo workaround without full SSR meta editing: https://github.com/butschster/LaravelMetaTags.
I implemented a middleware layer to check which domain is being used (multi-domain application) and then dynamically append meta titles based on the given endpoint from vue router:
vue-meta
is only applied when your JavaScript is executed and your page is rendered. So, no you are not going to see those meta tags when you view page source.Do you need SSR or pre-rendering? Maybe. That depends on what you want to achieve. If having a great SEO until web crawlers support JS is crucial for your website? Then, yes.
Of course, you can still add some of the meta tags in the backend. Depending on the language/framework you use, there are plenty of options that can help to achieve that. For example, for Laravel you can check this package out.
Another workaround for this problem, is to categorize your requests into the ones coming from frontend and those coming from crawlers. You can do so by for example inspecting the user agent in the request, and then you could adjust the response for crawlers (like, injecting the meta tags into header) accordingly.
Here is an example of the workaround I suggested:
IndexController.php
layouts/crawler.blade.php
So as you see, I’m creating a list of crawlers, then checking the request to see if it’s coming from a crawler and if true apply the
metatags
and return the specific layout I created for this purpose.Caveats: