Heim >Web-Frontend >js-Tutorial >NgSysV.SEO (Suchmaschinenoptimierung)

NgSysV.SEO (Suchmaschinenoptimierung)

Barbara Streisand
Barbara StreisandOriginal
2024-12-02 15:47:10505Durchsuche

NgSysV.SEO (Search Engine Optimisation)

Diese Beitragsserie ist auf NgateSystems.com indiziert. Dort finden Sie auch eine äußerst nützliche Stichwortsuchfunktion.

Letzte Bewertung: 24. November

1. Einführung

Sobald Sie Ihre Anwendung in der Google Cloud bereitgestellt haben, wird sie zum Ziel für die „Webspider“, die im Internet auf der Suche nach Inhalten patrouillieren, die sie zu ihren Schlüsselwort-„Indizes“ hinzufügen können. Sobald Ihre Website indiziert ist, wird sie möglicherweise in Suchmaschinenergebnissen angezeigt.

Das ist großartig, wenn alles funktioniert. Die Suchmaschine wird das Geschäft in Ihre Richtung lenken und Ihnen keinen Cent in Rechnung stellen. Aber in der Praxis müssen Sie die Spider ermutigen, Ihre Website prominent zu indizieren. Darum geht es bei der „Suchmaschinenoptimierung“ (kurz SEO) – .

Eine gute Suchmaschinenoptimierung für Ihre Website erfordert Folgendes:

  • Bereitstellen einer Sitemap, um den Spidern die Navigation auf Ihrer Website zu erleichtern
  • Verwenden Sie SSR (Server-Side-Rendering) und Pre-Rendering, um Ihr „Crawl-Budget“ weiter auszuschöpfen
  • Wir helfen den Bots, nützliche „indexwürdige“ Inhalte auf Ihren Seiten zu finden

2. Bereitstellung von Sitemap- und Robots-Dateien zur Führung von Web-Spidern

Ihre Website sollte eine Sitemap-Datei bereitstellen, die alle Routen auflistet, die Google (und andere Suchmaschinen) indizieren sollen. Indexierungs-Spider werden sie normalerweise trotzdem entdecken, vorausgesetzt, die Seiten in der „Baum“-Hierarchie Ihrer Website sind ordnungsgemäß über verlinkt. Ankerlinks. Es können jedoch Probleme auftreten, wenn Ihre Website groß oder neu ist und von anderen Websites immer noch schlecht referenziert wird.

Diese Probleme werden durch die Erstellung einer „Sitemap“-Datei behoben. Sitemaps können auf verschiedene Arten formatiert werden, aber im einfachsten Fall reicht die Indexierungs-Engine eine einfache Textdatei aus, die Ihre Seiten wie folgt auflistet:

// /static/sitemap.txt    - Don't copy this line
https://myProjectURL/inventory-display
https://myProjectURL/inventory-maintenance
etc

Beachten Sie Folgendes:

  • Seiten, die in der Google App Engine bereitgestellt werden, werden automatisch mit einer https-URL (verschlüsselt) bereitgestellt
  • „myProjectURL“ wird höchstwahrscheinlich eine „benutzerdefinierte“ URL sein, die Sie explizit mit Ihrer Bereitstellungs-URL verknüpft haben.
  • Sie müssen nur dann Erweiterungen zu den oben gezeigten „sauberen“ URLs hinzufügen, wenn es sich um statische „.pdf“-Dateien oder ähnliches handelt.
  • Eine Text-Sitemap kann beliebig heißen, es ist jedoch üblich, sie „sitemap.txt“ zu nennen. In einer Svelte-Webanwendung müssen Sie dies jedoch im statischen Ordner Ihres Projekts speichern, damit es in Ihre Yaml-Datei integriert und im Stammverzeichnis Ihrer Webanwendung bereitgestellt wird.

Die Robots-Datei stellt einen „Partner“ für die Sitemap-Datei bereit, der:

  • Blockiert bestimmte Spider: Sie können bestimmte Webcrawler daran hindern, auf bestimmte Teile Ihrer Website zuzugreifen.
  • Blockiert bestimmte Verzeichnisse: Sie können beispielsweise /admin/ oder /private/ blockieren, um diese Seiten aus den Suchmaschinenindizes herauszuhalten.
  • Gibt den Speicherort der Sitemap an.

Hier ist ein Beispiel

