{"componentChunkName":"component---src-templates-post-tsx","path":"/posts/2019/11/seo-meta-automation/","result":{"data":{"markdownRemark":{"fields":{"slug":"/2019/11/seo-meta-automation/"},"frontmatter":{"title":"SEO meta tags and Server Side Rendering automation","tag":["SEO","blog.nuxt","nuxt","SSR"],"image":"https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcRB_w1OLUgyb1u3o2WoyZuDVZHMnVpIGxYqw_awuhbxl-WenPIr"},"correctedDateEpoch":1574182800000,"html":"<p>I write this topic, because I think SEO should be more about SSR automation, than about manual writing / or SEO training.</p>\n<p><code>&#x3C;meta></code> 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.</p>\n<p>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...</p>\n<!-- excerpt_separator -->\n<h2>Which meta tags are needed</h2>\n<p>A very concise guide can be found from here: <a href=\"https://css-tricks.com/essential-meta-tags-social-media/\">https://css-tricks.com/essential-meta-tags-social-media/</a></p>\n<h2>How to automate</h2>\n<p>I suggest this, with a templating engine. This is Nuxt.js, BTW.</p>\n<pre><code class=\"language-javascript\">{\n  head: {\n    title: title,\n    link: [\n      {\n        rel: 'canonical',\n        href: url,\n      },\n    ],\n    meta: [\n      { hid: 'description', name: 'description', content: description },\n      { hid: 'keywords', name: 'keywords', content: keywords.join(', ') }\n      {\n        hid: 'og:title',\n        property: 'og:title',\n        content: title\n      },\n      {\n        hid: 'og:description',\n        property: 'og:description',\n        content: description\n      },\n      {\n        hid: 'og:image',\n        property: 'og:image',\n        content: metaImage\n      },\n      {\n        hid: 'og:url',\n        property: 'og:url',\n        content: url\n      },\n      {\n        hid: 'twitter:title',\n        property: 'twitter:title',\n        content: title\n      },\n      {\n        hid: 'twitter:description',\n        property: 'twitter:description',\n        content: description\n      },\n      {\n        hid: 'twitter:image',\n        property: 'twitter:image',\n        content: metaImage\n      },\n      {\n        hid: 'twitter:card',\n        property: 'twitter:card',\n        content: 'summary_large_image'\n      },\n    ],\n  }\n}\n</code></pre>\n<h2>How to double-check on-page SEO</h2>\n<p>I recently found this Chrome extension <a href=\"https://chrome.google.com/webstore/detail/seo-extension-metrics-bac/iodbnclobmalekpemjhncgfphojcgocd\">https://chrome.google.com/webstore/detail/seo-extension-metrics-bac/iodbnclobmalekpemjhncgfphojcgocd</a>.</p>\n<p>Also, when you create a website, don't forget to check how it looks on mobile devices. -- <a href=\"https://developers.google.com/web/tools/chrome-devtools/device-mode\">https://developers.google.com/web/tools/chrome-devtools/device-mode</a>. 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).</p>\n<h2>Real project</h2>\n<p>You can check automation script of this blog at <a href=\"https://github.com/patarapolw/blog\">https://github.com/patarapolw/blog</a></p>\n<h2>Futures</h2>\n<p>Perhaps, I should learn more about <a href=\"https://ogp.me/\">OpenGraph</a>.</p>\n<h2>Related</h2>\n<p>I have just watched this. It is quite good.</p>\n<iframe width=\"560\" height=\"315\" src=\"https://www.youtube.com/embed/DvwS7cV9GmQ\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen style=\"height: 315px\"></iframe>"}},"pageContext":{"slug":"/2019/11/seo-meta-automation/"}}}