Jak korzystać z React.js do SEO?

Artykuły na temat React.js lubią podkreślać, że React.js doskonale nadaje się do celów SEO. Niestety, nigdy nie czytałem, jak to naprawdę robisz. Czy po prostu zaimplementujesz _escaped_fragment_ jak w https://developers.google.com/webmasters/ajax-crawling/docs/getting-started i pozwalasz zrenderować stronę na serwerze, gdy adres URL zawiera _escaped_fragment_, czy jest tam coś więcej?Jak korzystać z React.js do SEO?

Nie można polegać na _escaped_fragment_ byłaby świetna, ponieważ prawdopodobnie nie wszystkie potencjalnie przeszukiwania witryn (np. W funkcjonalnościach współużytkowania) implementują _escaped_fragment_.

Źródło

2015-01-31 sk904861

Uwaga dla przyszłych odwiedzających: [link do artykułu z pytaniem o indeksowanie ajaxa] (https://developers.google.com/webmasters/ajax-crawling/docs/getting-started) połączony w pytaniu jest [oficjalnie uznany za przestarzały z października 2015 r.] (https://webmasters.googleblog.com/2015/10/deprecating-our-ajax-crawling-scheme.html). – falsarella

Jestem prawie pewien, że wszystko, co widziałeś, promując React jako dobre dla SEO, ma związek z możliwością renderowania żądanej strony na serwerze, przed wysłaniem jej do klienta. Zostanie zaindeksowany tak jak każda inna strona statyczna, jeśli chodzi o wyszukiwarki.

Renderowanie serwera możliwe przez ReactDOMServer.renderToString. Użytkownik otrzyma już renderowaną stronę znaczników, którą aplikacja React będzie wykrywać po pobraniu i uruchomieniu. Zamiast zastępowania zawartości po wywołaniu ReactDOM.render, po prostu doda powiązania zdarzeń. Przez resztę wizyty aplikacja React przejmie i kolejne strony zostaną wyświetlone na kliencie.

Jeśli chcesz dowiedzieć się więcej na ten temat, sugeruję wyszukanie "Universal JavaScript" lub "Universal React" (wcześniej nazywanego "reakcją izomorficzną"), ponieważ jest to termin używany w aplikacjach JavaScript, które używają pojedynczego baza kodu do renderowania na serwerze i kliencie.

Źródło

2015-02-01 00:38:53 Jack

Czy to nie oznacza, że utknę na pliku node.js? – tyteen4a03

To tylko oznacza, że musisz odłożyć do węzła, aby renderować znaczniki. Możesz użyć dowolnego języka, w którym chcesz obsługiwać żądania i wyświetlać renderowane znaczniki. – Jack

Nie sądzę, żebyś polegał na NodeJs, możesz odroczyć działanie innych Javascript Engineów, jeśli odpowiednio zaprojektowałeś swoje skrypty. Na przykład w świecie Javy masz dostęp do Nashorn. Eksperymentowałem z wywoływaniem skryptów w pakiecie przy użyciu Nashorn i wydaje się to możliwe. – ctrlplusb

Jak powiedział inny respondent, to, czego szukasz, to podejście izomorficzne. Dzięki temu strona może pochodzić z serwera z renderowaną treścią, która zostanie przeanalizowana przez wyszukiwarki. Jak wspomniał inny komentator, może to sprawiać wrażenie, że utknąłeś przy użyciu node.js jako języka po stronie serwera. Choć prawdą jest, że do uruchomienia tej funkcji wymagany jest javascript na serwerze, nie musisz robić wszystkiego w węźle. Na przykład w tym artykule omówiono, jak osiągnąć izomorficznymi stronę używając Scala i reagować:

https://thebhwgroup.com/blog/isomorphic-web-design-react-scala

Artykuł ten przedstawia również UX i SEO korzyści z tego rodzaju izomorficzna podejścia.

Źródło

2015-06-29 19:52:16 PFranchise

https://thebhwgroup.com/blog/isomorphic-web-design-react-scala to doskonały link. Szczegółowe wprowadzenie jest istotne dla wszystkich (nie tylko scala). –

Dwa ładne przykładowe realizacje:

https://github.com/erikras/react-redux-universal-hot-example: Używa Redux, mój ulubiony ramy zarządzania stanem aplikacji
https://github.com/webpack/react-starter: Używa Flux, i ma bardzo skomplikowaną konfigurację WebPACK.

Spróbuj odwiedzić https://react-redux.herokuapp.com/ z javascript włączyć i wyłączyć, a następnie oglądać sieci w dev narzędzi przeglądarki, aby zobaczyć różnicę ...

Źródło

2015-09-05 09:34:27 w00t

Podaj swoje przemyślenia na temat tego przykręcanego talerza https://github.com/Atyantik/react-pwa –

@AjayPatel wygląda dobrze, uzyskałby jeszcze lepsze wyniki, gdyby przykładowa strona nie załadowała google analytics i reklam ... – w00t

dobrze to tylko przykład zarządzania GTM. Nie dodaliśmy do tego sensu reklamy. –

Jest również możliwe poprzez ReactDOMServer.renderToStaticMarkup:

podobne do renderToString , z wyjątkiem tego, że nie tworzy dodatkowych atrybutów DOM , takich jak data-react-id, które React używa wewnętrznie. Jest to użyteczne, jeśli chcesz użyć React jako prostego generatora stron statycznych, ponieważ pozbycie się dodatkowych atrybutów może zaoszczędzić mnóstwo bajtów.

Źródło

2016-05-03 18:18:08 falsarella

Przykładem tego użycia jest [reaktor-statyczny-kocioł] (https://github.com/koistya/react-static-boilerplate) (patrz [tools/render.js] (https://github.com/koistya /react-static-boilerplate/blob/master/tools/render.js#L43), wiersz 43). – falsarella

Inny przykład można znaleźć w [Renderowanie po stronie serwera z reakcją] (https://camjackson.net/post/server-side-rendering-with-react). – falsarella

Będę musiał się nie zgodzić z wieloma odpowiedziami, ponieważ udało mi się sprawić, by moja aplikacja React po stronie klienta działała z googlebotem bez absolutnie bez SSR.

Spójrz na SO answer here. Udało mi się go uruchomić dopiero niedawno, ale mogę potwierdzić, że nie ma żadnych problemów, a googlebot może faktycznie wykonywać wywołania API i indeksować zwróconą zawartość.

Źródło

2017-07-18 01:41:06 WillHua

Sprawdź to na płycie kotła, w której mamy włączone funkcje takie jak SSR, PWA, Code Spliting wszystkie funkcje z myślą o SEO. https://github.com/Atyantik/react-pwa/ –

Nie musisz nic robić, jeśli zależy Ci na pozycji witryny w Google, ponieważ robot Google może bardzo dobrze obsługiwać JavaScript! Możesz sprawdzić wynik SEO swojej strony przez wyszukiwanie site:your-site-url.

Jeśli również dbają o pozycjonowanie witryny, takich jak Baidu i twojej stronie sever realizowanego przez PHP, może trzeba to: react-php-v8js.

Źródło

2017-11-09 02:46:46 Alan

Jak korzystać z React.js do SEO?

Odpowiedz

Powiązane problemy