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?

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.

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.

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 .

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.

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.

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.

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.

Praktik yang baik dapat ditemukan di sini:

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

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.

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.

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!

Gunakan sesuatu seperti PreRender, itu membuat halaman statis situs Anda sehingga mesin pencari dapat mengindeksnya.

Di sini Anda dapat menemukan platform apa yang tersedia: https://prerender.io/documentation/install-middleware#asp-net

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-

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 .

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