SEO meta tags and Server Side Rendering automation
I write this topic, because I think SEO should be more about SSR automation, than about manual writing / or SEO training.
<meta>
tags are much about how your webpage will look like on search engines, like Google, as well, not only about search engine ranking, i.e. on-page SEO.
If you use SSR, such as traditional methods, like templating engines; or SPA-related methods, like Nuxt.js; you still might not be creating enough meta tags…
Which meta tags are needed
A very concise guide can be found from here: https://css-tricks.com/essential-meta-tags-social-media/
How to automate
I suggest this, with a templating engine. This is Nuxt.js, BTW.
{
head: {
title: title,
link: [
{
rel: 'canonical',
href: url,
},
],
meta: [
{ hid: 'description', name: 'description', content: description },
{ hid: 'keywords', name: 'keywords', content: keywords.join(', ') }
{
hid: 'og:title',
property: 'og:title',
content: title
},
{
hid: 'og:description',
property: 'og:description',
content: description
},
{
hid: 'og:image',
property: 'og:image',
content: metaImage
},
{
hid: 'og:url',
property: 'og:url',
content: url
},
{
hid: 'twitter:title',
property: 'twitter:title',
content: title
},
{
hid: 'twitter:description',
property: 'twitter:description',
content: description
},
{
hid: 'twitter:image',
property: 'twitter:image',
content: metaImage
},
{
hid: 'twitter:card',
property: 'twitter:card',
content: 'summary_large_image'
},
],
}
}
How to double-check on-page SEO
I recently found this Chrome extension https://chrome.google.com/webstore/detail/seo-extension-metrics-bac/iodbnclobmalekpemjhncgfphojcgocd.
Also, when you create a website, don't forget to check how it looks on mobile devices. -- https://developers.google.com/web/tools/chrome-devtools/device-mode. Often, very small devices and mid size devices can be problematic. If you need different looks for mobile, tablet and desktop, I suggest you look into media query (which is not about CSS, but can be JavaScript).
Real project
You can check automation script of this blog at https://github.com/patarapolw/blog
Futures
Perhaps, I should learn more about OpenGraph.
Related
I have just watched this. It is quite good.