AngularでSEOを考えたときに考慮すること

/カテゴリ: /作成者:
Contents hide
1 背景
2 1.まずはモバイルフレンドリーかチェックせよ
3 2.ページ毎にタイトルとメタデータを設定せよ
4 ３.Googlebotが見つけられるようにリンクを記載する
5 エラー時における処理
6 所感

背景

AngularでSEOに配慮する場合、何に気をつければいいかGoogle Developers Codelabsで勉強したのでその内容を記載します！

https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly

Google Developers CodelabはハンズオンでGoogleのサービスが学べるもの

https://codelabs.developers.google.com/

1.まずはモバイルフレンドリーかチェックせよ

モバイルファーストと言われて久しいですが、まずはモバイルフレンドリーかチェックをするように記載されていました。

便利なサイトが紹介されていて、このサイトでリンク貼り付ければ調べられます

https://search.google.com/test/mobile-friendly

2.ページ毎にタイトルとメタデータを設定せよ

２番目に紹介されていたのは、基本的なことだが、ページにタイトルを付与し、メタデータディスクリプションを設定することだった。確かにAngularで作成する際、設定したことがなかった。勉強になった。AngularのConponentに直接タイトルとメタデータディスクリプションは設定できないとのことなので、BrowserModuleを使って設定するとよさそう。

https://www.atmarkit.co.jp/ait/articles/1802/05/news142.html

https://www.atmarkit.co.jp/ait/articles/1803/30/news135.html

３.Googlebotが見つけられるようにリンクを記載する

google botがURLを見つけられるようにリンクをちゃんと記載する。

Codelabにはこう記載があった。

A few tips on links

As a rule of thumb, to make sure Googlebot finds all views, make sure that:

  • All links are implemented as <a href="">
  • All links have a valid URL as their href attribute (no javascript: URLs)
  • All views have a URL that doesn’t use the fragment identifier to load different content (no URLs like “/#example” or “/#!example“, sometimes called a hash URL)

要するにハッシュタグを使わないこと、aタグを使うようにとのこと、JavaScriptでレンダリングしないようにするとのことだった。

例として出されていたのは下記

<button class="mdc-button mdc-button--outlined">
  <span class="mdc-button__label">Learn more</span>
</button>

はこう書く

<a class="mdc-button mdc-button--outlined">Learn more</a>

対応するJavaScriptはこレから

item.querySelector('button').addEventListener('click', function () {
  location.href = story.link;
});

これに変える

item.querySelector('a').setAttribute('href', story.link);

このサイトでパフォーマンスを調べると良いとのこと。

https://developers.google.com/web/tools/lighthouse/

エラー時における処理

ページが見つからない場合、リダイレクトするようにする

https://codelabs.developers.google.com/codelabs/making-a-single-page-app-search-friendly/#6

所感

大変勉強になった。AngularだからSEOが不利というわけでもなさそうです。