// /static/sitemap.txt    - Don't copy this line
https://myProjectURL/inventory-display
https://myProjectURL/inventory-maintenance
etc

In einem Svelte-Projekt muss die robots.txt-Datei (obligatorischer Dateiname) in einer /static/robots.txt-Datei gespeichert werden.

Sie können überprüfen, ob Ihre robots.txt- und sitemap.txt-Dateien korrekt im URL-Stammverzeichnis Ihres Projekts bereitgestellt werden, indem Sie versuchen, sie mit Ihrem Browser anzuzeigen:

Jede der folgenden URLs, die in das Suchfeld des Browsers eingegeben werden, sollte mit der Anzeige des Dateiinhalts antworten.

// /static/robots.txt     - Don't copy this line
User-agent: *
Disallow: https://myProjectURL/inventory-maintenance
Sitemap: https://myProjectURL/sitemap.txt

Weitere Informationen zu all diesen Themen finden Sie unter Erfahren Sie mehr über Sitemaps

Sobald Sie Ihre Sitemap erfolgreich bereitgestellt haben, könnte es nützlich sein, Google eine „Vorwarnung“ zu geben, indem Sie die Sitemap an die Google Search Console senden.

Sie beginnen hier mit der Registrierung eines „Prinzipals“ – also der URL Ihrer Website. Dazu gehört die Durchführung eines Verfahrens, mit dem Sie Google versichern können, dass Sie der Eigentümer der Website sind. Der Vorgang beginnt damit, dass die Konsole eine „Site-Verification“-Datei in Ihren „Downloads“-Ordner herunterlädt. Sie müssen dies in Ihren statischen Svelte-Ordner kopieren und Ihre Webanwendung neu erstellen/bereitstellen, um die Datei auf Ihre Remote-Site hochzuladen. Wenn Google die Datei mit dem erwarteten Inhalt finden kann, wenn Sie auf dem Authentifizierungsbildschirm auf die Schaltfläche „Bestätigen“ klicken, geht Google davon aus, dass Sie tatsächlich der Eigentümer sind.

Wenn Sie im Menü auf der linken Seite des Bildschirms auf das Tool „Sitemaps“ klicken, können Sie nun Ihre Sitemap-URL (sitemap.txt) eingeben und erhalten im Fenster „Eingereichte Sitemaps“ den Status „Erfolgreich“

Die Search Console ist ein hochentwickeltes Tool zur Überwachung des Indexierungsfortschritts auf Ihrer Website und zur Lösung eventuell gemeldeter Probleme. Weitere Informationen finden Sie unter Erste Schritte mit der Search Console

3. Nutzen Sie „Serverseitiges Rendering“ und „Pre-Rendering“, um Ihr „Crawling-Budget“ weiter auszubauen

Während Suchmaschinen in den letzten Jahren bei der Indexierung von Inhalten, die mit clientseitigem JavaScript gerendert wurden, besser geworden sind, sind sie mit Seiten, die nur HTML enthalten, zufriedener. Serverseitig gerenderte (SSR) Inhalte (d. h. Seiten, deren HTMl bereits durch die Ausführung von Datenbankzugriffs-Javascript auf dem Server generiert wurde) werden häufiger und zuverlässiger indiziert. Niemand außer Google weiß, wie ihre Indexierungs-Engines funktionieren, aber eine vernünftige Vermutung sieht ungefähr so ​​aus.

Zuerst wird Ihrer Webanwendung ein „Site-Ranking“ zuerkannt (das auf unklare Weise bestimmt wird, aber wahrscheinlich durch die Anzahl der „Backlinks“ auf Websites beeinflusst wird, die auf Ihre URL verweisen). Dadurch erhalten Sie wiederum ein bestimmtes „Crawling-Budget“ – die Zeit, die die Indexierungs-Engine bereit ist, für die Indexierung Ihrer Seiten aufzuwenden. Sie sollten dies mit Bedacht ausgeben. Serverseitiges Rendering entlastet den Bot und schont Ihr Budget. Wenn Sie also eine gute Suchmaschinenoptimierung wünschen, sollten Sie SSR verwenden!

Der ultimative Ausdruck des serviceseitigen Renderings besteht darin, dass eine „statische“ Seite – eine Seite, die Daten anzeigt, die sich entweder nie oder nur selten ändern – zum Build--Zeitpunkt durch Vorhandensein der folgenden Anweisung gerendert wird seine page.js- oder page.server.js-Datei:

