강력한 Angular Universal SEO를 위한 사용자 지정 페이지 제목과 메타 태그 설정

목차

1. 서론
2. 앵귤러를 사용한 페이지별 커스텀 타이틀 및 설명 생성
3. 앵귤러 유니버셜 앱 소개
4. 인덱스 페이지의 기본 타이틀 및 설명
5. 홈 컴포넌트의 커스텀 타이틀 설정
6. 검색 엔진에서의 타이틀 설정
7. 서버 사이드 렌더링을 통한 타이틀 설정
8. 앵귤러 유니버셜 앱의 서버 사이드 렌더링
9. 검색 엔진 최적화를 위한 서버 사이드 렌더링 필요성
10. 결론

서론

이번 레슨에서는 앵귤러를 사용하여 웹사이트의 각 페이지마다 커스텀 타이틀과 설명을 생성하는 방법에 대해 알아보겠습니다. 이렇게 하면 런타임 시 기본 타이틀과 설명이 아닌 페이지마다 특정한 타이틀을 사용할 수 있습니다. 이는 페이지마다 별도의 타이틀이 없는 경우에는 대체 타이틀로 사용될 수 있습니다. 먼저 타이틀을 약간 변경해보겠습니다. 앵귤러 유니버셜 앱으로 변경하고, 설명 메타 태그 내용도 변경해보겠습니다. 이전 내용은 삭제하고, 새로운 설명으로 앵귤러 유니버셜 샘플 애플리케이션을 추가해보겠습니다. 이렇게 하면 우리 애플리케이션의 특정 페이지에 별도의 타이틀이나 설명이 없는 경우에도 index.html 파일에서 해당 내용을 사용할 수 있습니다. 다음으로 새 파일을 저장한 다음, 서버를 포트 번호 4200으로 실행한 후 큰 창으로 전환하여 페이지를 다시 로드하고 올바른 타이틀과 설명이 페이지에 설정되었는지 확인합니다. 이후 작업 공간으로 전환하여 각 페이지별로 커스텀 타이틀과 설명을 생성하는 방법을 살펴보겠습니다. 이제 홈 컴포넌트로 시작해 보겠습니다. 사용자가 해당 컴포넌트에 접속한 경우에만 페이지 타이틀을 '앵귤러 유니버셜 - 모든 강의'로 설정하고자 합니다. 이를 위해 홈 컴포넌트의 생성자에 새 앵귤러 서비스인 타이틀 서비스를 주입합니다. 타이틀 서비스는 앵귤러의 코어 서비스로써, 생성자에서 주입할 수 있습니다. 이제 ngOnInit에서 타이틀 서비스를 사용하여 페이지의 타이틀을 설정할 수 있습니다. setTitle 메서드를 호출하여 '앵귤러 유니버시티 - 모든 강의'로 타이틀을 설정해보겠습니다. 이렇게 설정한 타이틀은 브라우저 탭 패널에도 표시됩니다. 이제 큰 창으로 전환하여 앱을 새로 고치고, 새로운 타이틀이 정확히 표시되는지 확인합니다. 앱이 새로 고쳐지면 타이틀은 지정한 값으로 설정됩니다. 그러나 검색 엔진의 관점에서는 이 타이틀이 어떻게 설정되었는지와 백엔드에서받은 원래 타이틀이 무엇인지가 궁금합니다.

앵귤러를 사용한 페이지별 커스텀 타이틀 및 설명 생성

서버사이드 렌더링이 활성화된 앵귤러 유니버셜 앱의 동작 방식과 기본 페이지의 타이틀 및 설명에 대해 알아보겠습니다. 앞서 언급한대로 서버사이드 렌더링이 활성화된 상태에서 앵귤러 유니버셜 앱을 실행하면, 초기 페이로드에서 제공된 원본 타이틀과 설명뿐만 아니라, 사용자에게 콘텐츠를 표시하는 데 필요한 모든 HTML이 서버사이드에서 렌더링된 버전으로 반환됩니다. 이는 검색 엔진에게 앱의 정확한 인덱싱을 가능하게 해주는 검색 엔진 친화적인 버전입니다. 그렇다면 서버에서 이 앵귤러 유니버셜 앱을 처리할 때 무엇을 얻을 수 있을까요?페이지 소스 보기를 클릭하면, 전체적으로 서버사이드에서 렌더링된 애플리케이션 버전을 확인할 수 있습니다. 이 버전에는 정확한 타이틀과 설명뿐만 아니라 사용자에게 콘텐츠를 표시하는 데 필요한 모든 HTML이 포함되어 있습니다. 따라서 본문 태그를 검색하면 사용자에게 표시할 내용을 확인할 수 있습니다. 검색 엔진 친화적인 이 새로운 버전은 모든 검색 엔진, 특히 런타임에서 생성된 JavaScript 내용을 이미 고려하는 최신 검색 엔진들에 의해 정확하게 색인화될 것입니다. 그러나 아직 일부 중요한 검색 엔진은 런타임 값인 타이틀과 메타 설명 태그를 처리하지 못하는 경우가 있습니다. 이러한 검색 엔진을 위해 서버사이드 렌더링을 통해 타이틀을 렌더링하는 것이 필요합니다. 하지만 구글 검색 엔진을 포함한 대부분의 일반적으로 사용하는 검색 엔진들은 런타임에서 발생하는 JavaScript 변경 사항을 모두 고려합니다. 이제 서버 사이드 렌더링의 필요성을 고려하여 다시 작업 공간으로 돌아가서 타이틀과 설명을 커스터마이즈하는 방법을 살펴보겠습니다.

⭐앵귤러 유니버셜 앱 소개

앵귤러 유니버셜 앱은 서버 사이드 렌더링을 지원하여 검색 엔진 최적화(SEO)에 큰 도움을 주는 앵귤러의 기능입니다. 서버 사이드 렌더링을 통해 애플리케이션의 초기 페이로드가 서버에서 렌더링되며, 검색 엔진이 콘텐츠를 인덱싱할 수 있는 완전한 HTML 페이지를 제공합니다. 이는 검색 엔진 최적화를 위해 매우 중요한 기능이며, 사용자가 더 나은 검색 엔진 결과를 얻을 수 있는 장점이 있습니다. 또한, 초기 페이지 로딩 속도를 향상시켜 사용자 경험을 개선할 수 있습니다.

인덱스 페이지의 기본 타이틀 및 설명

본격적으로 앵귤러 유니버셜 앱의 페이지별 커스텀 타이틀과 설명 생성에 앞서, 인덱스 페이지의 기본 타이틀과 설명부터 살펴보겠습니다. 앵귤러 유니버셜 앱은 index.html 파일에 있는 기본 타이틀과 설명을 사용합니다. 이는 각 페이지의 커스텀 타이틀 설정이 이루어지지 않았을 때 대체 타이틀로 사용됩니다. 따라서 index.html 파일에서 기본 타이틀과 설명을 변경하면 앱 전역적으로 사용할 수 있습니다. 다만, 커스텀 타이틀이나 설명이 있는 페이지의 경우, 해당 페이지의 타이틀과 설명이 우선적으로 표시됩니다. 이로써 사용자에게 더 명확하고 구체적인 정보를 제공할 수 있는 것이죠. 따라서, 애플리케이션 개발 시 기본 타이틀과 설명을 적절하게 설정하는 것이 중요합니다.

홈 컴포넌트의 커스텀 타이틀 설정

홈 컴포넌트와 같이 특정 컴포넌트에 커스텀 타이틀을 설정하는 방법을 알아보겠습니다. 사용자가 홈 컴포넌트에 접속한 경우, 페이지 타이틀을 '앵귤러 유니버셜 - 모든 강의'로 설정하고자 합니다. 이를 위해 홈 컴포넌트의 생성자에서 앵귤러 타이틀 서비스를 주입합니다. 타이틀 서비스는 앵귤러의 코어 서비스로, 생성자에서 주입할 수 있습니다. 그리고 ngOnInit() 메서드에서 타이틀 서비스를 사용하여 페이지의 타이틀을 동적으로 설정할 수 있습니다. setTitle() 메서드를 호출하여 타이틀을 '앵귤러 유니버시티 - 모든 강의'로 설정하겠습니다. 이렇게 설정한 타이틀은 브라우저의 탭 패널에 보여지게 됩니다. 큰 창으로 전환하여 앱을 다시 로드하고, 새로운 타이틀이 올바르게 설정되는지 확인해봅시다. 앱이 새로고침된 후에도 설정한 타이틀이 나타나야 합니다.

🔍검색 엔진에서의 타이틀 설정

검색 엔진에서 타이틀이 어떻게 설정되고 백엔드로부터 어떤 타이틀을 받았는지 궁금할 수 있습니다. 검색 엔진은 초기 HTML 페이로드에서 원래 타이틀을 가져옵니다. 다시 말해, 서버로부터 받은 HTML에 있는 기본 타이틀을 인식합니다. 그런 다음 클라이언트 측에서 자바스크립트가 실행되고 앵귤러가 페이지를 컨트롤하며, 컴포넌트가 생성되고 타이틀이 업데이트됩니다. 이 시점에서 페이지 타이틀이 변경됩니다. 이에 따라서 타이틀이 서버 사이드 렌더링된 경우 타이틀은 서버로부터 받은 원래 값으로 설정됩니다. 클라이언트 측에서 런타임에 업데이트된 타이틀은 사용되지 않습니다.

