Bagaimana cara mesin pencari menangani aplikasi AngularJS?


697

Saya melihat dua masalah dengan aplikasi AngularJS mengenai mesin pencari dan SEO:

1) Apa yang terjadi dengan tag khusus? Apakah mesin pencari mengabaikan seluruh konten di dalam tag itu? misalkan saya punya

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

akan <h1>diindeks meskipun berada di dalam tag khusus?


2) Apakah ada cara untuk menghindari mesin pencari mengindeks {{}} mengikat secara harfiah? yaitu

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

Saya tahu saya bisa melakukan sesuatu seperti

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

tetapi bagaimana jika saya ingin membiarkan crawler "melihat" judulnya? Apakah rendering sisi-server adalah satu-satunya solusi?


17
semua "solusi" ini hanya membuat saya ingin menjauh dari teknologi seperti AngularJS, setidaknya sampai google dan semua memiliki perayap yang lebih cerdas.
Codemonkey

22
@Codemonkey: Ya orang akan bertanya-tanya mengapa dari semua AngularJS yang merupakan produk Google belum datang dengan solusi bawaan untuk ini .. Sebenarnya aneh ..
Roy MJ

11
Sebenarnya, Misko menulis Angular sebelum dia bekerja untuk Google. Google sekarang mensponsori proyek, tetapi mereka bukan pencetusnya.
superluminary

