Pregunta ¿Cómo manejan los motores de búsqueda las aplicaciones de AngularJS?


Veo dos problemas con la aplicación AngularJS con respecto a los motores de búsqueda y SEO:

1) ¿Qué sucede con las etiquetas personalizadas? ¿Los motores de búsqueda ignoran todo el contenido dentro de esas etiquetas? es decir, supongo que tengo

<custom>
  <h1>Hey, this title is important</h1>
</custom>

haría <h1> ser indexado a pesar de estar dentro de las etiquetas personalizadas?


2) ¿Hay alguna manera de evitar los motores de búsqueda de la indexación {{}} se une literalmente? es decir

<h2>{{title}}</h2>

Sé que podría hacer algo como

<h2 ng-bind="title"></h2>

pero, ¿y si realmente quiero que el rastreador "vea" el título? ¿La representación del servidor es la única solución?


684
2017-11-21 17:44


origen


Respuestas:


Actualización mayo de 2014

Rastreadores de Google ahora ejecuta javascript - puedes usar el Google Webmaster Tools para comprender mejor cómo Google representa sus sitios.

Respuesta original
Si desea optimizar su aplicación para los motores de búsqueda, desafortunadamente no hay forma de que sirva una versión pre-renderizada al rastreador. Puede leer más acerca de las recomendaciones de Google para ajax y sitios pesados ​​de javascript. aquí.

Si esta es una opción, recomendaría leer Este artículo acerca de cómo hacer SEO para Angular con representación del lado del servidor.

No estoy seguro de qué hace el rastreador cuando encuentra etiquetas personalizadas.


398
2017-11-23 00:17



Use PushState y Precomposition

La forma actual (2015) de hacer esto es usar el método JavaScript pushState.

PushState cambia la URL en la barra superior del navegador sin volver a cargar la página. Supongamos que tiene una página que contiene pestañas. Las pestañas ocultan y muestran contenido, y el contenido se inserta dinámicamente, ya sea usando AJAX o simplemente configurando display: none y display: block para ocultar y mostrar el contenido correcto de la pestaña.

Cuando se hace clic en las pestañas, use pushState para actualizar la url en la barra de direcciones. Cuando se procesa la página, use el valor en la barra de direcciones para determinar qué pestaña mostrar. El enrutamiento angular hará esto por usted automáticamente.

Precomposición

Hay dos formas de presionar una aplicación de una sola página de PushState (SPA)

  1. A través de PushState, donde el usuario hace clic en un enlace PushState y el contenido está AJAXed.
  2. Al golpear la URL directamente.

El golpe inicial en el sitio implicará golpear la URL directamente. Los hits subsecuentes simplemente serán AJAX en el contenido cuando PushState actualice la URL.

Los rastreadores cosechan enlaces de una página y luego los agregan a una cola para su posterior procesamiento. Esto significa que para un rastreador, cada golpe en el servidor es un golpe directo, no navegan a través de Pushstate.

La precomposición agrupa la carga útil inicial en la primera respuesta del servidor, posiblemente como un objeto JSON. Esto permite que el motor de búsqueda represente la página sin ejecutar la llamada AJAX.

Existe alguna evidencia que sugiere que Google podría no ejecutar solicitudes AJAX. Más sobre esto aquí:

https://web.archive.org/web/20160318211223/http://www.analog-ni.co/precomposing-a-spa-may-become-the-holy-grail-to-seo

Los motores de búsqueda pueden leer y ejecutar JavaScript

Google ha podido analizar JavaScript desde hace un tiempo, es por eso que originalmente desarrolló Chrome, para actuar como un navegador sin funciones con todas las funciones para la araña de Google. Si un enlace tiene un atributo href válido, la nueva URL puede indexarse. No hay nada más que hacer.

Si al hacer clic en un enlace también se activa una llamada pushState, el usuario puede navegar por el sitio a través de PushState.

Soporte de motor de búsqueda para URL de PushState

PushState es actualmente compatible con Google y Bing.

Google

Aquí está Matt Cutts respondiendo a la pregunta de Paul Irish sobre PushState para SEO:

http://youtu.be/yiAF9VdvRPw

Aquí está Google anunciando el soporte completo de JavaScript para la araña:

http://googlewebmastercentral.blogspot.de/2014/05/understanding-web-pages-better.html

El resultado es que Google admite PushState e indexará las URL de PushState.

Consulte también buscar herramientas Google webmaster como Googlebot. Verás que se ejecuta tu JavaScript (incluido Angular).

Bing

Aquí está el anuncio de Bing de soporte para bonitas URL de PushState con fecha de marzo de 2013:

