Möchten Sie mehr über den Kurs „JavaScript Developer. Basic "? Wir laden Sie zu einem kostenlosen Webinar ein, in dem der Kursleiter alle Ihre Fragen beantwortet.
Es gibt mehrere moderne Ansätze für die Anwendungsentwicklung. Die beiden beliebtesten sind Single-Page-Anwendungen (SPA) und vom Server gerenderte Anwendungen .
Apps für einzelne Seiten bieten eine hervorragende Leistung, und obwohl sich der Google-Crawler nach einigen Aktualisierungen geringfügig geändert hat , werden immer noch keine beeindruckenden SEO-Ergebnisse erzielt. Mit dem Server-Rendering können Sie Anwendungen für Suchmaschinen effizienter optimieren, während ihre Leistung in diesem Fall ebenfalls recht anständig ist.
Mit dem Aufkommen großartiger JavaScript-Frameworks wie Next und Gatsby gibt es mehr vom Server gerenderte Anwendungen. Lassen Sie uns also sehen, warum Anwendungen mit nur einer Seite nicht immer eine gute Lösung sind, insbesondere wenn Sie hohe Suchrankings benötigen.
Was ist los mit einseitigen Apps?
Bevor Sie sich zwischen einseitigen Apps und serverseitigem Rendern entscheiden, sollten Sie sich für den Inhalt entscheiden.
Apps für einzelne Seiten laden nur eine HTML-Seite. Jedes Mal, wenn der Benutzer neuen HTML-Inhalt anfordert, wird dieser von JavaScript dynamisch geladen, indem die DOM-Elemente bearbeitet werden. Wenn Sie jedoch nicht jedes Mal eine neue HTML-Seite laden müssen, warum gibt es dann ein Problem mit der Suchmaschinenoptimierung?
Die Sache ist, Suchmaschinen können nicht richtig indizierenEinzelseitenanwendungen im Gegensatz zu vom Server gerenderten Anwendungen. Eine Einzelseitenanwendung lädt nur die ursprüngliche HTML-Seite. Infolgedessen können Suchmaschinen Inhalte, die mit JavaScript neu erstellt werden, nicht bei jeder Änderung indizieren. Beachten Sie jedoch, dass Anwendungen mit nur einer Seite viele weitere Vorteile bieten: Neben der hohen Leistung werden sie auch bei niedrigen Verbindungsgeschwindigkeiten schnell geladen und erfordern keine hohe Bandbreite. Auf mobilen Geräten
hingegen, insbesondere mit Next.js erstellte Anwendungen, weisen sowohl eine gute Leistung als auch eine SEO-Effizienz auf.
SEO (Suchmaschinenoptimierung)
SEO (aus der englischen Suchmaschinenoptimierung) ist eine Optimierung für Suchmaschinen, dh Aktionen zum Ändern Ihrer Website, um mehr organischen Suchverkehr anzuziehen. Es gibt viele verschiedene SEO-Techniken und Tricks, die Sie berücksichtigen sollten, um Ihre Website attraktiver und für Suchmaschinen zugänglicher zu machen.
Next.js
Next.js ist ein Framework für statisch generierte oder vom Server gerenderte React-Anwendungen, das Entwicklern viele Möglichkeiten eröffnet: Erstellen gebrauchsfertiger Anwendungen ohne Konfiguration, Aufteilen von Code, Exportieren einer statischen HTML-Seite usw. usw.
Next.jsliefert hohe Suchmaschinenoptimierungsergebnisse, und Sie müssen nichts Besonderes tun, um dies zu tun - Sie müssen nur eine Anwendung erstellen. Gute SEO-Ergebnisse werden jedoch nicht speziell von Next.js bereitgestellt , sondern vom Server-Rendering.
Schauen wir uns anhand eines Beispiels an, wie Next.js funktioniert .
Mit Next.js können Sie eine Anwendung mit einem Befehl mithilfe der Struktur " Nächste App erstellen" erstellen :
npx create-next-appSobald Sie das Projekt erstellt haben, werden Sie feststellen, dass es sich geringfügig von anderen Vorlagen unterscheidet, die beispielsweise mit " React App erstellen" erstellt wurden . Alle Seiten in der Anwendung werden in einem Ordner gespeichert
pages, und jede dieser Seiten ist eine React-Komponente.
Um eine neue Route innerhalb der Anwendung zu generieren, müssen Sie lediglich eine neue Datei im Ordner
pagesund eine neue React-Komponente dafür erstellen :
// pages/about.js
const About = () => (
<div>
<h1>About page</h1>
</div>
);
export default About;Hinweis. Während Sie an Ihrer App arbeiten, können Sie die SEO-Ranking-Berichte bereits in einem frühen Stadium anzeigen, z. B. mithilfe des Lighthouse- Dienstes .
Das Erstellen einer neuen Anwendung mit Next.js ist äußerst einfach. Lassen Sie uns einen Blick darauf werfen, wie Next.js dazu beitragen kann, Ihre Suchrankings zu verbessern und mehr organischen Traffic auf Ihre Website zu lenken.
Wie man SEO mit Next.js verbessert
Mit Next.js können Sie Ihre SEO-Ergebnisse erheblich verbessern, aber Sie sollten andere Aspekte der Anwendung nicht vergessen. Wenn Sie gute SEO-Ergebnisse erzielen möchten, beachten Sie Folgendes:
Meta-
Tags Meta- Tags stellen Suchmaschinen und Website-Besuchern Daten zu Ihrer Seite zur Verfügung. Sie wirken sich darauf aus, wie eine Seite auf Suchergebnisseiten angezeigt wird und ob sie Besucher auf Ihre Website locken kann. Meta-Tags sind für Benutzer nicht sichtbar, aber für eine Anwendung, die Sie an die Spitze von Suchmaschinen bringen möchten, ist dies der wichtigste Teil des Codes.
Das Meta-Tag informiert die Suchmaschine über die Art des auf einer Seite veröffentlichten Inhalts, das Thema dieser Seite und wie die Suchmaschine ihn anzeigen soll.
Next.js verfügt über eine integrierte Komponente, die
<head>import Head from 'next/head'Verwenden Sie die eingebaute Komponente, um ein Meta-Tag auf einer Seite einzufügen
Head:
import Head from 'next/head'
const Example = () => {
return (
<div>
<Head>
<title>Example</title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</Head>
<p>Hi Next.js!</p>
</div>
)
}export default Example
Die integrierte Komponente
Headvermeidet das Duplizieren von Meta-Tags auf der Site. Wenn Sie die Schlüsseleigenschaft hinzufügen, wird das Meta-Tag nur einmal angezeigt:
<meta name="viewport" content="initial-scale=1.0, width=device-width" key="viewport" />Sie können den Suchrang einer App erhöhen, indem Sie der Seite einfach einige Meta-Tags hinzufügen. Hier können Sie über die wichtigen Meta-Tags für SEO lesen.
Überprüfen Sie jetzt Ihren Code, um festzustellen, ob Meta-Tags enthalten sind und ob es sich um die gewünschten Meta-Tags handelt. Vertrauen Sie mir, die richtigen Meta-Tags sind das, was Sie brauchen, um die Qualität der Indizierung zu verbessern und den organischen Verkehr zu fördern.
Produktivität
Benutzer sind daran gewöhnt, dass Seiten schnell geladen werden, und sind nicht bereit, ewig zu warten. Denken Sie bei der Entwicklung einer Anwendung zuerst an die Leistung. Es ist auch einer der wichtigsten Ranking-Faktoren für Suchmaschinen.
Suchmaschinen, insbesondere Google, verwenden die Anzeigezeiten für den ersten Inhalt(First Contentful Paint oder FCP) als wichtige Leistungsmetrik. FCP misst die Zeit vom Beginn des Ladens einer Seite bis zur Anzeige des ersten Inhaltselements auf dem Bildschirm. Ein niedriger FCP hat einen niedrigen SEO-Rang.
Mit Next.js können Sie die FCP- und LCP-Metriken (Renderzeiten für die meisten Inhalte, größte inhaltliche Farbe) analysieren, indem Sie eine benutzerdefinierte App-Komponente erstellen und eine Funktion deklarieren
reportWebVitals:
// pages/_app.js
export function reportWebVitals(metric) {
console.log(metric)
}Die Funktion
reportWebVitalswird aufgerufen, wenn die endgültigen Metrikwerte für die Seite berechnet werden. Sie können lesen Sie
mehr über die Leistungsmessung in Next.js hier . Hier ist , woran Sie arbeiten müssen, um den FCP zu verbessern.
SSL-Zertifikat
Im August 2014 kündigte Google an, HTTPS beim Ranking zu berücksichtigen. Das sichere HTTPS-Kommunikationsprotokoll bietet eine zusätzliche Schutzschicht für Benutzer, die ihre Daten an Ihre Site übertragen.
Um eine Verbindung zu HTTPS herzustellen, benötigen Sie ein SSL-Zertifikat. Ein gutes SSL-Zertifikat kann einen hübschen Cent kosten. Wie bekomme ich mit Next.js ein kostenloses SSL-Zertifikat ?
Dazu muss die Anwendung auf einer Cloud-Plattform wie Vercel bereitgestellt werden . Vercel ist das Unternehmen hinter Next.js, sodass die Integration reibungslos verläuft. Um Next.js auf der Vercel-Plattform bereitzustellen , müssen Sie die Vercel-CLI installieren:
yarn global add vercelGehen Sie dann zu Ihrem Projekt und führen Sie den folgenden Befehl aus:
vercelDas Projekt wird auf Vercel veröffentlicht und durch ein SSL-Zertifikat geschützt.
Inhalt ist wichtig
Es ist sehr wichtig, den Inhalt, den Ihre Website-Besucher sehen, richtig darzustellen. Das Erstellen eines Qualitätsprodukts ist die Hauptaufgabe eines jeden Entwicklers.
Welche Anwendung entwickelt werden soll - einzelne Seite oder serverseitig gerendert - hängt davon ab, welche Art von Inhalten Sie anzeigen möchten und wie Sie Feedback von Kunden erhalten möchten.
Das Next.js-Framework wurde für die Entwicklung von vom Server gerenderten React-Anwendungen entwickelt, die uns hervorragende Suchmaschinenoptimierung, UX, Leistung und mehr bieten. Es hilft Unternehmen und Entwicklern, die Qualität ihrer Websites und Projekte zu verbessern und mehr organischen Suchverkehr zu fördern. ...
Nun, es ist Zeit, zu Next.js überzugehen und das volle Potenzial serverseitiger Rendering-Anwendungen zu erkunden. Sie sind nützlich für Sie und Ihr Unternehmen und im Allgemeinen - sie sind einfach unglaublich! Ich versichere Ihnen, Sie werden überrascht sein.
Fazit
In diesem Artikel haben wir uns das Next.js-Framework genauer angesehen und erfahren, wie es zur Optimierung moderner Anwendungen für Suchmaschinen verwendet werden kann. Wir haben auch allgemeine SEO-Konzepte aussortiert und Meta-Tags, Leistung, SSL-Zertifikate usw. behandelt, die bei der Entwicklung einer Anwendung berücksichtigt werden müssen.
LogRocket : Vollständige Sichtbarkeit der Webanwendung
LogRocket ist ein Webanwendungsüberwachungsdienst, mit dem Sie Benutzerprobleme wiederholen können, als ob sie in Ihrem Browser aufgetreten wären. Jetzt müssen Sie nicht mehr raten, warum der Fehler aufgetreten ist, oder Benutzer nach Screenshots oder Protokollspeicherauszügen fragen. Mit LogRocket können Sie die Sitzung erneut abspielen und herausfinden, was das Problem verursacht. Es funktioniert hervorragend mit jeder Anwendung in jedem Framework, und Sie können Plugins verwenden, um zusätzlichen Kontext aus Redux, Vuex und hinzuzufügen
@ngrx/store.
Zusätzlich zum Hinzufügen von Redux-Aktionen und -Status zeichnet LogRocket Konsolenprotokolle, JavaScript-Fehler, Stapelspuren, Netzwerkanforderungen und -antworten mit Headern und Textkörpern, Browser-Metadaten und benutzerdefinierten Protokollen auf. Es verwendet das DOM, um HTML und CSS auf die Seite zu schreiben, und bietet Video-Wiederholungen pro Pixel, selbst für die komplexesten Einzelseitenanwendungen.
Probieren Sie es kostenlos aus .
Weiterlesen: