Have you ever consider Metadata in SPAs?
Without metadata, we weaken our ability to demonstrate relevance to search engines. That, in turn, lowers our rankings and reduces the number of consumers to our sites(ecommerce, social).
Metadata is a series of micro-communications between site and search engines.
Nearly all metadata is invisible to visitors. It lives and works behind the scenes in the HTML of web pages. The metadata we use most for SEO speaks to search engines directly from each page crawled, to communicate important information or request specific action.
As you know, Metadata in other word <meta> tags are located in <head>.
We can set them in index.html file which contains <div id=”app”>.
Here, problem is that we need to update metadata in <head> in SPA since it means “Single Page Application“. (Same <head> for the whole site)
How to use Metadata in SPAs?
React: react-helmet
import React from "react";
import {Helmet} from "react-helmet";
class Application extends React.Component {
render () {
return (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);
}
};Vue: vue-meta
$ yarn add vue-meta// app.js
import Vue from 'vue'
import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
// optional pluginOptions
refreshOnceOnNavigation: true
})// Home.vue
<script>
import { mapGetters } from 'vuex'
export default {
name: 'home',
metaInfo: {
title: 'Home',
meta: [
{ vmid: 'description', name: 'description', content: 'The home page' }
]
}
}
</script>Angular: platform-browser/meta
Fortunately, Angular supports platform-browser package in default.
Here is a good example to show how to use platform-browser package for meta handling.
dynamically-add-meta-description-based-on-route-in-angular
Thanks.
