Angular4 SEO対策(titleとdescriptionの設定)

   

Angularでtitleとdescriptionをページごとに設定してみようかなと思って調べてみたら、簡単な方法は見つかりましたのでシェアしたいと思います

とりあえず、まずはプロジェクトを作ります

完了したら、localhost:4200 にアクセスします

うおーすげえ!
最近プロジェクトを作っていなかったので知らなかったんですけど、こんな画面になってます!!!

話が脱線してしまいましたが、本題に戻ります

デフォルトだと、titleは

になっていて、descriptionはありません
こんな感じになっています

このtitleとdescriptionを管理するには以下のように app.component.tsを修正します

すると以下のようにtitleとdescriptionが変更されてるのがわかるかと思います

とりあえずは、これで簡単にSEO対策はできます

簡単なホームページの場合であれば、そこまで考えることは必要無いかもしれませんが、
ルーティングが複雑になる状況や、個別にdescriptinやtitleを設定することで集客力などを向上させて行く際は必ずやるべきことだと思います

ただ、難しいことはしていないのでやるべきこととしては、seo.service.tsを作ってできる限り綺麗にまとめとくことぐらいですかね
どのページにも入れなきゃいけないと思うんで

参考にした記事

Meta
Angular2 – SEO – how to manipulate the meta description
Angular 4.0 Platform Server Ability to Set Title and Meta Tags #15742

 - Angular, html, Javascript, node.js, SEO, typescript , , , , , , , , , ,