nuxt-contentの主な使い道
nuxt-contentのマークダウン式のサイト構築が活きる使い道を考えてみました。
- 企業ホームページ作成でのお知らせ機能
- ブログ作成
- オウンドメディアの記事
SEO面でのメリットを活かすのであれば特にブログなんかに向いていると思います。
Nuxtでホームページをサッと立ち上げられるのもメリットだと思います。
今回やること
nuxt-contentの機能が便利だったのでブログを作成してみる。
nuxt.jsのバージョンは2.14.1以降のバージョンにするとgenerateの設定を書く手間を省けて便利です。
今まではprocessmdとか使ってganerateの設定を書くのが面倒だったのでありがたい機能になります。
nuxt-contentで情報を取得して表示する
表示するデータを取得して記事マークダウンの日付が新しい順にソートする。
deep: trueにしてあげるとtechディレクトリ以下の階層の情報を全て取得している。
GitHubのソースコードのexampleを参考にしながら進めました。
https://github.com/nuxt/content/tree/dev/example
async asyncData({ $content }) {
let query = $content("tech", { deep: true }).sortBy("date", "desc");
const tech = await query.fetch();
const data = tech.sort(function (a, b) {
return new Date(b.date) - new Date(a.date);
});
return {
data,
};
},
bootstrapを使用する
nuxt-contentは関係ないですがブログカードなどのbootstrapのUIを使いたかったので追加する。
https://www.npmjs.com/package/bootstrap-vue
npm i bootstrap-vue
"bootstrap-vue": "^2.16.0"
<style lang="scss" scoped>
@import "~~/node_modules/bootstrap/scss/bootstrap.scss";
</style>
使用するコンポーネントでbootstrapをインポートすることで利用できるようになりました。
メタ情報を追加していく
configにデフォルトのメタ設定を追加していく
head: {
title: process.env.npm_package_name || 'ページタイトル',
titleTemplate: '%s | ページタイトル',
htmlAttrs: {
lang: 'ja'
},
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: process.env.npm_package_description || 'デフォルトのディスクリプションを設定するよ' },
{ hid: 'og:site_name', property: 'og:site_name', content: 'ページタイトル' },
{ hid: 'og:type', property: 'og:type', content: 'blog' },
{ hid: 'og:url', property: 'og:url', content: 'https://サイトのURL' },
{ hid: 'og:title', property: 'og:title', content: 'couragenki' },
{ hid: 'og:description', property: 'og:description', content: 'デフォルトのディスクリプションを設定するよ' },
{ hid: 'og:image', property: 'og:image', content: 'https://サイトのUR/og.jpg' },
{ hid: 'twitter:card', neme: 'twitter:card', content: "summary_large_image" },
],
link: [
{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }
]
},
マークダウンの情報を取得して動的に変更するように設定する。
ページでnuxt-contentで取得→テンプレートにデータを渡す、という流れです。
head() {
const metaTitle = this.pageMetaTitle;
const metaDescription = this.pageMetaDescription;
const metaImg = this.pageMetaImg;
return {
title: metaTitle,
meta: [
{
hid: "description",
name: "description",
content: metaDescription,
},
{
hid: "og:description",
name: "og:description",
content: metaDescription,
},
{ hid: 'og:image', property: 'og:image', content: metaImg },
],
}
},
静的なページの場合は直で設定を書いてしまう。
head: {
titleTemplate: "ポリシー |サイトタイトル",
meta: [
{
hid: "description",
name: "description",
content: "利用規約について記載しているページになります。",
},
{
hid: "og:title",
property: "og:title",
content: "ポリシー | サイトタイトル",
},
{
hid: "og:description",
name: "og:description",
content: "利用規約について記載しているページになります。",
},
],
},
Nuxt.jsで作成したサイトにGoogle Analyticsを追加する
公式のドキュメントが参考になりました。
https://ja.nuxtjs.org/faq/ga/
-
pluginsを追加する -
google analyticsからトラッキングIDを取得する - 本番に反映して確認する
1.pluginsを追加する
plugins: [{ src: '~plugins/ga.js', mode: 'client' }],
/* eslint-disable */
export default ({ app }) => {
if (process.env.NODE_ENV !== 'production')
return /*
** Google アナリティクスのスクリプトをインクルード
*/
; (function (i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r
; (i[r] =
i[r] ||
function () {
; (i[r].q = i[r].q || []).push(arguments)
}),
(i[r].l = 1 * new Date())
; (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0])
a.async = 1
a.src = g
m.parentNode.insertBefore(a, m)
})(
window,
document,
'script',
'https://www.google-analytics.com/analytics.js',
'ga'
)
/* Google アナリティクスのトラッキングIDを取得してここに書く */
ga('create', 'UA-○○○○○○○○○-○', 'auto')
app.router.afterEach((to, from) => {
ga('set', 'page', to.fullPath)
ga('send', 'pageview')
})
}
2.google analyticsからトラッキングIDを取得する
Googleのアカウントがあれば無料で取得できます。
google analytics
https://analytics.google.com/
3.本番に反映して確認する
設定を反映した後にアナリティクスを確認するとユーザーが増えたことを確認できました。
こちらでアナリティクスの設定は完了になります。
サイトマップを追加する(nuxt-content版)
nuxtjs/sitemapを使用します。
今回はnuxt-contentで
https://www.npmjs.com/package/@nuxtjs/sitemap
npm install @nuxtjs/sitemap
"@nuxtjs/sitemap": "^2.4.0"
サイトマップの指定の仕方はnuxtでのサイトマップの追加と基本的に同じです。
nuxt-contentでそれぞれパスを取得しています。
(一括で取得してしまっても良いかもしれないです)
modules: ['@nuxtjs/sitemap'],
sitemap: {
hostname: 'https://サイトのURL',
routes: async () => {
const { $content } = require('@nuxt/content')
const tech = await $content("tech", { deep: true }).only(['path']).fetch()
const marketing = await $content("marketing", { deep: true }).only(['path']).fetch()
const posts = Object.assign(tech, marketing);
return posts.map(article => article.path)
}
},
ここまで追加できたら本番に反映する。
その後にGoogleサーチコンソールのサイトマップにこちらを追加する。
https://サイトのURL/sitemap.xml
サイトマップを追加すると新しく記事を追加した際にクローリングされるまでの期間が短くなりSEO的に有利になるので今回のブログで追加しました。
今回の成果物
【公開したサイト】
https://couragenki.com/
netlifyが便利なのでGitHubを連携して公開しています。
2週間ほどで開発して荒い点も目立ちますがユーザーのフィードバックが欲しいので公開してしまう。
以前公開していたサイトより初期表示速度が改善できました。
公開して１ヶ月ほどですがリニューアル前のワードプレスのサイトより直帰率が約２０％ほど下がりました。
カスタマイズしたい箇所がまだたくさんあるので今後も開発を続けていこうと思います。
感想
- nuxt-contentは手間が省けて便利！
- UIを考えるのが大変でした…早く慣れたい
フィードバックやアドバイス等あればコメントいただけると幸いです。
最後まで読んでいただきありがとうございました。