// /static/sitemap.txt    - Don't copy this line
https://myProjectURL/inventory-display
https://myProjectURL/inventory-maintenance
etc

Da der Server jetzt nur noch reines HTML herunterladen muss, reicht Ihr Crawl-Budget noch weiter und Ihre Benutzer erhalten eine blitzschnelle Antwort! Einzelheiten zu einer Anordnung zur Automatisierung von Pre-Rendering-Builds mithilfe eines Planers finden Sie in Beitrag 4.3.

4. Helfen Sie den Bots, nützliche „indexwürdige“ Inhalte auf Ihren Seiten zu finden

Die Dokumente von Google unter Übersicht über Crawling- und Indexierungsthemen enthalten alles, was Sie wissen. Hier ist eine Zusammenfassung:

Zunächst müssen Sie sich mit der „Mobile First“-Richtlinie von Google vertraut machen. Der Google Spider analysiert Ihre Website so, wie sie von einem Browser auf einem Mobiltelefon angezeigt würde. Das bedeutet, dass die „Reputation“ Ihrer Website (und ihr Crawling-Budget) herabgestuft wird, wenn sie beispielsweise der Meinung ist, dass Ihre Schriftgröße zu klein ist.

Wenn Ihre Webanwendung für Desktop-Benutzer entwickelt wurde, wird dies ein schwerer Schlag für Sie sein. Probieren Sie Ihre Website auf Ihrem Telefon aus und Sie werden wahrscheinlich zu dem Schluss kommen, dass sie völlig nutzlos ist.

Der Ausweg besteht darin, „responsives Styling“ zu verwenden (siehe Beitrag 4.4), sodass die Webanwendung die Seitenbreite des Geräts erkennt, auf dem sie ausgeführt wird, und die Dinge entsprechend anpasst.

Es kann sein, dass Teile Ihrer Webanwendung nicht für den Betrieb der Website geeignet sind. Möglicherweise möchten Sie diese entfernen, Google möchte Sie jedoch daran erinnern, dass der Großteil der Indexierung über mobile Seiten erfolgt. Sie empfehlen, solche Inhalte vorsichtig hinter Tabulatoren oder „Akkordeons“ zu verbergen.

