검색 엔진은 Angular를 어떻게 처리합니까?JS 어플리케이션
Angular와 관련하여 두 가지 문제가 있습니다.검색 엔진 및 SEO에 관한 JS 어플리케이션:
1) 커스텀 태그는 어떻게 됩니까?검색 엔진은 태그 내의 전체 내용을 무시합니까? 즉,
<custom>
<h1>Hey, this title is important</h1>
</custom>
would<h1>커스텀 태그 안에 있어도 인덱스가 작성됩니까?
2) 색인 {{}}바인드의 검색엔진을 문자 그대로 회피할 수 있는 방법이 있습니까?
<h2>{{title}}</h2>
내가 할 수 있는 건
<h2 ng-bind="title"></h2>
하지만 실제로 크롤러가 타이틀을 보게 하고 싶다면?서버측 렌더링만이 유일한 솔루션입니까?
(2022) 가능하면 Server Side Rendering을 사용하여 Pushstate로 URL 생성
구글은 지금 JavaScript를 실행할 수 있고 실행할 것이기 때문에 당신이 합리적인 URL 구조를 만든다면 JavaScript만을 사용하여 사이트를 구축하는 것이 매우 가능합니다.그러나 페이지스피드는 점점 더 중요한 순위 요인이 되고 있으며 일반적으로 페이지 빌드 클라이언트 사이드는 초기 렌더링 시 성능이 떨어집니다.
SSR(Serverside Rendering)을 사용하면 페이지를 서버에서 미리 생성할 수 있습니다.html에는 페이지 루트로 사용되는 div가 포함되어 있지만, 이것은 빈 div가 아니라 JavaScript가 실행이 허용되었을 때 생성되었을 html이 포함되어 있습니다.
클라이언트는 HTML을 다운로드하여 매우 빠른 초기 로드를 제공하며, 다음으로 수화라고 하는 프로세스로 루트 div의 콘텐츠를 생성된 콘텐츠로 대체하는 JavaScript를 실행합니다.
많은 새로운 프레임워크, 특히 NextJs에는 SSR가 내장되어 있습니다.
(2015) Push State 및 사전 구성 사용
현재(2015) 방법은 JavaScript pushState 메서드를 사용하는 것입니다.
PushState는 페이지를 새로고침하지 않고 상단 브라우저 바의 URL을 변경합니다.탭이 포함된 페이지가 있다고 가정합니다.탭은 콘텐츠를 숨기고 표시하며 콘텐츠는 AJAX를 사용하거나 display:none 및 display:block을 설정하여 올바른 탭 콘텐츠를 숨기고 표시함으로써 동적으로 삽입됩니다.
탭을 클릭하면 pushState를 사용하여 주소 표시줄의 URL을 업데이트합니다.페이지가 렌더링되면 주소 표시줄의 값을 사용하여 표시할 탭을 결정합니다.각도 라우팅은 자동으로 이 작업을 수행합니다.
사전 구성
PushState Single Page App(SPA)에 접속하는 방법에는 두 가지가 있습니다.
- 사용자가 PushState 링크를 클릭하면 콘텐츠가 AJAX에 저장됩니다.
- URL을 직접 누르면 됩니다.
사이트의 첫 번째 히트에는 URL을 직접 클릭하는 것이 포함됩니다.PushState가 URL을 업데이트함에 따라 후속 검색은 콘텐츠에 AJAX만 포함됩니다.
크롤러는 페이지에서 링크를 수집한 후 나중에 처리하기 위해 해당 링크를 큐에 추가합니다.즉, 크롤러에게 서버상의 모든 타격은 직격탄이므로 Pushstate를 경유하지 않습니다.
사전 구성에서는 초기 페이로드가 서버로부터의 첫 번째 응답(아마도 JSON 개체)에 번들됩니다.이것에 의해, 검색 엔진은 AJAX 콜을 실행하지 않고 페이지를 렌더링 할 수 있습니다.
Google이 AJAX 요청을 실행하지 않을 수 있다는 증거가 있습니다.자세한 내용은 이쪽:
검색 엔진은 JavaScript를 읽고 실행할 수 있습니다.
구글은 얼마 전부터 자바스크립트를 해석할 수 있었습니다.이것이 원래 그들이 크롬을 개발한 이유이며, 구글 스파이더의 완전한 기능을 갖춘 헤드리스 브라우저 역할을 하기 위해서입니다.링크에 유효한 href 속성이 있는 경우 새 URL을 인덱싱할 수 있습니다.더 이상 할 일이 없어요.
링크를 클릭하면 pushState 콜이 트리거되는 경우 사용자는 PushState를 통해 사이트를 탐색할 수 있습니다.
PushState URL에 대한 검색 엔진
PushState는 현재 Google과 Bing에서 지원됩니다.
구글
다음은 PushState for SEO에 대한 Paul Irish의 질문에 대한 Matt Cutts의 답변입니다.
다음은 구글이 스파이더에 대한 완전한 자바스크립트 지원을 발표한 내용입니다.
http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html
결론은 구글이 PushState를 지원하며 PushState URL을 색인화한다는 것이다.
Google 웹마스터 도구의 Googlebot 가져오기 기능을 참조하십시오.JavaScript(Angular 포함)가 실행되는 것을 볼 수 있습니다.
빙
다음은 2013년 3월 Bing의 예쁜 PushState URL 지원 발표입니다.
http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/
해시뱅#은 사용하지 마세요!
해시방 URL은 개발자가 특정 장소에서 사전 렌털된 버전의 사이트를 제공해야 하는 추악한 임시방편이었습니다.아직 작동하지만 사용할 필요는 없습니다.
해시방 URL은 다음과 같습니다.
domain.example/#!path/to/resource
이것은 다음과 같은 메타태그와 조합됩니다.
<meta name="fragment" content="!">
Google은 이러한 형식으로 인덱스를 작성하지 않고 대신 excape_fragments URL에서 사이트의 정적 버전을 가져와 인덱싱합니다.
Pushstate URL은 일반 URL과 동일합니다.
domain.example/path/to/resource
차이점은 Angular가 JavaScript에서 document.location에 대한 변경을 대행 수신하여 사용자를 대신 처리한다는 것입니다.
PushState URL을 사용하는 경우(아마도 사용하는 경우), 오래된 해시 스타일의 URL 및 메타태그를 모두 삭제하고 구성 블록에서 HTML5 모드를 활성화하기만 하면 됩니다.
사이트 테스트
이제 Google Webmaster 도구에는 URL을 Google로 가져오고 Google이 렌더링할 때 JavaScript를 렌더링할 수 있는 도구가 포함되어 있습니다.
https://www.google.com/webmasters/tools/googlebot-fetch
각도에서의 PushState URL 생성
# 프리픽스가 아닌 Angular로 실제 URL을 생성하려면 $locationProvider 객체에 HTML5 모드를 설정합니다.
$locationProvider.html5Mode(true);
서버측
실제 URL 을 사용하고 있기 때문에, 모든 유효한 URL 에 대해서, 서버에 의해서 같은 템플릿(및 일부의 사전 구성 컨텐츠)이 출하되고 있습니다.이 방법은 서버 아키텍처에 따라 달라집니다.
사이트 맵
앱에서 호버나 스크롤과 같은 비정상적인 형태의 탐색을 사용할 수 있습니다.Google이 앱을 구동할 수 있도록 하기 위해 앱이 응답하는 모든 URL의 간단한 목록인 사이트 맵을 만드는 것이 좋습니다.기본 위치(/sitemap 또는 /sitemap.xml)에 배치하거나 웹마스터 도구를 사용하여 Google에 알릴 수 있습니다.
어쨌든 시트맵을 하는 건 좋은 생각이야.
브라우저 지원
푸쉬스테이트는 IE10에서 동작합니다.이전 브라우저에서는 Angular가 자동으로 해시 스타일 URL로 폴백됩니다.
데모 페이지
다음 콘텐츠는 사전 구성이 포함된 푸시 스테이트 URL을 사용하여 렌더링됩니다.
http://html5.gingerhost.com/london
확인할 수 있듯이, 이 링크에서 컨텐츠는 색인화되어 Google에 표시됩니다.
서비스 404 및 301 헤더 상태 코드
검색 엔진은 항상 모든 요청에 대해 서버에 타격을 주기 때문에 서버에서 헤더 상태 코드를 제공할 수 있으며 구글이 이를 볼 것으로 예상할 수 있습니다.
2014년 5월 갱신
Google 크롤러는 이제 javascript를 실행합니다. Google 웹마스터 도구를 사용하여 Google에서 사이트를 렌더링하는 방법을 더 잘 이해할 수 있습니다.
★★
검색 엔진에 맞게 앱을 최적화하고 싶다면 안타깝게도 크롤러에 사전 렌더링 버전을 제공할 방법이 없습니다.구글이 추천하는 ajax 및 javascript를 많이 사용하는 사이트에 대한 자세한 내용은 여기를 참조하십시오.
이것이 옵션이라면 서버 측 렌더링을 사용하여 SEO for Angular를 수행하는 방법에 대해 이 문서를 읽어보기를 권장합니다.
크롤러가 커스텀 태그를 발견했을 때 무엇을 하는지 잘 모르겠습니다.
Angular에 대해 확실히 하자.JS 및 SEO
구글, 야후, 빙, 그리고 다른 검색 엔진들은 전통적인 크롤러를 사용하여 웹을 기어다닌다.그들은 웹 페이지에서 HTML을 기어다니며 정보를 수집하는 로봇을 실행한다.이들은 흥미로운 단어를 유지하고 다른 페이지로 연결되는 다른 링크를 찾습니다(이러한 링크, 링크의 양 및 개수는 SEO와 관련이 있습니다).
그럼 왜 검색엔진은 javascript 사이트를 다루지 않는 거죠?
정답은 검색 엔진 로봇이 헤드리스 브라우저를 통해 작동하며 대부분의 경우 페이지의 Javascript를 렌더링할 Javascript 렌더링 엔진이 없다는 사실과 관련이 있습니다.대부분의 정적 페이지는 JavaScript의 콘텐츠를 이미 사용할 수 있기 때문에 페이지 렌더링에 신경 쓰지 않기 때문에 대부분의 페이지에서 이 방법이 작동합니다.
어떻게 하면 좋을까요?
다행히 대규모 사이트의 크롤러가 JavaScript 사이트를 크롤링할 수 있는 메커니즘을 구현하기 시작했지만, 이를 위해서는 사이트를 변경해야 합니다.
hashPrefix#!한 것이 #을 "사용"으로 _escaped_fragment_#!, 해시 프리픽스가에서는, (HTML5 「」( 「」, 「」)를 수 ).User Agentheader(헤더)
즉, 다음과 같은 일반 브라우저의 요청이 아닌 다음과 같습니다.
http://www.ng-newsletter.com/#!/signup/page
검색 엔진은 다음을 사용하여 페이지를 검색합니다.
http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page
는 Angular 앱의 할 수 .ngRoute:
angular.module('myApp', [])
.config(['$location', function($location) {
$location.hashPrefix('!');
}]);
그리고 만약 우리가html5Mode 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 메타태그, 즉 메타태그, , 메타태그, ,
<meta name="fragment" content="!">
하면 '아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 아, 이 가능합니다html5Mode()$location★★★★★★★★★★★★★★★★★★:
angular.module('myApp', [])
.config(['$location',
function($location) {
$location.html5Mode(true);
}]);
검색 엔진 처리
실제로 콘텐츠를 정적 HTML로 검색 엔진에 전달하는 방법을 결정할 기회가 많이 있습니다. 백엔드를 직접 호스팅하거나 백엔드를 호스팅하는 서비스를 사용하거나 프록시를 사용하여 콘텐츠를 전송할 수 있습니다.몇 가지 옵션을 살펴보겠습니다.
셀프 호스팅
브라우저를 하여 자신의 하고 렌더링된 할 수 문자열 phantomjs의 jombijs를 볼 이 서비스를 이용할 수 있습니다. 리리문문 문볼볼볼볼?_escaped_fragment_검색 요청에서는 사전 렌더링된 페이지가 아닌 페이지의 정적 HTML 스냅샷을 JS로만 전달할 수 있습니다.따라서 중간에 조건부 논리로 페이지를 전달하는 백엔드가 필요합니다.prerender.io의 백엔드 등을 사용하여 직접 실행할 수 있습니다.물론 프록시 처리와 스니펫 처리도 해야 하지만 좋은 시작입니다.
유료 서비스 포함
콘텐츠를 검색 엔진으로 가져오는 가장 쉽고 빠른 방법은 서비스 Brombone, seo.various, seo4various, prerender.io를 사용하는 것입니다.이러한 컨텐츠 렌더링을 호스트 하는 좋은 예로는 다음과 같습니다.이것은 서버/프록시를 실행하고 싶지 않은 경우에 적합합니다.그리고 보통 엄청 빨라요.
Angular와 SEO에 대한 자세한 내용은 http://www.ng-newsletter.com/posts/serious-angular-seo.html에서 자세히 설명했으며, 자세한 내용은 ng-book을 참조하십시오. AngularJS에 관한 전집ng-book.com 에서 확인하세요.
SEO 친화적인 앵글 만들기 튜토리얼을 꼭 확인하세요.JS사이트는 무 블로그의 해.Angular의 문서에 설명된 모든 단계를 안내합니다.http://www.yearofmoo.com/2012/11/angularjs-and-seo.html
이 기술을 사용하면 검색 엔진은 커스텀태그 대신 확장된HTML을 표시합니다.
이것은 극적으로 변화했다.
$locationProvider.html5Mode(true)를 사용하는 경우 설정되었습니다.
렌더링 페이지는 없습니다.
이 질문이 나온 이후로 상황이 많이 달라졌다.이제 Google에서 Angular를 인덱싱할 수 있는 옵션이 있습니다.JS 사이트제가 찾은 가장 쉬운 방법은 http://prerender.io 무료 서비스를 이용하는 것입니다.이 서비스는 crwalable 페이지를 생성하여 검색 엔진에 제공하는 것입니다.거의 모든 서버 측 웹 플랫폼에서 지원됩니다.최근 사용하기 시작했는데, 지원도 훌륭합니다.
저는 그들과 어떤 관계도 없습니다.이것은 행복한 유저로부터 온 것입니다.
Angular 자체 웹사이트는 단순화된 콘텐츠를 검색 엔진에 제공합니다.http://docs.angularjs.org/?_syslog_syslog_=/syslog/step_09
Angular ex Node . js / Express 기 JSON Node . / JSON를 사용한다고 ./api/path/to/resource에서 모든 할 수 아마도 어떤 요청도 리다이렉트 할 수 있을 것입니다.?_escaped_fragment_로로 합니다./api/path/to/resource.html콘텐츠 네고시에이션을 사용하여 JSON 데이터를 반환하지 않고 콘텐츠의 HTML 템플릿을 렌더링합니다.
단, Angular 루트는 REST API와 1:1로 일치해야 합니다.
편집: REST api를 혼란스럽게 할 가능성이 있다는 것을 알고 있습니다.또, 매우 심플한 사용 예 이외에서는, 자연스럽게 사용할 수 없는 것을 추천하지 않습니다.
대신 로봇 친화적인 콘텐츠에 전혀 다른 경로 및 컨트롤러 세트를 사용할 수 있습니다.하지만 넌 네 앵글을 모두 복제하고 있어노드/Express의 JS 루트 및 컨트롤러.
이상적이지는 않지만 헤드리스 브라우저에서 스냅샷을 생성하기로 결정했습니다.
여기서 좋은 방법을 찾을 수 있습니다.
http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag
현재 구글은 AJAX 크롤링 제안을 변경했다.
tl;dr: [Google]은(는) 2009년에 작성된 AJAX 크롤링 제안을 더 이상 권장하지 않습니다.
Google의 크롤러블 Ajax Spec이 기본적으로 해답입니다.
만약 다른 검색 엔진과 소셜 봇이 같은 문제를 어떻게 다루는지에 관심이 있다면, 저는 여기에 최신 기술을 적어두었습니다: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html
저는 Crowlable Ajax Spec as a Service를 구현하고 있는 https://ajaxsnapshots.com에서 근무하고 있습니다.이 보고서의 정보는 당사의 로그에서 관찰한 내용을 바탕으로 하고 있습니다.
당신의 근거 대부분을 커버할 수 있는 우아한 해결책을 찾았습니다.처음에 여기에 그것에 대해 썼고, 그것을 참조하는 또 다른 유사한 스택오버플로우 질문에 답했습니다.
참고로 이 솔루션에는 크롤러에 의해 JavaScript가 픽업되지 않는 경우에 대비하여 하드코드 폴백태그도 포함되어 있습니다.아직 명확하게 개요를 설명하지는 않았지만, 적절한 URL 지원을 위해 HTML5 모드를 활성화해야 한다는 점을 언급할 가치가 있습니다.
주의: 이것들은 완전한 파일이 아니라 관련된 파일의 중요한 부분일 뿐입니다.지침서, 서비스 등을 위해 보일러 플레이트를 쓰는 것은 어쩔 수 없습니다.
app.module
여기서 각 경로(제목, 설명 등)의 커스텀 메타데이터를 제공합니다.
$routeProvider
.when('/', {
templateUrl: 'views/homepage.html',
controller: 'HomepageCtrl',
metadata: {
title: 'The Base Page Title',
description: 'The Base Page Description' }
})
.when('/about', {
templateUrl: 'views/about.html',
controller: 'AboutCtrl',
metadata: {
title: 'The About Page Title',
description: 'The About Page Description' }
})
metadata-service.metadata(서비스)
커스텀 메타데이터 옵션을 설정하거나 기본값을 폴백으로 사용합니다.
var self = this;
// Set custom options or use provided fallback (default) options
self.loadMetadata = function(metadata) {
self.title = document.title = metadata.title || 'Fallback Title';
self.description = metadata.description || 'Fallback Description';
self.url = metadata.url || $location.absUrl();
self.image = metadata.image || 'fallbackimage.jpg';
self.ogpType = metadata.ogpType || 'website';
self.twitterCard = metadata.twitterCard || 'summary_large_image';
self.twitterSite = metadata.twitterSite || '@fallback_handle';
};
// Route change handler, sets the route's defined metadata
$rootScope.$on('$routeChangeSuccess', function (event, newRoute) {
self.loadMetadata(newRoute.metadata);
});
metaproperty.metaproperty(메타)
뷰의 메타데이터 서비스 결과를 패키지화합니다.
return {
restrict: 'A',
scope: {
metaproperty: '@'
},
link: function postLink(scope, element, attrs) {
scope.default = element.attr('content');
scope.metadata = metadataService;
// Watch for metadata changes and set content
scope.$watch('metadata', function (newVal, oldVal) {
setContent(newVal);
}, true);
// Set the content attribute with new metadataService value or back to the default
function setContent(metadata) {
var content = metadata[scope.metaproperty] || scope.default;
element.attr('content', content);
}
setContent(scope.metadata);
}
};
index.displaces를 표시합니다.
JavaScript를 픽업할 수 없는 크롤러를 위해 앞서 언급한 하드코드 폴백태그를 사용합니다.
<head>
<title>Fallback Title</title>
<meta name="description" metaproperty="description" content="Fallback Description">
<!-- Open Graph Protocol Tags -->
<meta property="og:url" content="fallbackurl.example" metaproperty="url">
<meta property="og:title" content="Fallback Title" metaproperty="title">
<meta property="og:description" content="Fallback Description" metaproperty="description">
<meta property="og:type" content="website" metaproperty="ogpType">
<meta property="og:image" content="fallbackimage.jpg" metaproperty="image">
<!-- Twitter Card Tags -->
<meta name="twitter:card" content="summary_large_image" metaproperty="twitterCard">
<meta name="twitter:title" content="Fallback Title" metaproperty="title">
<meta name="twitter:description" content="Fallback Description" metaproperty="description">
<meta name="twitter:site" content="@fallback_handle" metaproperty="twitterSite">
<meta name="twitter:image:src" content="fallbackimage.jpg" metaproperty="image">
</head>
이것은 대부분의 검색 엔진 사용 사례에 큰 도움이 될 것입니다.소셜 네트워크 크롤러(JavaScript 지원의 경우)에 대해 완전히 동적인 렌더링을 원하는 경우 다른 답변에서 언급된 사전 렌더링 서비스 중 하나를 사용해야 합니다.
Angular Universal을 사용하면 앱의 랜딩 페이지를 완전한 앱처럼 생성하고 Angular 앱을 그 뒤에 로드할 수 있습니다.
Angular Universal은 순수 HTML을 서버 측에서 생성하며, 이를 지체 없이 사용자에게 제공합니다.따라서 크롤러, 봇 및 사용자(이미 CPU 및 네트워크 속도가 낮은 사용자)에 대응할 수 있습니다.그런 다음 링크/버튼을 통해 뒤에 이미 로드된 실제 각도 앱으로 리디렉션할 수 있습니다.이 솔루션은 공식 사이트에서 추천하고 있습니다.-SEO와 Angular Universal에 대한 자세한 내용은-
PreRender와 같은 것을 사용하면 사이트의 정적 페이지를 만들어 검색 엔진이 인덱싱할 수 있습니다.
이용 가능한 플랫폼에 대해서는, https://prerender.io/documentation/install-middleware#asp-net 를 참조해 주세요.
크롤러(또는 봇)는 웹 페이지의 HTML 콘텐츠를 크롤링하도록 설계되었지만 비동기 데이터 가져오기를 위한 AJAX 작업 때문에 페이지를 렌더링하고 동적 콘텐츠를 표시하는 데 시간이 걸리기 때문에 문제가 되었습니다.similarly유 similarly,, similarly 、AngularJS또한 구글 크롤러에 문제를 일으키는 비동기 모델을 사용합니다.
일부 개발자는 실제 데이터로 기본 html 페이지를 생성하여 크롤링 시 서버 측에서 이러한 페이지를 제공합니다..PhantomJS_escaped_fragment_(은 (Google)을 있기 #!을 가져옵니다.#!에 추가합니다._escaped_fragment_query parameter).상세한 것에 대하여는, 이 블로그를 참조해 주세요.
크롤러는 풍부한 기능을 갖춘 예쁜 스타일의 gui를 필요로 하지 않고 콘텐츠만 보고 싶기 때문에 인간을 위해 작성된 페이지의 스냅숏을 제공할 필요가 없습니다.
내 해결책: 기어다니는 사람이 원하는 것을 주는 것:
기어다니는 사람이 뭘 원하는지 생각하고 그것만 줘야 해.
팁은 등을 만지지 마세요.동일한 API를 사용하여 서버측 전면도를 조금만 추가해 주세요.
언급URL : https://stackoverflow.com/questions/13499040/how-do-search-engines-deal-with-angularjs-applications
'programing' 카테고리의 다른 글
| json gem 설치 방법 - gem 네이티브 확장을 빌드하지 못했습니다(mac 10.10). (0) | 2023.02.28 |
|---|---|
| com.disc.discl.discl을 클릭합니다.shared.discloss.discloss 。운송예외: 알려진 서버에서 요청을 실행할 수 없습니다. (0) | 2023.02.28 |
| JavaScript용 IntelliJ IDEA를 사용하는 최적의 플러그인 및 프로젝트 (0) | 2023.02.28 |
| 제품에 변화가 있는지 확인하는 방법 (0) | 2023.02.28 |
| 스프링 부츠 2.2.0에서는 Springfox swagger가 작동하지 않음 (0) | 2023.02.28 |