2
Mungkin seseorang di sini dapat / harus memperbarui artikel Wikipedia tentang SPA yang menyatakan "SPA umumnya tidak digunakan dalam konteks di mana pengindeksan mesin pencari merupakan persyaratan, atau diinginkan." en.wikipedia.org/wiki/Single-page_application [# Optimasi mesin pencari] Ada paragraf besar tentang kerangka kerja berbasis java (tidak dikenal) yang disebut IsNat tetapi tidak ada saran bahwa SEO telah ditangani oleh orang-orang seperti Angularjs.
linojon

3
@Roy MJ - Mengapa tidak ada yang melihat niatnya? PageSpeed, Angular, dll. Semuanya adalah musuh alami, daftar organik di SERPs. Sengaja. Ketika Anda memiliki model bisnis besar berdasarkan Bayar-Per-Klik ... bagaimana lebih baik memaksa orang membayar untuk daftar mereka daripada membuat seluruh kotak alat yang tidak akan memberi mereka pilihan, tetapi melakukannya? Alih-alih membangun situs web berkualitas yang diisi dengan konten berharga, industri ini sekarang dipenuhi dengan cheat dan solusi yang tidak mencapai atau menyelesaikan squat secara cerdik.
Steven Ventimiglia

Jawaban:


403

Perbarui Mei 2014

Google crawler sekarang mengeksekusi javascript - Anda dapat menggunakan Google Webmaster Tools untuk lebih memahami bagaimana situs Anda di-render oleh Google.

Jawaban asli
Jika Anda ingin mengoptimalkan aplikasi Anda untuk mesin pencari, sayangnya tidak ada jalan lain untuk menyajikan versi yang dirender ke crawler. Anda dapat membaca lebih lanjut tentang rekomendasi Google untuk situs berat ajax dan javascript di sini .

Jika ini merupakan opsi, saya akan merekomendasikan membaca artikel ini tentang bagaimana melakukan SEO untuk Angular dengan rendering sisi server.

Saya tidak yakin apa yang dilakukan perayap ketika menemukan tag khusus.


13
Ini tidak lagi berlaku. Anda sekarang harus menggunakan pushState sebagai gantinya. Tidak perlu melayani versi statis situs yang terpisah.
superluminary

3
bahkan dengan pembaruan google, ng-view tidak akan di-render dengan benar, seperti yang saya lihat di Google Webmaster tools
tschiela

10
Ya hanya karena mereka mengeksekusi javascript tidak berarti bahwa halaman Anda akan diindeks dengan benar. Cara teraman adalah mendeteksi agen pengguna google bot, gunakan browser tanpa kepala seperti phantomjs, dapatkan page.contentdan kembalikan html statis.
tester

6
Saya menyadari pertanyaan ini khusus untuk SEO, tetapi perlu diingat bahwa perayap lain (Facebook, Twitter, dll.) Belum dapat mengevaluasi JavaScript. Berbagi halaman di situs media sosial, misalnya, masih akan menjadi masalah tanpa strategi rendering sisi server.
Stephen Watkins

3
Tolong, bisakah seseorang memberikan contoh situs AngularJS diindeks dengan benar tanpa menerapkan spesifikasi skema perayapan Google?
check_ca

470

Gunakan PushState dan Precomposition

Cara saat ini (2015) untuk melakukan ini adalah menggunakan metode JavaScript pushState.

PushState mengubah URL di bilah browser atas tanpa memuat ulang halaman. Katakanlah Anda memiliki halaman yang berisi tab. Tab menyembunyikan dan menampilkan konten, dan konten dimasukkan secara dinamis, baik menggunakan AJAX atau hanya dengan mengatur tampilan: tidak ada dan menampilkan: blokir untuk menyembunyikan dan menampilkan konten tab yang benar.

Ketika tab diklik, gunakan pushState untuk memperbarui url di bilah alamat. Saat halaman diberikan, gunakan nilai di bilah alamat untuk menentukan tab mana yang akan ditampilkan. Perutean sudut akan melakukan ini untuk Anda secara otomatis.

Prekomposisi

Ada dua cara untuk menekan Aplikasi Halaman Tunggal PushState (SPA)

  1. Melalui PushState, di mana pengguna mengklik tautan PushState dan kontennya adalah AJAX.
  2. Dengan menekan URL secara langsung.

Hit awal di situs akan melibatkan pemukulan URL secara langsung. Hit berikutnya hanya akan AJAX dalam konten sebagai PushState memperbarui URL.

Crawler memanen tautan dari sebuah halaman kemudian menambahkannya ke antrian untuk diproses lebih lanjut. Ini berarti bahwa untuk perayap, setiap klik di server adalah klik langsung, mereka tidak menavigasi melalui Pushstate.

Precomposition bundel muatan awal menjadi respons pertama dari server, mungkin sebagai objek JSON. Ini memungkinkan Mesin Pencari untuk merender halaman tanpa mengeksekusi panggilan AJAX.

Ada beberapa bukti yang menunjukkan bahwa Google mungkin tidak menjalankan permintaan AJAX. Lebih lanjut tentang ini di sini:

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

Mesin Pencari dapat membaca dan menjalankan JavaScript

Google telah dapat mem-parsing JavaScript untuk beberapa waktu sekarang, itu sebabnya mereka awalnya mengembangkan Chrome, untuk bertindak sebagai browser tanpa kepala berfitur lengkap untuk spider Google. Jika tautan memiliki atribut href yang valid, URL baru dapat diindeks. Tidak ada lagi yang harus dilakukan.

Jika mengklik tautan sebagai tambahan memicu panggilan pushState, situs dapat dinavigasi oleh pengguna melalui PushState.

Dukungan Mesin Pencari untuk URL PushState

PushState saat ini didukung oleh Google dan Bing.

Google

Berikut Matt Cutts menanggapi pertanyaan Paul Irish tentang PushState untuk SEO:

http://youtu.be/yiAF9VdvRPw

Ini Google yang mengumumkan dukungan penuh JavaScript untuk laba-laba:

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

Hasilnya adalah bahwa Google mendukung PushState dan akan mengindeks URL PushState.

Lihat juga alat Google webmaster sebagai Googlebot. Anda akan melihat JavaScript Anda (termasuk Angular) dieksekusi.

Bing

Berikut ini pengumuman dukungan Bing untuk URL PushState cantik bertanggal Maret 2013:

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

Jangan gunakan HashBangs #!

URL Hashbang adalah pengganti sementara jelek yang mengharuskan pengembang untuk menyediakan versi situs yang dirender sebelumnya di lokasi khusus. Mereka masih berfungsi, tetapi Anda tidak perlu menggunakannya.

URL Hashbang terlihat seperti ini:

domain.com/#!path/to/resource

Ini akan dipasangkan dengan metatag seperti ini:

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

Google tidak akan mengindeks mereka dalam formulir ini, tetapi sebaliknya akan menarik versi statis situs dari URL _escaped_fragments_ dan mengindeksnya.

URL pushstate terlihat seperti URL biasa:

domain.com/path/to/resource

Perbedaannya adalah bahwa Angular menanganinya untuk Anda dengan mencegat perubahan ke document.location menghadapinya dalam JavaScript.

Jika Anda ingin menggunakan URL PushState (dan mungkin Anda lakukan), keluarkan semua URL gaya lama dan metatag dan cukup aktifkan mode HTML5 di blok konfigurasi Anda.

Menguji situs Anda

Alat Google Webmaster sekarang berisi alat yang akan memungkinkan Anda untuk mengambil URL sebagai google, dan merender JavaScript saat Google membuatnya.

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

Menghasilkan URL PushState di Angular

Untuk menghasilkan URL nyata di Angular, bukan # yang diawali, setel mode HTML5 pada objek $ locationProvider Anda.

$locationProvider.html5Mode(true);

Sisi server

Karena Anda menggunakan URL sungguhan, Anda harus memastikan templat yang sama (ditambah beberapa konten yang sudah dikomposisi sebelumnya) dikirimkan oleh server Anda untuk semua URL yang valid. Cara Anda melakukannya bervariasi tergantung pada arsitektur server Anda.

Peta Situs

Aplikasi Anda dapat menggunakan bentuk navigasi yang tidak biasa, misalnya melayang atau gulir. Untuk memastikan Google dapat mendorong aplikasi Anda, saya mungkin menyarankan untuk membuat peta situs, daftar sederhana semua url yang ditanggapi aplikasi Anda. Anda dapat menempatkan ini di lokasi default (/ sitemap atau /sitemap.xml), atau memberi tahu Google tentang hal itu menggunakan alat webmaster.

Lagipula itu ide yang bagus untuk memiliki sitemap.

Dukungan browser

Pushstate berfungsi di IE10. Di browser yang lebih lama, Angular akan secara otomatis kembali ke URL gaya hash

Halaman demo

Konten berikut ini dirender menggunakan URL pushstate dengan prasyarat:

http://html5.gingerhost.com/london

Seperti yang dapat diverifikasi, pada tautan ini , konten diindeks dan muncul di Google.

Melayani 404 dan 301 kode status Header

Karena mesin pencari akan selalu menekan server Anda untuk setiap permintaan, Anda dapat menayangkan kode status tajuk dari server Anda dan mengharapkan Google melihatnya.


Saya harus melihat ini - terima kasih atas penjelasannya. Satu hal yang terus saya tanyakan adalah, apakah google sekarang menjalankan javascript sebelum mengindeks halaman?
jvv

1
"PushState mengubah URL di bilah peramban atas tanpa memuat ulang laman ... Saat tab diklik, gunakan pushState untuk memperbarui url di bilah alamat. Saat laman dirender, gunakan nilai di bilah alamat untuk menentukan mana tab untuk ditampilkan. Perutean sudut akan melakukan ini untuk Anda secara otomatis. " Bolam!
atconway

1
@superluminary, bisakah Anda menjelaskan subjek sedikit lebih dalam? Terutama bagian 'Sisi server'. Saya menggunakan angularjs + angularjs-route + locationProvider.html5Mode + api + navigasi dinamis (bukan yang statis seperti pada html5.gingerhost.com. URL ditampilkan dengan baik, namun kontennya tampaknya tidak diindeks. Apakah saya harus entah bagaimana menyajikan konten statis ketika mengakses halaman dengan url langsung? Saya sebenarnya bingung dengan pesan ini: >> Anda perlu memastikan template yang sama dikirimkan oleh server Anda untuk semua URL yang valid. Bisakah Anda jelaskan? Terima kasih di muka
Sray

1
@sray - Jika setiap URL di situs Anda menyajikan template yang sama, browser akan dapat mengambil template tersebut, dan Angular akan dapat mengambilnya dari sana, dengan memeriksa URL dan merender konten yang benar. Jika memukul URL itu langsung di server mengembalikan 404 atau 500 maka Anda memiliki masalah, tautan langsung tidak akan berfungsi, bookmark tidak akan berfungsi dan Anda tidak akan diindeks. Apakah kamu melihat sekarang?
superluminary

1
@ user3339411 - Anda harus memiliki satu URL untuk setiap halaman yang akan ditanggapi oleh situs Anda. Jika situs Anda hanya perlu menanggapi satu URL dengan satu set konten, Anda tidak memerlukan perutean sama sekali. Ini bagus untuk situs sederhana. Namun jika situs Anda membawa data yang berbeda (melalui JSON) untuk URL yang berbeda, masuk akal untuk menggunakan perutean. Karena halaman statis Github berbasis file, Anda memerlukan file html aktual yang mendukung setiap URL dalam contoh ini. Tidak ada aturan bahwa suatu situs web harus berbasis file, dan jika Anda menggunakan platform alternatif, Anda dapat menyajikan template yang sama untuk beberapa URL.
superluminary

107

Mari kita definitif tentang AngularJS dan SEO

Google, Yahoo, Bing, dan mesin pencari lainnya merayapi web dengan cara tradisional menggunakan crawler tradisional. Mereka menjalankan robot yang merayapi HTML di halaman web, mengumpulkan informasi sepanjang jalan. Mereka menyimpan kata-kata yang menarik dan mencari tautan lain ke halaman lain (tautan ini, jumlah dari mereka dan jumlah mereka yang ikut bermain dengan SEO).

Jadi mengapa mesin pencari tidak berurusan dengan situs javascript?

Jawabannya ada hubungannya dengan fakta bahwa robot mesin pencari bekerja melalui browser tanpa kepala dan mereka paling sering tidak memiliki mesin rendering javascript untuk membuat javascript halaman. Ini berfungsi untuk sebagian besar halaman karena sebagian besar halaman statis tidak peduli tentang JavaScript membuat halaman mereka, karena kontennya sudah tersedia.

Apa yang bisa dilakukan?

Untungnya, perayap situs yang lebih besar sudah mulai menerapkan mekanisme yang memungkinkan kami membuat situs JavaScript kami dapat dijelajahi, tetapi itu mengharuskan kami menerapkan perubahan pada situs kami .

Jika kita mengubah kami hashPrefixmenjadi #!bukan hanya #, maka mesin pencari modern akan mengubah permintaan untuk menggunakan _escaped_fragment_bukan #!. (Dengan mode HTML5, yaitu di mana kami memiliki tautan tanpa awalan hash, kami dapat mengimplementasikan fitur yang sama ini dengan melihat User Agentheader di backend kami).

Artinya, alih-alih permintaan dari peramban normal yang terlihat seperti:

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

Mesin pencari akan mencari halaman dengan:

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

Kita dapat mengatur awalan hash dari aplikasi Angular kami menggunakan metode bawaan dari ngRoute:

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

Dan, jika kita menggunakan html5Mode, kita perlu mengimplementasikan ini menggunakan meta tag:

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

Pengingat, kita dapat mengatur html5Mode()dengan $locationlayanan:

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

Menangani mesin pencari

Kami memiliki banyak peluang untuk menentukan bagaimana kami akan menangani pengiriman konten ke mesin pencari sebagai HTML statis. Kami dapat meng-host backend sendiri, kami dapat menggunakan layanan untuk meng-host back-end bagi kami, kami dapat menggunakan proxy untuk mengirimkan konten, dll. Mari kita lihat beberapa opsi:

Diinangi sendiri

Kita dapat menulis layanan untuk menangani berurusan dengan merayapi situs kita sendiri menggunakan browser tanpa kepala, seperti phantomjs atau zombiejs, mengambil snapshot halaman dengan data yang diberikan dan menyimpannya sebagai HTML. Setiap kali kami melihat string kueri ?_escaped_fragment_dalam permintaan pencarian, kami dapat mengirimkan snapshot HTML statis yang kami ambil dari halaman alih-alih halaman yang dirender melalui hanya JS. Ini mengharuskan kami untuk memiliki backend yang memberikan halaman kami dengan logika kondisional di tengah. Kita dapat menggunakan sesuatu seperti backend prerender.io sebagai titik awal untuk menjalankan ini sendiri. Tentu saja, kita masih perlu menangani proxy dan penanganan snippet, tapi ini awal yang baik.

Dengan layanan berbayar

Cara termudah dan tercepat untuk memasukkan konten ke mesin pencari adalah dengan menggunakan layanan Brombone , seo.js , seo4ajax , dan prerender.io adalah contoh bagus dari ini yang akan menghosting render konten di atas untuk Anda. Ini adalah opsi yang bagus untuk saat-saat ketika kita tidak ingin berurusan dengan menjalankan server / proxy. Juga, biasanya sangat cepat.

Untuk informasi lebih lanjut tentang Angular dan SEO, kami menulis tutorial yang luas di http://www.ng-newsletter.com/posts/serious-angular-seo.html dan kami lebih detail dalam buku -buku kami: Buku Lengkap tentang AngularJS . Lihat di ng-book.com .


1
SEO4Ajax juga merupakan contoh layanan berbayar yang baik (gratis selama versi beta). Sayangnya, sepertinya saya tidak diizinkan mengedit respons ini untuk menambahkannya dalam daftar.
check_ca

1
@auser Apakah Anda masih merekomendasikan pendekatan ini? Komentar teratas baru tampaknya menghambat pendekatan ini.
Lycha

Ini adalah contoh yang bagus tentang mengapa kita tidak boleh mengatakan hal-hal seperti "panduan definitif" di CS :). Mesin pencari utama sekarang menjalankan Javascript, jadi jawaban ini perlu ditulis ulang atau dihapus sama sekali.
Seb

1
@seb ini masih diperlukan untuk katakanlah tag grafik terbuka yang harus ada di halaman saat robot merayapnya. Misalnya kartu Facebook atau Twitter membutuhkannya. Tetapi jawaban ini harus diperbarui untuk fokus pada pushstate HTML5 daripada hashbang yang sudah usang sekarang.
adriendenat

@ Grsmto kamu benar! Maka saya kira itu harus ditulis ulang karena dikatakan bahwa mesin pencari utama tidak mengeksekusi JS, yang tidak benar lagi.
Seb

57

Anda harus benar-benar melihat tutorial membangun situs AngularJS SEO-friendly di tahun blog moo. Dia memandu Anda melalui semua langkah yang diuraikan pada dokumentasi Angular. http://www.yearofmoo.com/2012/11/angularjs-and-seo.html

Dengan menggunakan teknik ini, mesin pencari melihat HTML yang diperluas alih-alih tag kustom.


@Brad Green meskipun begitu pertanyaannya sudah ditutup (untuk alasan apa pun) Anda mungkin berada pada posisi untuk menjawabnya. Saya kira saya pasti kehilangan sesuatu: stackoverflow.com/questions/16224385/…
Christoph

41

Ini telah berubah secara drastis.

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

Jika Anda menggunakan: $ locationProvider.html5Mode (true); Anda sudah siap.

Tidak ada lagi halaman render.


3
Ini harus menjadi jawaban teratas sekarang. Kami berada di tahun 2014 dan jawaban oleh @joakimbl tidak lagi optimal.
Stan

11
Ini salah. Artikel itu (mulai Maret 2013) tidak mengatakan apa-apa tentang Bing yang mengeksekusi javascript. Bing hanya memberikan rekomendasi untuk menggunakan pushstate daripada rekomendasi sebelumnya untuk digunakan #!. Dari artikel tersebut: "Bing memberi tahu saya bahwa meskipun mereka masih mendukung versi #! AJAX yang dapat dijelajahi yang awalnya diluncurkan oleh Google, mereka mendapati bahwa itu tidak diterapkan dengan benar sebagian besar waktu, dan mereka sangat merekomendasikan pushState sebagai gantinya." Anda masih harus membuat HTML statis dan menyajikannya untuk _escaped_fragment_URL. Bing / Google tidak akan menjalankan panggilan javascript / AJAX.
Prerender.io

2
Anda masih perlu _escaped_fragment_dan merender halaman html murni. Ini tidak menyelesaikan apa pun pasangan.
Stan

Namun robot Google tidak dapat melihat konten dinamis dari situs saya, hanya halaman kosong.
calmbird

situs pencarian: mysite.com menunjukkan {{staff}}, bukan konten yang dimuat melalui AngularJS. Seolah crawler Google tidak pernah mendengar tentang JavaScript. Apa yang dapat saya?
Toolkit

17

Banyak hal telah berubah sejak pertanyaan ini diajukan. Sekarang ada opsi untuk membiarkan Google mengindeks situs AngularJS Anda. Opsi termudah yang saya temukan adalah menggunakan layanan gratis http://prerender.io yang akan menghasilkan halaman crwalable untuk Anda dan menayangkannya ke mesin pencari. Ini didukung pada hampir semua platform web sisi server. Saya baru-baru ini mulai menggunakannya dan dukungannya juga luar biasa.

Saya tidak memiliki afiliasi dengan mereka, ini berasal dari pengguna yang bahagia.


6
Kode untuk prerender.io ada di github ( github.com/collectiveip/prerender ) sehingga siapa pun dapat menjalankannya di server sendiri.
user276648

Ini sekarang sudah ketinggalan jaman juga. Lihat jawaban @ user3330270 di bawah ini.
Les Hazlewood

2
Ini tidak ketinggalan jaman. Jawaban @ user3330270 salah. Artikel yang mereka tautkan hanya mengatakan untuk menggunakan pushstate alih-alih # !. Anda masih harus membuat halaman statis untuk perayap karena mereka tidak menjalankan javascript.
Prerender.io

9

Situs web Angular sendiri menyajikan konten yang disederhanakan ke mesin pencari: http://docs.angularjs.org/?_escaped_fragment_=/tutorial/step_09

Katakanlah aplikasi Angular Anda menggunakan api JSON Node.js / Express-driven, seperti /api/path/to/resource. Mungkin Anda bisa mengarahkan permintaan apa pun ?_escaped_fragment_ke /api/path/to/resource.html, dan menggunakan negosiasi konten untuk merender templat HTML konten, alih-alih mengembalikan data JSON.

Satu-satunya hal adalah, rute sudut Anda harus mencocokkan 1: 1 dengan REST API Anda.

EDIT : Saya menyadari bahwa ini memiliki potensi untuk benar-benar memperkeruh api REST Anda dan saya tidak menyarankan melakukannya di luar kasus penggunaan yang sangat sederhana di mana mungkin cocok secara alami.

Alih-alih, Anda dapat menggunakan serangkaian rute dan pengontrol yang sama sekali berbeda untuk konten ramah-robot Anda. Tapi kemudian Anda menduplikasi semua rute dan pengendali AngularJS Anda di Node / Express.

Saya telah memutuskan untuk membuat snapshot dengan browser tanpa kepala, meskipun saya merasa itu kurang ideal.



7

Sampai sekarang Google telah mengubah proposal perayapan AJAX mereka.

Waktu telah berubah. Hari ini, selama Anda tidak memblokir Googlebot dari merayapi file JavaScript atau CSS Anda, kami umumnya dapat membuat dan memahami halaman web Anda seperti browser modern.

tl; dr: [Google] tidak lagi merekomendasikan proposal perayapan AJAX [Google] yang dibuat pada tahun 2009.


@Toolkit apa maksudmu?
Thor

1
Googlebot TIDAK dapat mem-parsing situs web Angular
Toolkit

4
@Toolkit yang Anda bicarakan benar-benar kacau, situs Angular lengkap saya telah diindeks oleh google dengan data meta dinamis tanpa masalah
twigg

@twigg Anda memiliki logika yang salah, maksud Anda jika satu situs web Angular (Anda) diindeks, semuanya. Yah saya punya kejutan untuk Anda. TAK ada saya yang diindeks. Mungkin karena saya menggunakan router ui sudut atau siapa yang tahu mengapa. Bahkan halaman utama tanpa data ajax
Toolkit

@Toolkit Jika bahkan halaman html statis Anda tidak diindeks, ini tidak ada hubungannya dengan kemampuan Google merayapi file JS. Jika Anda mengatakan bahwa google tidak dapat menjelajah dengan benar .. yah saya pikir Anda salah
phil294

6

Google's Crawlable Ajax Spec, sebagaimana dirujuk dalam jawaban lain di sini, pada dasarnya adalah jawabannya.

Jika Anda tertarik pada bagaimana mesin pencari dan bot sosial lainnya menangani masalah yang sama dengan yang saya tulis di sini: http://blog.ajaxsnapshots.com/2013/11/googles-crawlable-ajax-specification.html

Saya bekerja untuk https://ajaxsnapshots.com , perusahaan yang mengimplementasikan Spec Ajax yang Dapat Dirayapi sebagai layanan - informasi dalam laporan itu berdasarkan pengamatan dari log kami.


Tautan tidak tersedia di blog.ajaxsnapshots.com yang terdaftar
Kevin

4

Saya telah menemukan solusi elegan yang akan mencakup sebagian besar pangkalan Anda. Saya menulis tentang hal itu awalnya di sini dan menjawab pertanyaan StackOverflow serupa lainnya di sini yang referensi itu.

FYI solusi ini juga termasuk tag fallback hardcoded jika Javascript tidak diambil oleh crawler. Saya belum secara eksplisit menguraikannya, tetapi perlu disebutkan bahwa Anda harus mengaktifkan mode HTML5 untuk dukungan URL yang tepat.

Perhatikan juga: ini bukan file lengkap, hanya bagian penting dari file yang relevan. Jika Anda perlu bantuan menulis pelat untuk arahan, layanan, dll. Yang dapat ditemukan di tempat lain. Bagaimanapun, ini dia ...

app.js

Di sinilah Anda memberikan metadata khusus untuk setiap rute Anda (judul, deskripsi, dll.)

$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.js (service)

Tetapkan opsi metadata khusus atau gunakan default sebagai fallback.

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.js (direktif)

Paket hasil layanan metadata untuk tampilan.

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.html

Lengkap dengan tag fallback hardcoded yang disebutkan sebelumnya, untuk crawler yang tidak dapat mengambil Javascript apa pun.

<head>
  <title>Fallback Title</title>
  <meta name="description" metaproperty="description" content="Fallback Description">

  <!-- Open Graph Protocol Tags -->
  <meta property="og:url" content="fallbackurl.com" 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>

Ini akan membantu secara dramatis dengan sebagian besar kasus penggunaan mesin pencari. Jika Anda ingin perenderan sepenuhnya dinamis untuk perayap jaringan sosial (yang rapuh pada dukungan Javascript), Anda masih harus menggunakan salah satu layanan pra-perenderan yang disebutkan dalam beberapa jawaban lain.

Semoga ini membantu!


Saya juga mengikuti solusi ini dan berpikir seperti itu sebelum ini tetapi saya ingin bertanya bahwa mesin pencari akan membaca isi dari tag kustom.
Pembayaran Ravinder

@RavinderPayal dapatkah Anda memeriksa solusi ini dengan seoreviewtools.com/html-headings-checker
vijay


2

Dengan Angular Universal, Anda dapat membuat halaman arahan untuk aplikasi yang terlihat seperti aplikasi lengkap dan kemudian memuat aplikasi Angular Anda di belakangnya.
Angular Universal menghasilkan HTML murni berarti halaman tanpa javascript di sisi server dan menayangkannya kepada pengguna tanpa penundaan. Jadi Anda bisa berurusan dengan perayap, bot, dan pengguna apa pun (yang sudah memiliki cpu dan kecepatan jaringan rendah). Lalu Anda dapat mengarahkan mereka dengan tautan / tombol ke aplikasi sudut aktual Anda yang sudah dimuat di belakangnya. Solusi ini direkomendasikan oleh situs resmi. -Info lebih lanjut tentang SEO dan Angular Universal-


1

Crawler (atau bot) dirancang untuk merayapi konten HTML dari halaman web tetapi karena operasi AJAX untuk pengambilan data yang tidak sinkron, ini menjadi masalah karena dibutuhkan waktu untuk merender halaman dan menampilkan konten dinamis di atasnya. Demikian pula, AngularJSgunakan juga model asinkron, yang menciptakan masalah bagi Google crawler.

Beberapa pengembang membuat halaman html dasar dengan data nyata dan menyajikan halaman-halaman ini dari sisi server pada saat perayapan. Kami dapat merender halaman yang sama dengan PhantomJSdi sisi yang memiliki _escaped_fragment_(Karena Google mencari #!di url situs kami dan kemudian mengambil semuanya setelah #!dan menambahkannya dalam _escaped_fragment_parameter kueri). Untuk lebih jelasnya silakan baca blog ini .


Hal ini tidak lagi benar pada Oktober 2017, pajak penghasilan ini kalkulator income-tax.co.uk dibangun dengan AngularJs murni (bahkan titls seperti <title> Kalkulator Pajak untuk £ {{earningsSliders.yearly | nomor: 0}} gaji </title> yang diterjemahkan seperti "kalkulator pajak dengan gaji £ 30000), dan Google mengindeksnya dengan peringkat pada halaman pertama untuk ratusan kata kunci. Cukup buat situs web Anda untuk manusia, buat mereka luar biasa, dan Google akan mengurus sisanya ;)
Kaszoni Ferencz

0

Perayap tidak perlu gui kaya fitur yang cukup bergaya, mereka hanya ingin melihat konten , sehingga Anda tidak perlu memberi mereka snapshot dari halaman yang telah dibangun untuk manusia.

Solusi saya: untuk memberikan crawler apa yang diinginkan crawler :

Anda harus memikirkan apa yang diinginkan perayap, dan hanya memberinya itu.

TIP jangan main-main dengan bagian belakang. Tambahkan saja tampilan depan sisi-server menggunakan API yang sama

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.