각도 사전 컴포지션으로 Google에 페이지 제목을 표시하는 방법은 무엇입니까?

슈퍼 루미 너리 응답 here을 기반으로 Hashbangs 및 html5Mode (true)가없는 Angular 1 앱을 설정했으며 Google을 사용하여 javascript를 실행합니다. 페이지가 Google에 의해 색인 생성 중이지만 동적 제목 및 설명 태그는 색인 생성되지 않습니다.각도 사전 컴포지션으로 Google에 페이지 제목을 표시하는 방법은 무엇입니까?

내 index.html을 헤드는 다음

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <base href="/"> 

    <meta name="author" content="me"> 
    <meta name="robots" content="index,follow"> 

    <title ng-bind="meta.title">Temp Title</title> 
    <meta name="description" content="{{meta.description}}"> 

    <!-- Scripts & CSS --> 
</head>

제목과 설명이 제대로로드하지만 Google에서 표시되지 않습니다.

어떻게하면됩니까?

이 기술은 Facebook 및 기타 소셜 네트워크에서도 작동합니까? 고맙습니다.

출처

2017-03-21 belyid

아마도 사전 크롤러 용 페이지를 렌더링하는 것이 더 효과적 일 수 있지만 더 쉬운 방법이 있는지 알고 싶습니다. – neptune

@neptune 예 그 접근법을 피하고 SEO 친화적 인 SPA로 끝낼 수 있는지 평가하려고합니다. – belyid

사실 superluminary 응답 here 솔루션을 갖는다. HTML 페이지 머리글은 서버가 완전히 확인하여 보내야합니다.

그래서이 솔루션을 사용하려면 서버 측에서 각도 경로를 복제하고 정보를 보내야합니다. 각도 대신 웹 사이트를 직접 가져옵니다 히트를

<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 

    <base href="/"> 

    <meta name="robots" content="index,follow"> 

    <script type="text/javascript"> 
     window.title = <%- JSON.stringify(precomposition) %>.title; 
    </script> 

    <title ng-bind="title"><%= precomposition.title %></title> 
    <meta name="description" content="<%= precomposition.description %>"> 
    <!-- More meta information --> 
    <!-- Scripts & CSS --> 
</head>

이제 때 (처음 서버에서 해결 대신 나는 또한 .ejs로 변경하고 일반 HTML보기를 사용

이 같은 것으로 헤더를 변경 내가 요청 서버 측 처리 크롤러 항상 케이스) :

//Express route 
app.route('/').get(precomposition.render); 

//precomposition 
exports.render = function (req, res) { 
    const precomposition = {title: 'tile', description: 'description'}; 
    res.locals.precomposition = precomposition; 
    res.render('index.ejs'); 
};

는 다른 정보가 사용자에게 표시되지 않기 때문에 각도가 (제목 업데이트를 처리하는 직접 충돌하지 않은 경우).

물론 몇 가지 단점이 있지만 Google은 2015 년 10 월 이래로이 방법을 "_escaped_fragment_ URLs"대신에 권장합니다. 또한 유령 프리 렌더링보다 훨씬 적은 리소스를 소비하고 유료 환경보다 저렴하다고 생각합니다.

출처

2017-05-02 12:52:21 belyid

왜 그런 식으로 사용하지 않습니까?

https://github.com/steeve/angular-seo

출처

2017-03-21 14:09:04 dgomez

그 방법을 피하고 SEO 친화적 인 SPA로 끝낼 수 있는지 평가하려고합니다. – belyid

각도 사전 컴포지션으로 Google에 페이지 제목을 표시하는 방법은 무엇입니까?

답변

관련 문제