SEO를 위한 Angular Universal 최적화

오늘 우리는 convert our existing Angular application into Angular Universal에 대한 여정을 계속할 것입니다.

그리고 우리가 이것을 원하는 이유 중 하나는 SEO입니다.
제목과 메타 서비스가 매우 유용한 곳입니다.
런타임뿐 아니라 서버 측 수준에서 페이지의 제목과 메타 설명을 설정하는 데 도움이 될 수 있습니다.

모든 봇이 우리가 원하는 것을 읽을 수 있음을 의미합니다.

결과를 얻으려면 페이지의 소스 코드를 열고 제공한 제목과 메타 설명을 확인해야 합니다.

Angular 구성 요소에 제목 추가

welcome.component.ts를 열어서 시작하겠습니다. 이것은 우리의 시험장이 될 것입니다. 메인 페이지가 아니기 때문에 페이지 소스를 보면서 빠르게 결과를 봐야 합니다.

구성 요소에서 Title 서비스를 가져오는 것으로 시작합니다.

import {Title} from '@angular/platform-browser';

다음 부분은 titleService를 생성자에 주입하는 것입니다.

constructor(private titleService: Title) { }

이제 이 구성 요소 전체에서 titleService를 사용할 수 있습니다.
ngOnInit 함수를 사용하여 제목을 설정하겠습니다.

ngOnInit(): void {
    this.titleService.setTitle('Welcome to my Angular app');
}

이제 Universal에서 앱을 실행하여 테스트해 보겠습니다.

npm run build:ssr && npm run serve:ssr

브라우저를 열고 환영 페이지를 방문하십시오. 제목이 실행되는 것을 볼 수 있습니다.



하지만 주요 목표는 이제 서버 렌더링 버전에서도 조정되는 것이므로 페이지 소스를 검사해 보겠습니다.



예, 알겠습니다. 크롤러와 봇이 읽을 수 있는 내용입니다🤩.

Angular 구성 요소에 메타 태그 추가

제목이 작동하면 태그를 볼 수 있습니다. 메타 서비스를 통해 모든 종류의 멋진 태그를 만들 수 있습니다.
오늘은 메타 태그에 초점을 맞출 것입니다.

먼저 Meta 서비스를 가져와 시작하겠습니다.

import {Title, Meta} from '@angular/platform-browser';

그런 다음 생성자의 구성 요소에서 사용할 수 있도록 합시다.

constructor(private titleService: Title, private metaService: Meta) {}

그리고 titleService에서 본 것처럼 이제 ngOnInit에서 이것을 호출할 수 있습니다.
메타 설명과 일부 태그를 설정해 보겠습니다.

this.metaService.addTags([
  {name: 'keywords', content: 'Welcome, Hello'},
  {
    name: 'description',
    content: 'We would like to welcome you to the wonderful world of Angular Universal'
  }
]);

앱을 다시 한 번 실행하여 사용해 봅시다.

npm run build:ssr && npm run serve:ssr

이제 머리를 기대하고 메타 태그가 삽입되었는지 확인할 수 있습니다.



이제 서버 측 렌더링 애플리케이션에 메타 설명과 제목을 삽입할 수 있습니다.
이것은 크롤러와 봇이 귀하의 웹사이트를 올바르게 인덱싱하는 데 도움이 됩니다.

GitHub에서 오늘의 소스 코드를 찾을 수 있습니다.

읽어주셔서 감사합니다. 연결해 봅시다!

제 블로그를 읽어주셔서 감사합니다. 내 이메일 뉴스레터를 구독하고 Facebook에 연결하거나