http://blogs.bing.com/webmaster/2013/03/21/search-engine-optimization-best-practices-for-ajax-urls/

¡No use HashBangs #!

Las URL de Hashbang eran un feo obstáculo que requería que el desarrollador proporcionara una versión pre-renderizada del sitio en una ubicación especial. Aún funcionan, pero no es necesario que los uses.

Las URL de Hashbang se ven así:

domain.com/#!path/to/resource

Esto se emparejaría con una metaetiqueta como esta:

<meta name="fragment" content="!">

Google no los indexará de esta forma, sino que extraerá una versión estática del sitio de la _escaped_fragments_ URL e indexará eso.

Las URL de Pushstate se parecen a cualquier URL ordinaria:

domain.com/path/to/resource

La diferencia es que Angular las maneja interceptando el cambio a document.location que trata de él en JavaScript.

Si desea utilizar las URL de PushState (y probablemente lo haga) elimine todas las viejas URL y metatags de estilo hash y simplemente active el modo HTML5 en su bloque de configuración.

Probando su sitio

Las herramientas para webmasters de Google ahora contienen una herramienta que le permitirá buscar una URL como google y renderizar JavaScript a medida que Google lo presente.

https://www.google.com/webmasters/tools/googlebot-fetch

Generando URL PushState en Angular

Para generar URL reales en Angular, en lugar de # con prefijo, configure el modo HTML5 en su objeto $ locationProvider.

$locationProvider.html5Mode(true);

Lado del servidor

Dado que está utilizando URL reales, deberá asegurarse de que el servidor envíe la misma plantilla (más contenido precompuesto) para todas las URL válidas. La forma en que lo haga variará según la arquitectura de su servidor.

Mapa del sitio

Su aplicación puede usar formas de navegación inusuales, por ejemplo, desplazarse o desplazarse. Para garantizar que Google pueda conducir su aplicación, probablemente le sugiera que cree un mapa del sitio, una lista simple de todas las direcciones URL a las que responde su aplicación. Puede colocar esto en la ubicación predeterminada (/ sitemap o /sitemap.xml), o contarle a Google sobre esto usando herramientas de webmaster.

Es una buena idea tener un mapa del sitio de todos modos.

Soporte del navegador

Pushstate funciona en IE10. En navegadores más antiguos, Angular recurrirá automáticamente a las URL de estilo hash

Una página de demostración

El siguiente contenido se representa utilizando una URL de estado de empuje con precomposición:

http://html5.gingerhost.com/london

Como se puede verificar, en este enlace, el contenido está indexado y aparece en Google.

Sirviendo códigos de estado de encabezado 404 y 301

Debido a que el motor de búsqueda siempre llegará a su servidor para cada solicitud, puede servir códigos de estado de encabezado desde su servidor y esperar que Google los vea.


470
2018-04-23 13:10



Seamos definitivos sobre AngularJS y SEO

Google, Yahoo, Bing y otros motores de búsqueda rastrean la web de forma tradicional utilizando rastreadores tradicionales. Ellos corren robots que rastrea el HTML en las páginas web, recopilando información a lo largo del camino. Mantienen palabras interesantes y buscan otros enlaces a otras páginas (estos enlaces, la cantidad de ellos y el número de ellos entran en juego con el SEO).

Entonces, ¿por qué los motores de búsqueda no manejan los sitios javascript?

La respuesta tiene que ver con el hecho de que los robots de los motores de búsqueda funcionan a través de navegadores sin cabeza y lo hacen a menudo no tener un motor de renderizado javascript para renderizar el javascript de una página. Esto funciona para la mayoría de las páginas, ya que a la mayoría de las páginas estáticas no les importa que JavaScript represente su página, ya que su contenido ya está disponible.

¿Qué se puede hacer al respecto?

Afortunadamente, los rastreadores de los sitios más grandes han comenzado a implementar un mecanismo que nos permite rastrear nuestros sitios de JavaScript, pero requiere que implementemos un cambio en nuestro sitio.

Si cambiamos nuestro hashPrefix ser #! en lugar de simplemente #, los modernos motores de búsqueda cambiarán la solicitud de uso _escaped_fragment_ en lugar de #!. (Con el modo HTML5, es decir, donde tenemos enlaces sin el prefijo hash, podemos implementar esta misma función mirando el User Agent encabezado en nuestro backend).

Es decir, en lugar de una solicitud de un navegador normal que se ve así:

http://www.ng-newsletter.com/#!/signup/page

Un motor de búsqueda buscará en la página con:

http://www.ng-newsletter.com/?_escaped_fragment_=/signup/page

Podemos establecer el prefijo de hash de nuestras aplicaciones angulares utilizando un método integrado de ngRoute:

