WordPress + AngularJS-Route + SEO

Lesezeit: 3 Minuten

Ich arbeite derzeit an einem Projekt, bei dem ich Folgendes haben möchte:

  • WordPress für eine einfache Inhaltsverwaltung.
  • AngularJS für einige UX (das Ziel ist, kein Neuladen der Seite + schöne Animationen zwischen dem Laden von Seiten zu haben) + weitere Funktionalitäten.
  • Und kümmern sich um die SEO.

Zu diesem Zweck verwende ich das Route-Modul von Angular, um dem Benutzer ein reibungsloseres Erlebnis zu bieten, und verwende den Angular-HTML5-Modus „hübsche URLs“, um den Seitenwechsel zu „haken“ (kein Hashbang -> natürliche Links).

Ich möchte keine Hashbangs generieren, weil es schwieriger zu warten ist (HTML-Snapshots mit phantom.js-Server usw.), als WordPress den Inhalt einfach so generieren zu lassen, wie er es gut macht.

Meine Absicht war es also, angleJS die Navigation des Benutzers steuern zu lassen und WordPress den Inhalt zu generieren, wenn der Benutzer F5 und für die SEO-Bots (kein JS) verwendet.

Aber ich kann keine saubere und klare Lösung für dieses Problem finden, da entweder der Angular-Weg funktioniert oder der “PHP” -Weg funktioniert.

Alle Ideen sind willkommen! 🙂

WordPress bietet Ihnen bereits wp_ajax_ Hook für AJAX-Anfragen. ( Verknüpfung)

Beispiel:

mysite.com/my-test-page

WordPress

In diesem einfachen Fall brauchen wir unsere wp_ajax_ Hook, um eine Seite nach ihr abzurufen Schnecke.

Eine einfache Möglichkeit ist die Verwendung get_page_by_path($page_path, $output, $post_type)um die gewünschte Seite zu erhalten, wo $page_path ist die Schnecke.

Geben Sie dann die Seitendaten als JSON zurück, return json_encode($pageArray);


AngularJS

Route: Führen Sie ein einfaches GET durch:

.when('/:page_slug', {
    templateUrl: 'views/page.html',
    controller: 'PageController',
    resolve: {
      page : function($route) {
        return $http.get(wp_ajax_url, 
                          {
                          'action': 'the_ajax_hook', 
                          'data': $route.current.params.page_slug
                          }
                        );
     }
    }
  })

SEO

Google hat kürzlich angekündigt, die Webmaster-Tools zu aktualisieren, um Ihnen zu zeigen, wie eine mit Javascript generierte Website gerendert wird, und Ihnen Tipps zu geben, wie Sie Ihre Website crawlbar machen können.

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

Abgesehen davon können Sie heute weitere Dienste nutzen, um Ihre Seite SEO-freundlich zu gestalten:

  • Gute Antwort. Ich habe jedoch Schwierigkeiten mit diesem Ansatz, wenn ich diese Logik auf komplexere Abfragen anwende, dh wenn der Slug keine Seite, sondern einen Beitrag, eine Kategorie usw. darstellt. Wie würden Sie beispielsweise im obigen Beispiel das richtige festlegen $post_type zum get_page_by_path() gegeben nur a page_slug das stellt zufällig a dar post. Ich nehme an, es würde mehr Informationen von erfordern parse_request() bei WordPress.

    – Pim Schaaf

    11. Juni 2015 um 13:47 Uhr

  • @PimSchaaf Die beste Option wäre, IDs anstelle von Slug zu verwenden, und für komplexere Abfragen wie eine Kategorie, Paginierung usw. können Sie den http-Daten weitere Parameter hinzufügen. ex. { 'action': 'the_ajax_hook', 'data': {type: 'category', id: 23} } .. oder für die Post. { 'action': 'the_ajax_hook', 'data': {type: 'post', id: 897} } In Ihrer PHP können Sie entsprechend zurückkehren.

    – Stummel

    11. Juni 2015 um 18:09 Uhr


  • Haben Sie einen REST-Ansatz ausprobiert? dh. wordpress.org/plugins/json-rest-api Das würde die Verwendung mit Angular + Restangular viel einfacher machen.

    – Stummel

    11. Juni 2015 um 18:14 Uhr


  • Danke für deine Vorschläge @Ervald! Gute Tipps.

    – Pim Schaaf

    15. Juni 2015 um 13:13 Uhr

1342310cookie-checkWordPress + AngularJS-Route + SEO

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy