## web.dev

[web.dev](https://web.dev/)

## Light House

Chrome拡張でもDeveloper Toolsでも使用することができます。
- Performance
- Accessibility
- Best Practices
- SEO
- PWA

の観点で計測します。改善点も表示してくれるので非常に便利なツールです。

[Light House](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk/related?hl=ja)

## ページスピードインサイト

PCとモバイルの表示速度を測定してくれます。

[PageSpeed Insights](https://developers.google.com/speed/pagespeed/insights/?hl=ja)

サイトのパフォーマンス改善に使用するツール まとめ

web.dev
web.dev
Light House
Chrome拡張でもDeveloper Toolsでも使用することができます。

Performance
Accessibility
Best Practices
SEO
PWA

の…

今回は、Nuxt.jsでcanonicalを設定する方法を解説しています。

canonicalはの正規化です。SEO対策の1つなので、やっていない方は是非参考にしてみてください。

## layoutsを使ってcanonicalを設定する

Nuxt.jsの機能の1つである[layouts](https://ja.nuxtjs.org/docs/2.x/concepts/views/#layouts)を使い、canonicalの設定を共通化させます。
\
デフォルトで用意されている`layouts/default.vue`を例にcanonicalを設定します。

```js
export default {
 head() {
 return {
 link: [
 {
 rel: "canonical",
 href: `https://example.com${this.$route.path}`,
 },
 ],
 }
 },
}
```

上記のように設定すると、各ページに`<link>`が生成されます。

```html
<link rel="canonical" href="https://example.com/sample">
```

## 生成されたリンクを確認する

DevToolsからheadを確認すると、canonicalが設定されていると思います。

![canonical](//images.ctfassets.net/0jyj5pjwic68/1JnRR8aMlJiot9BvJBvsIb/041744773e633c09b31429f670c75ea4/____________________________2020-09-16_22.15.11.png)

## canonicalを設定するメリット

canonicalを設定するメリットは以下です。

- ページの評価分散を防ぐ
- Googleのペナルティを防ぐ

似たコンテンツのページの中から、優先させたいページを指定してページ評価を正規化されたURLまとめることができます。
\
また、重複したコンテンツとみなされた場合に、canonicalを設定すること正規化されたURLのみインデックスされるようになります。

## canonicalを設定する際の注意点

canonicalを設定する際に2つほど注意点があります。

- 絶対URLを使用すること。(相対URLを使用しない)
- canonicalを2つ以上指定しない(headタグに2つ以上設定しない)
- 複数ページにまたがるコンテンツ全てに設定しない(記事内のページングなど)

上記の問題が発生しているかどうかは、[Googleサーチコンソール](https://search.google.com/search-console/welcome?hl=ja)から確認できます。
canonicalを設定した後、`sitemap.xml`を送信し、問題が発生していないか確認してみてください。

今回は、Nuxt.jsでcanonicalを設定する方法を解説しています。
canonicalはURLの正規化です。SEO対策の1つなので、やっていない方は是非参考にしてください。

NuxtJS

Nuxt.jsでcanonicalを設定する方法

Nuxt.jsで行ったSEO対策をまとめました。
抜け漏れがないか確認してみてください。参考になれば幸いです。

## Google Analyticsを設定する

ユーザーの行動や数を把握するために、[Google Analytics](https://analytics.google.com/analytics/web/#)を設定しましょう。
\
計測しなければSEO対策のゴールや成果がわかりません。


 <a class="read" href="https://nishimura.club/nuxt-google-analytics/" target="_blank" rel="noopener noreferrer">Nuxt.jsにGoogle Analyticsを導入する方法</a>


## サイトマップを送信する

[Googleサーチコンソール](https://search.google.com/search-console/welcome?hl=ja)にサイトマップを送信することで、ページのインデックス状況や検索パフォーマンスを確認することができます。


 <a class="read" href="https://nishimura.club/nuxt-sitemap/" target="_blank" rel="noopener noreferrer">Nuxt.jsでサイトマップを設定する方法</a>


## canonicalを設定する

canonicalはの正規化です。ページの評価分散やGoogleのペナルティを防ぎます。

```html
<link rel="canonical" href="リンク">
```


 <a class="read" href="https://nishimura.club/nuxt-canonical/" target="_blank" rel="noopener noreferrer">Nuxt.jsでcanonicalを設定する方法</a>


## noindexを設定する

noindexは、価値の低いページを検索結果に表示させないようにして、サイト全体の評価を下げるのを防ぎます。

```html
<meta name="robots" content="noindex" >
```


 <a class="read" href="https://nishimura.club/nuxt-noindex/" target="_blank" rel="noopener noreferrer">Nuxt.jsでnoindexを設定する方法</a>


## nofollowを設定する

nofollowは、外部リンクをページの評価(ページランク)に含めないようにします。

```html
<a href="リンク先URL" rel="nofollow">リンクテキスト</a>
```

また、markdown-itのプラグインを使えば簡単に設定することができます。


 <a class="read" href="https://nishimura.club/nuxt-markdown-it/" target="_blank" rel="noopener noreferrer">Nuxt.js×markdown-itで記事を表示する方法</a>


## ページスピードを改善する

Googleが用意している「[Light House](https://chrome.google.com/webstore/detail/lighthouse/blipmdconlkpinefehnmjammfjpmpbjk?hl=ja)」や「[ページスピードインサイト](https://developers.google.com/speed/pagespeed/insights/?hl=ja)」でサイトのスピードを計測することができます。その他にも「画像の軽量化」や「次世代画像フォーマットの使用」「遅延読み込み」などが挙げられます。
\
また、Nuxt.jsにはパフォーマンス改善に役立つ機能が用意されています。


 <a class="read" href="https://nishimura.club/nuxt-analyze/" target="_blank" rel="noopener noreferrer">Nuxt.jsで不要なライブラリを洗い出す方法</a>


## パンくずリストの設置

Nuxt.jsを使用しているので、コンポーネント化して使いまわしています。

## メタキーワードの設定

HeadlessCMSのContentful側で記事モデルに設定してます。

記事と関連性の高いキーワードを2~3ワードで設定しています。

```html
<meta name="keywords" content="キーワード">
```

## メタディスクリプションの設定

こちらもHeadlessCMSのContentful側で記事モデルに設定してます。

大体記事の冒頭の文章を設定することが多いです。

```html
<meta name="description" content="説明">
```

## OGPタグの設定

Twitterを含めたOGPタグを各ページに設定しています。
OGP(Open Graph Protcol)は、記事がシェアされたときの設定です。

```js
head() {
 return {
 meta: [
 { hid: "og:site_name", property: "og:site_name", content: "サイト名" },
 { hid: "og:type", property: "og:type", content: "website" },
 { hid: "og:url", property: "og:url", content: "サイトURL" },
 { hid: "og:title", property: "og:title", content: "サイトタイトル" },
 { hid: "og:description", property: "og:description", content: "ディスクリプション" },
 { hid: "og:image", property: "og:image", content: "サイトイメージ" },
 { hid: "twitter:image", name: "twitter:image", content: "サイトイメージ" },
 { name: "twitter:card", content: "summary" },
 { hid: "twitter:site", name: "twitter:site", content: "TwitterID" }
 ],
 }
}
```
## 明示的なタイトルをつける

- 解決できる課題をタイトルで示す
- 分かりやすいタイトルにする

上記を心がけています。

## 記事の質を上げていく

- 冒頭に結論
- 読みやすさ
- 分かりやすさ

上記を意識して書いています。

## キーワードを考える

- [keysearch Beta](https://kitsune-room.com/tools/keysearch/)
- [ラッコキーワード](https://related-keywords.com/)
- [キーワードプランナー](https://ads.google.com/intl/ja_jp/home/tools/keyword-planner/)

などのWebサイトでニーズのある検索を調べることができます。闇雲に記事を書くのは良くないので、自分の興味のある分野×ニーズのある記事を書いていきましょう。

Nuxt.jsで行ったSEO対策をまとめました。
抜け漏れがないか確認してみてください。参考になれば幸いです。

Nuxt.jsで行ったSEO対策まとめ

## はじめに

ビジネスの基本は、**「人を集めて、物を売る」** です。
物の品質がどうあれ人を集めることができなければ、そこまで辿り着きません。相当の情熱を持たない限り、モチベーションの低下や興味の移り変わりでプロジェクトは消えていくでしょう。従って、まず**集客(人を集めて)** と**収益化(物を売る)** ことに関して、戦略を持って望むことが重要だと考えます。(あと**継続力**も🚀)
\
人を集める方法は、

- FacebookやGoogle広告
- SNSで集客
- ニュースサイトなどでプレスリリース
- 投稿サイト(QiitaやProductHunt)で集客
- SEO集客

などが考えられます。
\
ドメインパワーを強くすることは、**「SEO集客」** を高めることイコールです。ドメインパワーを高めるとは、**Googleからの評価を高め、検索ワードに対する表示順位をあげる** ことです。

## 1. ページ数を増やす

ブログの場合、記事(コンテンツ)を増やすと同じ意味です。検索サイトや投稿型のアプリケーションも同様です。文字数やHTMLの構造なども関連すると思われます。

## 2. 被リンクを増やす

難しいです。

## 3. ドメインを長く運営する

ドメイン選びは、想像以上に重要です。

## 4. 更新を適度に行う

3にも共通しますね。

## 5. 優れたUIUX設計を行う

Googleのパフォーマンス測定ツールを使い、分析と改善を行いましょう。あまり読まれていないコンテンツや機能を改善、サイトのスコアをあげるなどです。

## まとめ

3と4は自分次第で完結します。5をある程度、整理した後に、1を徹底的に行いましょう。それから5と1を繰り返します。2はなかなか運営側からは難しいので、前述の繰り返し行う中で増やしていきましょう。シェア機能などがあると、ある程度サポートできるかもしれません。


ドメインパワーを強くする方法

## Google検索結果シミュレーター

Google検索での表示を確認することができます。

![Googleシミュレーター-min](//images.ctfassets.net/0jyj5pjwic68/3WfG8PiDUSrEHEOxzxhV0W/6671de2e156685f2c0cfc97ca7805863/Google_____________________-min.png)


 <a class="read" href="https://trickster.tools/title-description/" target="_blank" rel="noopener noreferrer">Google検索結果シミュレーター へ移動</a>


## OGP確認

URLを入力すると該当のページのOGPを確認することができます。
Facebook・Twitter・はてなブックマーク・LINEのOGPを確認することができます。（OGP画像・タイトル・説明文）

![OGP確認-min](//images.ctfassets.net/0jyj5pjwic68/6T6bbzKkCueZOgzJBERM3u/43321563e6a02ac3aab4cf43efca1526/OGP______-min.png)


 <a class="read" href="https://rakko.tools/tools/9/" target="_blank" rel="noopener noreferrer">OGP確認 へ移動</a>

OGPや検索時の表示を確認できるサイト まとめ

## Google - キーワードプランナー

Googleが提供しているキーワード選定のツールです。注意点としては、Google広告に登録しないといけません。月額費用を1円に設定できるので費用をかけたくない人も登録しておいた方が良いでしょう。
\
CSVやGoogleスプレッドシートに出力することができます。Googleスプレッドシートは他のキーワード選定ツールにはないので便利な機能です。
\
**検索ボリューム**と**クリック単価**が表示されるので、Googleアドセンスやアフィリエイト広告をする場合、非常に重宝します。

![キーワードプランナー-min](//images.ctfassets.net/0jyj5pjwic68/2vpq2GtdlE5yhRCFRNshF7/ee03e73d31a95b63321de20ba1db3059/____________________________________-min.png)


 <a class="read" href="https://ads.google.com/intl/ja_jp/home/tools/keyword-planner/" target="_blank" rel="noopener noreferrer">Googleキーワードプランナー へ移動</a>


## keysearch Beta

気になっているキーワードにどのような需要があるのかを把握する時に使用すると便利です。たまにエラーが発生するので、リロードする必要があります。CSVやSVG出力も対応しているため非常に便利です。

![keysearch beta-min](//images.ctfassets.net/0jyj5pjwic68/4Z9P0pE2qN7QHVOwPvsla9/a84e550be3d8434e7d0bb88ec317437f/keysearch_beta-min.png)


 <a class="read" href="https://kitsune-room.com/tools/keysearch/" target="_blank" rel="noopener noreferrer">keysearch Beta へ移動</a>


## ラッコキーワード

キーワードを一度に多く表示させたい時に便利です。CSV出力も対応しているため整理するときに役立ちます。

![ラッコキーワード-min](//images.ctfassets.net/0jyj5pjwic68/3sRIT19AiFq7r0Et6DaUIB/d0ca6b3cef8b4be6b5a078705fa194c7/___________________________-min.png)


 <a class="read" href="https://related-keywords.com/" target="_blank" rel="noopener noreferrer">ラッコキーワード へ移動</a>

サイトのパフォーマンス改善に使用するツールまとめ

web.dev

Light House