Wonach Webspider in erster Linie suchen, sind Inhalte – Informationen, die Suchmaschinenkunden nützlich finden. Sie benötigen jedoch Ihre Hilfe, um dies zu finden und zu interpretieren. Hier sind einige Tipps, wie Sie dies tun könnten@

  • Geben Sie jeder Seite einen gut geschriebenen und einzigartigen , <meta name="description" content=" ... "> und <link> Elemente innerhalb eines <svelte:head> Codeblock. Hier ist ein Beispiel: </li> </ul> <pre class="brush:php;toolbar:false">// /static/robots.txt - Don't copy this line User-agent: * Disallow: https://myProjectURL/inventory-maintenance Sitemap: https://myProjectURL/sitemap.txt </pre> <p><em>Diese Vereinbarung delegiert Svelte die umständliche Aufgabe des Einfügens von <title>, <meta> und <link> Elemente von <head> in das DOM. Der <Link> Das Element hier teilt dem Indexierungs-Bot mit, welche „Marke“ einer Website, die möglicherweise als „https://myUrl“ und „https://myUrl/“ usw. erreichbar ist, die „Hauptversion“ oder „bevorzugte“ Version ist. Bitten Sie chatGPT um ein Tutorial zum Wort „kanonisch“, wenn Sie die ganze Geschichte erfahren möchten.</em> </p> <ul> <li>Stellen Sie sicher, dass der Textinhalt von <a> Ankerlinks beschreiben klar den Inhalt der verlinkten Seite oder werden (falls dies unpraktisch ist) durch ein title=-Tag ergänzt. Verwenden Sie im href=-Tag eine absolute URL (dh eine, die alle ihre Komponenten enthält). Hier ist ein Beispiel </li> </ul> <pre class="brush:php;toolbar:false">// /static/sitemap.txt - Don't copy this line https://myProjectURL/inventory-display https://myProjectURL/inventory-maintenance etc </pre> <ul> <li>Verwenden Sie „strukturierte“ Datenbeschreibungen auf Websites (z. B. „Rezept“-Websites), die feste Informationsklassen in einem genau definierten Format anzeigen. „Strukturierte Daten“ beziehen sich in diesem Zusammenhang auf ein standardisiertes Format zur Bereitstellung von Informationen über eine Seite und zur Klassifizierung ihres Inhalts. Das gebräuchlichste Format für strukturierte Daten im Web ist das von schema.org veröffentlichte. Fragen Sie chatGPT nach einem Beispiel, wenn Sie mehr darüber erfahren möchten und wie Sie strukturierte Daten in einer Svelte-Webanwendung verwenden würden. </li> </ul> <p>Das obige ist der detaillierte Inhalt vonNgSysV.SEO (Suchmaschinenoptimierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!</p></div><div class="nphpQianMsg"><a href="javascript:void(0);">JavaScript</a> <a href="javascript:void(0);">html</a> <a href="javascript:void(0);">Static</a> <a href="javascript:void(0);">if</a> <a href="javascript:void(0);">for</a> <a href="javascript:void(0);">while</a> <a href="javascript:void(0);">format</a> <a href="javascript:void(0);">try</a> <a href="javascript:void(0);">using</a> <a href="javascript:void(0);">private</a> <a href="javascript:void(0);">copy</a> <a href="javascript:void(0);">map</a> <a href="javascript:void(0);">JS</a> <a href="javascript:void(0);">console</a> <a href="javascript:void(0);">number</a> <a href="javascript:void(0);">dom</a> <a href="javascript:void(0);">this</a> <a href="javascript:void(0);">location</a> <a href="javascript:void(0);">href</a> <a href="javascript:void(0);">database</a> <a href="javascript:void(0);">chatgpt</a> <a href="javascript:void(0);">https</a> <a href="javascript:void(0);">everything</a> <a href="javascript:void(0);">Access</a> <a href="javascript:void(0);">SEO</a> <a href="javascript:void(0);">word</a> <a href="javascript:void(0);">Other</a><div class="clear"></div></div><div class="nphpQianSheng"><span>Stellungnahme:</span><div>Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn</div></div></div><div class="nphpSytBox"><span>Vorheriger Artikel:<a class="dBlack" title="Wie implementiert man bedingtes Rendering in ReactJS mithilfe der if-else-Logik?" href="https://m.php.cn/de/faq/1796704551.html">Wie implementiert man bedingtes Rendering in ReactJS mithilfe der if-else-Logik?</a></span><span>Nächster Artikel:<a class="dBlack" title="Wie implementiert man bedingtes Rendering in ReactJS mithilfe der if-else-Logik?" href="https://m.php.cn/de/faq/1796704561.html">Wie implementiert man bedingtes Rendering in ReactJS mithilfe der if-else-Logik?</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>In Verbindung stehende Artikel</h2><em><a href="https://m.php.cn/de/article.html" class="bBlack"><i>Mehr sehen</i><b></b></a></em><div class="clear"></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="fluid" data-ad-layout-key="-6t+ed+2i-1n-4w" data-ad-client="ca-pub-5902227090019525" data-ad-slot="8966999616"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><ul class="nphpXgwzList"><li><b></b><a href="https://m.php.cn/de/faq/1609.html" title="Eine eingehende Analyse der Bootstrap-Listengruppenkomponente" class="aBlack">Eine eingehende Analyse der Bootstrap-Listengruppenkomponente</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1640.html" title="Detaillierte Erläuterung des JavaScript-Funktions-Curryings" class="aBlack">Detaillierte Erläuterung des JavaScript-Funktions-Curryings</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/1949.html" title="Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)" class="aBlack">Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2248.html" title="Angularjs integriert WeChat UI (weui)" class="aBlack">Angularjs integriert WeChat UI (weui)</a><div class="clear"></div></li><li><b></b><a href="https://m.php.cn/de/faq/2351.html" title="Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse" class="aBlack">Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse</a><div class="clear"></div></li></ul></div></div><ins class="adsbygoogle" style="display:block" data-ad-format="autorelaxed" data-ad-client="ca-pub-5902227090019525" data-ad-slot="5027754603"></ins><script> (adsbygoogle = window.adsbygoogle || []).push({}); </script><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!</p></div><div class="footermid"><a href="https://m.php.cn/de/about/us.html">Über uns</a><a href="https://m.php.cn/de/about/disclaimer.html">Haftungsausschluss</a><a href="https://m.php.cn/de/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>