Vue.jsSEOのヒント
検索エンジン最適化(SEO)は、あらゆるWebサイトまたはWebアプリの重要な部分です。 検索エンジンで簡単にインデックスに登録できない、または最適化が不十分なアプリケーションやサイトは、検索結果のページやページの背後に隠れてしまいます。 Vue.js開発者であるあなたがプロジェクトにそれを起こさせたくない場合は、検索エンジンスパイダーの要求の厳しい目のためにVue.jsサイトとアプリを最適化するためのこれらのヒントを見てください。
メタタグ
ほとんどの開発者がSEOについて考えるときに最初に考えるのは、<head>
要素をメタタグでいっぱいにすることです。 では、Vueでそれをどのように行うのでしょうか? vue-metaと入力します。 (確かに、vue-meta
はまだ安定していませんが、すでにかなり強力です。)
まず、YarnまたはNPMを介してvue-meta
をインストールします。
次に、それをインポートしてVueエントリポイントで使用します。
import Vue from 'vue';
...
import Meta from 'vue-meta';
Vue.use(Meta);
...
これで、コンポーネントに、<head>
に挿入するさまざまなビットを含むmetaInfo
プロパティを追加できます。
<template>
...
</template>
<script>
export default {
...
metaInfo: {
// Children can override the title.
title: 'My Page Title',
// Result: My Page Title ← My Site
// If a child changes the title to "My Other Page Title",
// it will become: My Other Page Title ← My Site
titleTemplate: '%s ← My Site',
// Define meta tags here.
meta: [
{http-equiv: 'Content-Type', content: 'text/html; charset=utf-8'},
{name: 'viewport', content: 'width=device-width, initial-scale=1'},
{name: 'description', content: 'I have things here on my site.'}
]
}
}
</script>
ソーシャルタグ
特にソーシャルメディアで共有されることを期待している場合は、すべてのページに関連するソーシャルメディアタグを含めることもお勧めします。
metaInfo: {
...
meta: [
...
// OpenGraph data (Most widely used)
{property: 'og:title', content: 'My Page Title ← My Site'},
{property: 'og:site_name', content: 'My Site'},
// The list of types is available here: http://ogp.me/#types
{property: 'og:type', content: 'website'},
// Should the the same as your canonical link, see below.
{property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
{property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
// Often the same as your meta description, but not always.
{property: 'og:description', content: 'I have things here on my site.'}
// Twitter card
{name: 'twitter:card', content: 'summary'},
{name: 'twitter:site', content: 'https://www.my-site.com/my-special-page'},
{name: 'twitter:title', content: 'My Page Title ← My Site'},
{name: 'twitter:description', content: 'I have things here on my site.'},
// Your twitter handle, if you have one.
{name: 'twitter:creator', content: '@alligatorio'}
{name: 'twitter:image:src', content: 'https://www.my-site.com/my-special-image.jpg'},
// Google / Schema.org markup:
{itemprop: 'name', content: 'My Page Title ← My Site'},
{itemprop: 'description', content: 'I have things here on my site.'},
{itemprop: 'image', content: 'https://www.my-site.com/my-special-image.jpg'}
]
}
カノニカルリンク
特にSPAの場合、ユーザーがアクセスするURLとサーバー上のそのページを表すURLがわずかに異なる可能性があります。または、誰かがmy-site.com
ではなくwww.my-site.com
にアクセスする可能性があります。 ]またはその逆。 念のため、正規リンクを頭に入れて、そのURLをこのページの目的のURLと見なすように検索エンジンに指示する必要があります。
metaInfo: {
...
link: [
{rel: 'canonical', href: 'https://www.my-site.com/my-special-page'}
]
}
サイトマップ
少なくとも小規模なサイトでは、サイトマップを用意することはそれほど重要ではありませんが、サイトマップは、サイトで特に関連性があり重要であると思われるページを検索エンジンに示すのに役立ちます。 ただし、データから何らかの方法でデータを生成するか、手動で書き込む必要があります。
(単純な)サイトマップの例:
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
<url>
<loc>https://www.my-site.com</loc>
</url>
<url>
<loc>https://www.my-site.com/my-special-page</loc>
</url>
<url>
<loc>https://www.my-site.com/my-other-special-page</loc>
</url>
<url>
<loc>https://www.my-site.com/okay-this-one-isnt-that-special-but-it-kinda-works</loc>
</url>
</urlset>
次のような行を追加することで、サイトマップをrobots.txt
に含めることができます。
Sitemap: https://www.my-site.com/sitemap.xml
モバイルの最適化
Googleは、少なくとも、モバイル向けに最適化されたサイトを好みます。
これらは、モバイル最適化の警告を表示する問題です。
viewport
メタタグが設定されていません。 (上記を参照。)- ビューポートの幅は固定されています。
- コンテンツには水平スクロールが必要です。
- フォントサイズが小さすぎます。
- タッチ可能な要素が近すぎます。
Googleのガイドは、これらの問題を修正する方法についてのいくつかの指針を提供します。
サイトがPWAの場合も、追加のボーナスポイントを獲得できます。
その他の問題
- サイトがHTTPS経由で提供されていない場合、またはHTTPS構成が壊れている場合は、ランキングでヒットします。
- いくつかの検索エンジンは、信じられないほど遅くて肥大化した潜在的に優れたコンテンツを持つサイトよりも数秒で読み込まれるサイトを好むため、ページ速度は最近のSEOの重要な要素です。
- 誰もあなたのサイトにリンクしていない場合、検索評価が上がるまでにしばらく時間がかかることがあります。 ソーシャルメディアに投稿することでさえ、時にはそれを助けることができます。
Lighthouse を使用して、検索ランキングに影響を与える可能性のあるさまざまな問題をテストできます。
事前レンダリング/SSR
最後になりましたが、SPAはデフォルトでSEOに不利です。これは、すべてのURLが単一のルートで処理され、クローラーがJavaScriptを実行してページ全体をレンダリングできる必要があるためです(iffyプロセス)。
SPAをロードする前にページにデータを表示する、すでに入力されている一連のページにSPAを変換するために一般的に使用される2つの方法があります。
- Prerendering-2つの方法のうちのより単純な方法。 基本的に、ブラウザはビルドステップ中にアプリで事前レンダリングしたいすべてのページに自動的にアクセスし、結果のHTMLが何であれそれを吐き出します。 既存のビルドステップにほとんどドロップインできます。
- サーバーサイドレンダリング-SSRははるかに複雑なプロセスです。 基本的に、サーバー上でアプリをオンデマンドでレンダリングできますが、いくつかの注意点があり、それを念頭に置いてアプリを設計する必要があります。
大多数のサイトでは、 Prerendering が最も単純なソリューションですが、非常に動的なサイトでは、SSRが推奨される場合があります。
以上です! 検索エンジンがVue.jsプロジェクトをさらに上位にランク付けするのに役立つと思われることが他にある場合は、お知らせください!