또한, 서버사이드 렌더링이 활성화된 앵귤러 유니버셜 앱은 초기 HTML 페이로드에서 렌더링되어 검색 엔진에서 쉽게 인식할 수 있습니다. 이를 통해 모든 검색 엔진에서 앱을 정확하게 크롤링하고 색인화할 수 있습니다. 따라서 대부분의 최신 검색 엔진은 런타임에서 생성된 자바스크립트 컨텐츠를 이미 고려하므로, 서버 사이드 렌더링을 위한 작업은 더 이상 필요하지 않습니다. 하지만 아직까지 일부 검색 엔진은 런타임에서 발생하는 타이틀 및 메타 설명 태그의 변경 사항을 고려하지 못하는 경우가 있습니다. 이 경우를 대비하여 검색 엔진 최적화를 위해서는 서버 사이드 렌더링을 활용하여 타이틀을 렌더링해주어야 합니다. 그러나 일반적으로 가장 많이 사용되는 검색 엔진들, 특히 구글 검색 엔진은 이미 런타임에서 생성된 자바스크립트 컨텐츠를 고려하므로 서버 사이드 렌더링은 더 이상 필요하지 않습니다. 따라서 대부분의 경우에는 자바스크립트 컨텐츠 변경 사항이 검색 엔진에 반영되는 것이 가능합니다. 이제 서버 사이드 렌더링의 필요성에 대해 이해하였으니, 작업 공간으로 돌아가서 타이틀 설정에 대해 더 알아보겠습니다.

서버 사이드 렌더링을 통한 타이틀 설정

서버 사이드 렌더링을 통해 앵귤러 유니버셜 앱에서 타이틀을 설정하는 방법에 대해 살펴보겠습니다. 앵귤러 유니버셜을 이용한 서버 사이드 렌더링을 활성화하여 앱을 시작하면, 초기 페이로드에서 서버에서 렌더링된 버전을 받게 됩니다. 이로 인해 검색 엔진은 앱의 타이틀과 메타 태그를 정확하게 인식할 수 있습니다. 서버 사이드 렌더링을 통해 렌더링된 버전은 사용자에게 보여지는 버전과 완전히 일치하며, 애플리케이션을 Crawling하여 색인화하는 데 이상적입니다. 또한, 서버 사이드 렌더링은 초기 페이지 로딩 속도를 향상시켜 사용자 경험을 향상시키는 장점이 있습니다. 이제 작업 공간으로 돌아가서 서버 사이드 렌더링을 활성화한 앵귤러 유니버셜 앱의 동작 방식에 대해 더 자세히 알아보겠습니다.

앵귤러 유니버셜 앱의 서버 사이드 렌더링

서버 사이드 렌더링을 활성화한 앵귤러 유니버셜 앱은 서버 및 클라이언트 사이드에서 동작하는 동안 다른 동작을 수행합니다. 서버에서 앱을 렌더링하고 초기 페이로드를 클라이언트에게 제공하여 검색 엔진에서 적절하게 인식할 수 있습니다. 클라이언트에서는 전체 페이지를 렌더링하고 최종 컨텐츠를 사용자에게 제공합니다. 이렇게 함으로써 최종 사용자는 애플리케이션의 플루이드한 경험을 누릴 수 있습니다. 서버 사이드 렌더링을 사용하면 콘텐츠를 제공하기 위해 서버에서 렌더링된 HTML을 사용할 수 있으며, 클라이언트 사이드 코드 실행으로 인한 렌더링 지연 문제를 해결할 수 있습니다. 이를 통해 초기 렌더링 속도 개선과 SEO 향상을 달성할 수 있습니다.

검색 엔진 최적화를 위한 서버 사이드 렌더링 필요성

앵귤러 유니버셜 앱은 서버 사이드 렌더링에 의해 검색 엔진 최적화를 위한 중요한 기능을 제공합니다. 서버 사이드 렌더링을 통해 앱의 초기 페이로드가 검색 엔진에 의해 쉽게 인식되어 색인화될 수 있는 HTML 버전으로 제공됩니다. 이는 사용자가 더 나은 검색 결과를 얻을 수 있는 장점이 있으며, 초기 페이지 로딩 속도를 향상시켜 사용자 경험을 개선할 수 있습니다. 따라서 검색 엔진 최적화를 위해서는 앵귤러 유니버셜 앱에서 서버 사이드 렌더링을 활용하는 것이 좋습니다. 동시에, 검색 엔진은 기본적으로 런타임에서 변경되는 타이틀 및 메타 설명 태그를 인식하지만, 일부 검색 엔진은 아직 런타임 값을 처리하지 못하는 경우가 있습니다. 이러한 검색 엔진을 고려하여 렌더링되지 않은 서버 사이드 렌더링을 활용하는 것이 중요합니다. 그러나 대부분의 검색 엔진은 이미 런타임에서 생성된 자바스크립트 컨텐츠를 고려하므로 서버 사이드 렌더링 작업은 더 이상 필요하지 않습니다. 이를 통해 검색 엔진 최적화를 위한 작업을 최소화하고 효율적인 개발을 할 수 있습니다.

