Jednym z wyzwań związanych z przeniesieniem logiki aplikacji z backendu (Rails, Django lub w ogóle) na nową granicę frameworków WWW JS, takich jak AngularJS i EmberJS, jest sposób, w jaki można uczynić je przyjaznymi dla SEO, ponieważ te aplikacje JavaScript są wysyłane do przeglądarki przez twój serwer WWW jako 200 OK, bez względu na to, czy po uruchomieniu aplikacji strona, która jest reprezentowana, nie zostanie znaleziona lub ma określone metatagi, takie jak tytuł i opis.
Na przykład, jak wygląda typowa sekcja HEAD w kodzie kątowym HTML:
1 2 3 4 5 6 7 8 9 10 <head> <meta charset = "utf-8"> <title> {{pageTitle}} </title> <meta name = "keywords" content = "{{metaKeywords}} "> <meta name =" description "content =" {{metaDescription}} "> <link type =" image / x-icon "data-ng-href =" https://example.org/favicon.ico "rel = "ikona skrótu"> <link rel = "arkusz stylów" href = "https://example.org/screen.css"> </head>
Jak widzisz, tytuł strony, który jest używany przez SE jako Google jako główny tekst twoich zindeksowanych stron, jest zwykłym symbolem zastępczym dla zmiennej, która pojawia się po uruchomieniu frameworka JS i wykonywaniu własnej logiki, co ostatecznie prowadzi do wyników SERP, takich jak to:
Jak więc upewnisz się, że wyszukiwarki rzeczywiście zobaczą post-przetworzony HTML, a nie pierwszy, który zostanie wysłany z twojego serwera?
Masz przynajmniej kilka różnych rozwiązań, które używają tej samej podstawowej metody.
Kiedyś obawiano się, że maskowanie to jedyny sposób
Praktyka maskowanie był karany przez wyszukiwarki od lat, ale okazał się zatwierdzony przez Google kiedy masz aplikacje oparte na JS.
Zasadniczo polega ona na udostępnieniu wyszukiwarce innej wersji strony internetowej, która została już wyrenderowana, zamiast tej, która służy zwykłemu odwiedzającemu, który musi uruchomić framework JS w przeglądarce.
Przepływ pracy jest bardzo prosty: zamiast obsługiwać z poziomu serwera WWW tradycyjną aplikację, która służy zwykłemu użytkownikowi, w przypadku bota po prostu przesyłasz żądanie do innej aplikacji , która zażąda oryginalnej strony, poczekaj na nią renderować za pomocą przeglądarki bezgłowej, takiej jak PhantomJS a następnie odsyła w pełni wyrenderowaną zawartość do bota:
Jest to bardzo prosty sposób na efektywne wdrożenie SEO w aplikacjach JS i można to osiągnąć za pomocą kilku narzędzi, zamiast pisać całość na własną rękę.
BromBone
BromBone to usługa, która indeksuje mapę witryny, generuje migawkę renderowanego HTML, przechowuje ją na Amazon (prawdopodobnie S3 ) i uwalnia cię od bólu związanego z samodzielnym konfigurowaniem aplikacji SEO oprogramowania pośredniego.
Zasadniczo działa jak aplikacja SEO widoczna na obrazku, ale zamiast renderować strony w locie, robi to, patrząc na mapę witryny: gdy bot trafi na serwer WWW, możesz go proxy na stronie BromBone, aby uzyskać rzeczywista odpowiedź z serwera.
Mimo że usługa jest bardzo przystępne poleganie na mapie witryny jest trochę skomplikowane, ponieważ… cóż… co się stanie, jeśli masz nowe strony, które nie są uwzględnione w mapie witryny?
Po wpadnięciu na ten wymóg, my w Namshi postanowiliśmy wybrać coś innego.
Prerender
Prerender jest zarówno SaaS, jak i biblioteka open source to poprzedza strony w locie za pomocą PhantomJS i innych fajnych sztuczek udostępniać poprawne kody statusu i nagłówki HTTP .
Jedyną wadą renderowania w locie jest to, że bot będzie musiał poczekać trochę dłużej, aby uzyskać odpowiedź, a to może skutkować penalizacją wyszukiwarek: rozwiązanie jest bardzo proste, ponieważ można po prostu rozgrzać prerender buforuj samodzielnie, naciskając adresy URL, które chcesz buforować. Aby odświeżyć pamięć podręczną, Prerender pozwala wykonywać żądania POST, dzięki czemu:
- żądanie GET do http://prerender.example.org/http://example.org/foo.html spowoduje wykonanie strony w locie, dzięki czemu będziesz mógł buforować przyszłe żądania prawdziwych botów
- żądanie POST do http://prerender.example.org/http://example.org/foo.html odświeży wstępnie przygotowaną treść
Prerender daje ci trochę więcej swobody w porównaniu do Brombone, ale wymaga od ciebie trochę pracy ręcznej, przynajmniej jeśli chcesz uruchomić ją na własnych serwerach bez korzystania z ich rozwiązania jako SaaS; w każdym razie ich tryby cenowe to bardzo przystępne także.
Co mam użyć?
Ogólnie rzecz biorąc, dobrą rzeczą jest to, że w 2014 roku możemy wreszcie powiedzieć, że tworzenie przyjaznych dla SEO aplikacji JavaScript nie jest już problemem!
Co mam użyć?