angular.module('myApp', [])
.config(['$location', function($location) {
  $location.hashPrefix('!');
}]);

Y, si estamos usando html5Mode, tendremos que implementar esto usando la metaetiqueta:

<meta name="fragment" content="!">

Recordatorio, podemos configurar el html5Mode() con el $location Servicio:

angular.module('myApp', [])
.config(['$location', 
function($location) {
  $location.html5Mode(true);
}]);

Manejando el motor de búsqueda

Tenemos muchas oportunidades para determinar cómo lidiaremos con la entrega de contenido a los motores de búsqueda como HTML estático. Podemos alojar un servidor nosotros mismos, podemos usar un servicio para alojar un back-end para nosotros, podemos usar un proxy para entregar el contenido, etc. Veamos algunas opciones:

Autohospedado

Podemos escribir un servicio para manejar el rastreo de nuestro propio sitio usando un navegador sin cabeza, como phantomjs o zombiejs, tomando una instantánea de la página con datos renderizados y almacenándola como HTML. Cada vez que vemos la cadena de consulta ?_escaped_fragment_en una solicitud de búsqueda, podemos entregar la instantánea HTML estática que tomamos de la página en lugar de la página pretratada a través de solo JS. Esto requiere que tengamos un backend que entregue nuestras páginas con una lógica condicional en el medio. Podemos usar algo como prerender.io's backend como punto de partida para ejecutar esto nosotros mismos. Por supuesto, todavía tenemos que manejar el proxy y el manejo de fragmentos, pero es un buen comienzo.

Con un servicio pagado

La forma más fácil y rápida de obtener contenido en el motor de búsqueda es usar un servicio Brombone, seo.js, seo4ajaxy prerender.io son buenos ejemplos de estos que albergarán la representación de contenido anterior para usted. Esta es una buena opción para los momentos en los que no queremos tratar con la ejecución de un servidor / proxy. Además, generalmente es súper rápido.

Para obtener más información acerca de Angular y SEO, escribimos un extenso tutorial sobre esto en http://www.ng-newsletter.com/posts/serious-angular-seo.html  y lo detallamos aún más en nuestro libro ng-book: El libro completo en AngularJS. Compruébalo en ng-book.com.


106
2017-12-24 20:05



Deberías echarle un vistazo al tutorial sobre la construcción de un sitio AngularJS compatible con SEO en el año del blog moo. Él lo guiará a través de todos los pasos descritos en la documentación de Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Con esta técnica, el motor de búsqueda ve el HTML expandido en lugar de las etiquetas personalizadas.


56
2017-11-27 21:55



Esto ha cambiado drásticamente.

http://searchengineland.com/bing-offers-recommendations-for-seo-friendly-ajax-suggests-html5-pushstate-152946

Si utiliza: $ locationProvider.html5Mode (true); estás listo.

No más páginas de renderizado.


41
2018-02-19 22:35



Las cosas han cambiado bastante desde que se hizo esta pregunta. Ahora hay opciones para permitir que Google indexe su sitio AngularJS. La opción más fácil que encontré fue usar http://prerender.io servicio gratuito que generará las páginas cronables para usted y lo servirá a los motores de búsqueda. Es compatible con casi todas las plataformas web del servidor. Recientemente comencé a usarlos y el soporte también es excelente.

No tengo ninguna afiliación con ellos, esto proviene de un usuario feliz.


17
2017-11-26 16:25



El propio sitio web de Angular sirve contenido simplificado a los motores de búsqueda: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Digamos que su aplicación Angular está consumiendo una api de JSON Node.js / Express-driven, como /api/path/to/resource. Quizás podría redirigir cualquier solicitud con ?_escaped_fragment_ a /api/path/to/resource.html, y use negociación de contenido para representar una plantilla HTML del contenido, en lugar de devolver los datos JSON.

Lo único es que sus rutas Angulares deberían coincidir 1: 1 con su API REST.

EDITAR: Me doy cuenta de que esto tiene el potencial de enturbiar tu API de REST y no recomiendo hacerlo fuera de casos de uso muy simples donde podría ser un ajuste natural.

En su lugar, puede usar un conjunto de rutas y controladores completamente diferentes para su contenido amigable con los robots. Pero luego estás duplicando todas tus rutas y controladores AngularJS en Node / Express.

Me he decidido a generar instantáneas con un navegador sin cabeza, a pesar de que siento que es un poco menos que ideal.


9
2017-11-21 01:25



Una buena práctica se puede encontrar aquí:

http://scotch.io/tutorials/javascript/angularjs-seo-with-prerender-io?_escaped_fragment_=tag


8
2018-03-16 13:56