결론

이번 레슨에서는 앵귤러를 사용하여 웹사이트의 각 페이지마다 커스텀 타이틀과 설명을 생성하는 방법에 대해 알아보았습니다. 우리는 앵귤러 유니버셜 앱에서 서버 사이드 렌더링을 사용하여 검색 엔진 최적화를 할 수 있음을 확인했습니다. 또한, 기본 타이틀과 설명을 설정함으로써 사용자에게 더 구체적인 정보를 제공할 수 있습니다. 타이틀을 페이지별로 커스터마이즈하는 방법과 서버 사이드 렌더링을 통해 검색 엔진에서 타이틀을 설정하는 방법을 배웠습니다. 서버 사이드 렌더링이 필요한 경우와 그렇지 않은 경우를 고려하여 검색 엔진 최적화에 유의하면서 앵귤러 앱을 개발할 수 있습니다. 앵귤러 유니버셜을 통해 웹 애플리케이션을 개발하고 최상의 검색 결과와 사용자 경험을 제공할 수 있습니다.

✨하이라이트

• 앵귤러 유니버셜 앱은 서버 사이드 렌더링을 지원하여 검색 엔진 최적화에 도움을 줍니다.
• 앵귤러 유니버셜 앱을 사용하면 초기 페이로드에서 서버에서 렌더링된 HTML을 검색 엔진에 제공할 수 있습니다.
• 기본 타이틀과 설명을 설정하여 사용자에게 더 구체적인 정보를 제공할 수 있습니다.
• 페이지별로 커스텀 타이틀과 설명을 설정할 수 있습니다.
• 서버 사이드 렌더링을 통해 검색 엔진이 동적으로 변경되는 타이틀 및 메타 설명 태그를 고려할 수 있습니다.
• 서버 사이드 렌더링은 초기 페이지 로딩 속도를 향상시켜 사용자 경험을 개선할 수 있습니다.

🙋FAQ

Q: 앵귤러 유니버셜 앱을 사용하지 않고 검색 엔진 최적화를 할 수 있나요? A: 네, 앵귤러 유니버셜 앱 외에도 다른 방법으로도 검색 엔진 최적화를 할 수 있습니다. 예를 들어 다른 프레임워크 또는 정적 페이지 생성기를 사용할 수 있습니다. 그러나 앵귤러 유니버셜 앱은 SEO에 특히 유용한 기능을 제공하여 검색 엔진 최적화를 더욱 효과적으로 할 수 있습니다.

Q: 서버 사이드 렌더링을 사용하지 않아도 검색 엔진 최적화를 할 수 있나요? A: 네, 서버 사이드 렌더링은 검색 엔진 최적화를 위한 중요한 기능이지만, 서버 사이드 렌더링을 사용하지 않아도 일부 검색 엔진은 런타임에서 생성된 자바스크립트 컨텐츠를 고려할 수 있습니다. 그러나 이는 모든 검색 엔진에서 보장되는 것은 아니므로 주의가 필요합니다.

Q: 서버 사이드 렌더링이 애플리케이션 성능에 어떤 영향을 미칠까요? A: 서버 사이드 렌더링은 초기 로딩 시간을 늘릴 수 있지만, 검색 엔진 최적화와 사용자 경험 개선 측면에서 이점이 있습니다. 서버 사이드 렌더링을 통해 검색 엔진이 콘텐츠를 더 잘 인식할 수 있으며, 사용자에게 초기 로딩 속도를 향상시킬 수 있습니다.

Q: 앵귤러 유니버셜 앱과 앵귤러 싱글 페이지 앱의 차이점은 무엇인가요? A: 앵귤러 유니버셜 앱은 서버 사이드 렌더링을 지원하며, 초기 페이로드를 서버에서 렌더링합니다. 이를 통해 검색 엔진 최적화와 초기 로딩 속도 개선을 할 수 있습니다. 앵귤러 싱글 페이지 앱은 클라이언트에서 자바스크립트를 사용하여 렌더링되는 앱입니다.