Brighten up your day !!

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

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

0

背景

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.ページ毎にタイトルとメタデータを設定せよ

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

3.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が不利というわけでもなさそうです。

0

⭐️Brighten up your day with NP-Systems⭐️


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


  • 3月15日AngularでAdsense

    更新日時:2021年3月15日 06時46分

    0 もう3月を中旬ですね。もう春ですね!Yoasobiに最高にハマっています。 昨日ようやくAngular(Ionic)でAdsenseを表示できるようになりました。 http://ocr-app.np-sys.com/…


  • GAEでPythonをデプロイする

    更新日時:2021年4月4日 21時17分

    0 2021年はPython37が良さそう.requirements.txtはpip3 listで表示されたものを書く. 0


  • Angular(Ionic)でHTTPリクエスト

    更新日時:2021年3月24日 18時23分

    0 AngularでバックエンドAPIへアクセスしてデータを取得する際、認証情報やクエリパラメータを付与したい時がある。 Post通信 Get通信 0


this is single-default.php