{"id":784301,"date":"2023-11-12T08:29:26","date_gmt":"2023-11-12T14:29:26","guid":{"rendered":"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/"},"modified":"2023-11-12T08:29:26","modified_gmt":"2023-11-12T14:29:26","slug":"ett-survival-kit-for-seo-vanliga-javascript-webbplatser","status":"publish","type":"post","link":"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/","title":{"rendered":"Ett Survival Kit f\u00f6r SEO-v\u00e4nliga JavaScript-webbplatser"},"content":{"rendered":"<p><center><\/center><\/p>\n<p><strong>JavaScript-webbplatser \u00e4r h\u00e4r f\u00f6r att stanna.  Eftersom JavaScript i dess m\u00e5nga ramverk blir en allt mer popul\u00e4r resurs f\u00f6r moderna webbplatser, m\u00e5ste SEO:are kunna s\u00e4kerst\u00e4lla att deras tekniska implementering \u00e4r s\u00f6kmotorv\u00e4nlig.<\/strong><\/p>\n<p>I den h\u00e4r artikeln kommer vi att fokusera p\u00e5 hur man optimerar JS-webbplatser f\u00f6r Google (\u00e4ven om Bing ocks\u00e5 rekommenderar samma l\u00f6sning, dynamisk rendering).<\/p>\n<p>Inneh\u00e5llet i denna artikel inkluderar:<\/p>\n<p>1. JavaScript-utmaningar f\u00f6r SEO<\/p>\n<p>2. Rendering p\u00e5 klientsidan och serversidan<\/p>\n<p>3. Hur Google genoms\u00f6ker webbplatser<\/p>\n<p>4. Hur man uppt\u00e4cker renderat inneh\u00e5ll p\u00e5 klientsidan<\/p>\n<p>5. L\u00f6sningarna: hybrid rendering och dynamisk rendering<\/p>\n<h2><span class=\"ez-toc-section\" id=\"1_JavaScript-utmaningar_for_SEO\"><\/span><strong>1. JavaScript-utmaningar f\u00f6r SEO<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>React, Vue, Angular, Node och Polymer.  Om \u00e5tminstone ett av dessa tjusiga namn l\u00e5ter bekanta f\u00f6r dig, \u00e4r chansen stor att du redan har att g\u00f6ra med en JavaScript-driven webbplats.<\/p>\n<p>Alla dessa JavaScript-ramverk ger stor flexibilitet och kraft till moderna webbplatser.<\/p>\n<p>De \u00f6ppnar upp ett brett utbud av m\u00f6jligheter n\u00e4r det g\u00e4ller rendering p\u00e5 klientsidan (som att till\u00e5ta sidan att renderas av webbl\u00e4saren ist\u00e4llet f\u00f6r servern), sidladdningsm\u00f6jligheter, dynamiskt inneh\u00e5ll, anv\u00e4ndarinteraktion och ut\u00f6kad funktionalitet.<\/p>\n<p>Om vi \u200b\u200bbara tittar p\u00e5 vad som har en inverkan p\u00e5 SEO, kan JavaScript-ramverk g\u00f6ra f\u00f6ljande f\u00f6r en webbplats:<\/p>\n<ul>\n<li>Ladda inneh\u00e5ll dynamiskt baserat p\u00e5 anv\u00e4ndarinteraktioner<\/li>\n<li>L\u00e4gg ut synligt inneh\u00e5ll p\u00e5 entreprenad (se rendering p\u00e5 klientsidan nedan)<\/li>\n<li>Outsourca laddningen av metainneh\u00e5ll eller kod (till exempel strukturerad data)<\/li>\n<\/ul>\n<p>Tyv\u00e4rr, om de implementeras utan att b\u00e4ra ett par SEO-glas\u00f6gon, kan JavaScript-ramverk utg\u00f6ra allvarliga utmaningar f\u00f6r sidans prestanda, allt fr\u00e5n hastighetsbrister till renderingsblockeringsproblem eller till och med hindra genoms\u00f6kning av inneh\u00e5ll och resultatl\u00e4nkar.<\/p>\n<p>Det finns m\u00e5nga aspekter som SEO:are m\u00e5ste ta h\u00e4nsyn till n\u00e4r de granskar en webbsida med JavaScript, vilket kan sammanfattas enligt f\u00f6ljande:<\/p>\n<ol>\n<li>Kan Googlebot se inneh\u00e5llet?  Kom ih\u00e5g att boten inte interagerar med sidan (bilder, flikar med mera).<\/li>\n<li>\u00c4r l\u00e4nkarna genoms\u00f6kbara och f\u00f6ljs d\u00e4rf\u00f6r?  Anv\u00e4nd alltid ankaret (<a>) och referensen (href =), \u00e4ven tillsammans med &#8220;onclick&#8221;-h\u00e4ndelserna.<\/a><\/li>\n<li>\u00c4r renderingen tillr\u00e4ckligt snabb?<\/li>\n<li>Hur p\u00e5verkar det sp\u00e5rningseffektiviteten och sp\u00e5rningsbudgeten?<\/li>\n<\/ol>\n<p>M\u00e5nga fr\u00e5gor att besvara.  S\u00e5 var ska en SEO b\u00f6rja?<\/p>\n<p>Nedan finns viktiga riktlinjer f\u00f6r JS-webbplatsoptimering, f\u00f6r att m\u00f6jligg\u00f6ra anv\u00e4ndningen av dessa ramverk och h\u00e5lla s\u00f6krobotar n\u00f6jda.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"2_Representation_pa_klientsidan_och_serversidan_de_basta_%E2%80%9Cfienderna%E2%80%9D\"><\/span><strong>2. Representation p\u00e5 klientsidan och serversidan: de b\u00e4sta &#8220;fienderna&#8221;<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>F\u00f6rmodligen den viktigaste kunskapen som alla SEOs beh\u00f6ver n\u00e4r de hanterar JS-drivna webbplatser \u00e4r begreppen klient- och serversidans rendering.<\/p>\n<p>Att f\u00f6rst\u00e5 skillnaderna, f\u00f6rdelarna och nackdelarna med b\u00e5da \u00e4r viktigt f\u00f6r att implementera r\u00e4tt SEO-strategi och inte g\u00e5 vilse n\u00e4r man pratar med mjukvaruingenj\u00f6rer (som s\u00e5 sm\u00e5ningom \u00e4r ansvariga f\u00f6r att implementera den strategin).<\/p>\n<p>L\u00e5t oss se hur Googlebot genoms\u00f6ker och indexerar sidor, och betraktar det som en mycket grundl\u00e4ggande sekventiell process:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-123897 aligncenter\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/Un-kit-de-supervivencia-para-sitios-web-JavaScript-compatibles-con.png\" alt=\"hur googlebot genoms\u00f6ker och indexerar sidor\" width=\"559\" height=\"250\"><\/p>\n<p>1. Klienten (webbl\u00e4saren) g\u00f6r flera f\u00f6rfr\u00e5gningar till servern f\u00f6r att ladda ner all n\u00f6dv\u00e4ndig information som sidan s\u00e5 sm\u00e5ningom kommer att visa.  Vanligtvis h\u00e4nvisar den f\u00f6rsta beg\u00e4ran till det statiska HTML-dokumentet.<\/p>\n<p>2. D\u00e4refter laddas CSS- och JS-filerna, som HTML-dokumentet refererar till, ned: det h\u00e4r \u00e4r stilarna, skripten och tj\u00e4nsterna som hj\u00e4lper till att skapa sidan.<\/p>\n<p>3. Webbplats\u00e5tergivningstj\u00e4nsten (WRS) analyserar och k\u00f6r JavaScript (som kan hantera hela eller delar av inneh\u00e5llet eller bara enkel funktionalitet).<br \/>Detta JavaScript kan levereras till boten p\u00e5 tv\u00e5 olika s\u00e4tt:<\/p>\n<ul>\n<li>Klientsidan: allt arbete \u00e4r i princip &#8220;outsourcat&#8221; till WRS, som nu ansvarar f\u00f6r att ladda alla skript och bibliotek som kr\u00e4vs f\u00f6r att rendera inneh\u00e5llet.  F\u00f6rdelen f\u00f6r servern \u00e4r att n\u00e4r en riktig anv\u00e4ndare beg\u00e4r sidan sparar den mycket resurser, eftersom exekveringen av skripten sker p\u00e5 webbl\u00e4sarsidan.<\/li>\n<li>Serversidan: Allt \u00e4r f\u00f6rbakat (aka renderat) av servern och det slutliga resultatet skickas till boten, redo att genoms\u00f6ka och indexera.  Nackdelen h\u00e4r \u00e4r att allt arbete g\u00f6rs internt av servern och inte outsourcas till klienten, vilket kan leda till ytterligare f\u00f6rseningar i att skicka in ytterligare f\u00f6rfr\u00e5gningar.<\/li>\n<\/ul>\n<p>4. Koffein (Googles indexerare) indexerar inneh\u00e5llet som hittas<\/p>\n<p>Nya l\u00e4nkar uppt\u00e4cks i inneh\u00e5llet f\u00f6r att forts\u00e4tta genoms\u00f6ka<\/p>\n<p>Detta \u00e4r teorin, men i den verkliga v\u00e4rlden har Google inte o\u00e4ndliga resurser och m\u00e5ste s\u00e4tta vissa prioriteringar vid genoms\u00f6kning.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"3_Hur_Google_genomsoker_webbplatser\"><\/span><strong>3. Hur Google genoms\u00f6ker webbplatser<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Google \u00e4r en v\u00e4ldigt smart s\u00f6kmotor med v\u00e4ldigt smarta s\u00f6krobotar.<\/p>\n<p>Men det tar vanligtvis ett reaktivt tillv\u00e4gag\u00e5ngss\u00e4tt n\u00e4r det kommer till ny teknik som till\u00e4mpas p\u00e5 webbutveckling.  Det betyder att det \u00e4r Google och dess bots som beh\u00f6ver anpassa sig till nya ramverk i takt med att de blir mer och mer popul\u00e4ra (som \u00e4r fallet med JavaScript).<\/p>\n<p>Av denna anledning \u00e4r s\u00e4ttet som Google genoms\u00f6ker JS-drivna webbplatser fortfarande l\u00e5ngt ifr\u00e5n perfekt, med blinda fl\u00e4ckar som mjukvaru- och SEO-ingenj\u00f6rer m\u00e5ste mildra p\u00e5 n\u00e5got s\u00e4tt.<\/p>\n<p>Detta \u00e4r i ett n\u00f6tskal hur Google genoms\u00f6ker dessa webbplatser:<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-123898 aligncenter\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633623373_333_Un-kit-de-supervivencia-para-sitios-web-JavaScript-compatibles-con.png\" alt=\"hur googlebot genoms\u00f6ker en JS-renderad webbplats\" width=\"468\" height=\"266\"><\/p>\n<p>Grafen ovan delades av Tom Greenaway p\u00e5 Google IO 2018-konferensen, och vad den i grund och botten s\u00e4ger \u00e4r: om du har en webbplats som \u00e4r starkt beroende av JavaScript, b\u00f6r du ladda JS-inneh\u00e5llet v\u00e4ldigt snabbt, annars kommer vi inte att kunna representera den (d\u00e4rav indexera den) under den f\u00f6rsta v\u00e5gen, och den kommer att skjutas upp till en andra v\u00e5g, som ingen vet n\u00e4r kan intr\u00e4ffa.<\/p>\n<p>D\u00e4rf\u00f6r kommer ditt JavaScript-baserade renderade inneh\u00e5ll p\u00e5 klientsidan f\u00f6rmodligen att renderas av bots i den andra v\u00e5gen, eftersom de under den f\u00f6rsta v\u00e5gen kommer att ladda ditt inneh\u00e5ll p\u00e5 serversidan, vilket borde vara tillr\u00e4ckligt snabbt.  Men de vill inte l\u00e4gga f\u00f6r mycket resurser och ta p\u00e5 sig f\u00f6r m\u00e5nga uppgifter.<\/p>\n<p>Med Tom Greenaways ord:<\/p>\n<p>&#8220;Renderingen av JavaScript-drivna webbplatser i Google S\u00f6k skjuts upp tills Googlebot har tillg\u00e4ngliga resurser f\u00f6r att bearbeta inneh\u00e5llet.&#8221;<\/p>\n<p>Konsekvenserna f\u00f6r SEO \u00e4r enorma, ditt inneh\u00e5ll kanske inte uppt\u00e4cks f\u00f6rr\u00e4n en, tv\u00e5 eller till och med fem veckor senare och under tiden kommer bara din sida utan inneh\u00e5ll att utv\u00e4rderas och rankas av algoritmen.<\/p>\n<p>Det som borde oroa en SEO mest vid det h\u00e4r laget \u00e4r denna enkla ekvation:<\/p>\n<p>Inget inneh\u00e5ll hittades = Inneh\u00e5ll (f\u00f6rmodligen) kan knappast indexeras<\/p>\n<p>Och hur skulle du ranka en sida utan inneh\u00e5ll?  L\u00e4tt att gissa f\u00f6r vilken SEO som helst.<\/p>\n<p>\u00c4n s\u00e5 l\u00e4nge \u00e4r allt bra.  N\u00e4sta steg \u00e4r att veta om inneh\u00e5llet renderas p\u00e5 klientsidan eller serversidan (utan att fr\u00e5ga mjukvaruingenj\u00f6rer).<\/p>\n<h2><span class=\"ez-toc-section\" id=\"4_Hur_man_upptacker_renderat_innehall_pa_klientsidan\"><\/span><strong>4. Hur man uppt\u00e4cker renderat inneh\u00e5ll p\u00e5 klientsidan<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<h3><span class=\"ez-toc-section\" id=\"Alternativ_ett_dokumentobjektmodellen_DOM\"><\/span><strong>Alternativ ett: dokumentobjektmodellen (DOM)<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Det finns flera s\u00e4tt att veta det, och f\u00f6r detta m\u00e5ste vi introducera begreppet DOM.<\/p>\n<p>Dokumentobjektmodellen definierar strukturen f\u00f6r ett HTML (eller XML) dokument och hur dessa dokument kan n\u00e5s och manipuleras.<\/p>\n<p>Inom SEO och mjukvaruteknik refererar vi i allm\u00e4nhet till DOM som det slutliga HTML-dokumentet som genereras av webbl\u00e4saren, i motsats till det ursprungliga statiska HTML-dokumentet som finns p\u00e5 servern.<\/p>\n<p>Du kan t\u00e4nka p\u00e5 HTML som stammen p\u00e5 ett tr\u00e4d.  Du kan l\u00e4gga till grenar, l\u00f6v, blommor och frukter (som \u00e4r DOM).<\/p>\n<p>Vad JavaScript g\u00f6r \u00e4r att manipulera HTML och skapa en rik DOM som l\u00e4gger till funktionalitet och inneh\u00e5ll.<\/p>\n<p>I praktiken kan du kontrollera den statiska HTML-koden genom att trycka p\u00e5 &#8220;Ctrl + U&#8221; p\u00e5 vilken sida du tittar p\u00e5, och DOM genom att &#8220;Inspektera&#8221; sidan n\u00e4r den \u00e4r fulladdad.<\/p>\n<p>F\u00f6r det mesta, f\u00f6r moderna webbplatser, kommer du att se att de tv\u00e5 dokumenten \u00e4r ganska olika.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alternativ_tva_Chrome-profil_utan_JS\"><\/span><strong>Alternativ tv\u00e5: Chrome-profil utan JS <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Skapa en ny profil i Chrome och inaktivera JavaScript via inneh\u00e5llsinst\u00e4llningarna (\u00e5tkomst till dem direkt h\u00e4r \u2013 Chrome:\/\/settings\/content).<\/p>\n<p>Alla webbadresser som du navigerar till med den h\u00e4r profilen kommer inte att ladda n\u00e5got JS-inneh\u00e5ll.  D\u00e4rf\u00f6r identifierar varje blanksteg p\u00e5 din sida ett inneh\u00e5ll som visas p\u00e5 klientsidan.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alternativ_tre_Utforska_som_Google_i_Google_Search_Console\"><\/span><strong>Alternativ tre: Utforska som Google i Google Search Console<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>S\u00e5 l\u00e4nge din webbplats \u00e4r registrerad med Google Search Console (jag kan inte komma p\u00e5 n\u00e5gon bra anledning till varf\u00f6r det inte skulle vara det), anv\u00e4nd verktyget &#8220;Utforska som Google&#8221; i den \u00e4ldre versionen av konsolen.  Detta kommer att returnera en representation av hur Googlebot ser sidan och en representation av hur en normal anv\u00e4ndare ser den.  Finns det m\u00e5nga skillnader?<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alternativ_fyra_Kor_Chrome_version_41_i_huvudlost_lage_Chromium\"><\/span><strong>Alternativ fyra: K\u00f6r Chrome version 41 i huvudl\u00f6st l\u00e4ge (Chromium) <\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Google uppgav officiellt i b\u00f6rjan av 2018 att de anv\u00e4nder en \u00e4ldre version av Chrome (s\u00e4rskilt version 41, som vem som helst kan ladda ner h\u00e4rifr\u00e5n) i huvudl\u00f6st l\u00e4ge f\u00f6r att rendera webbplatser.  Huvudkonsekvensen \u00e4r att en sida som inte visas bra i den versionen av Chrome kan vara f\u00f6rem\u00e5l f\u00f6r vissa genoms\u00f6kningsproblem.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Alternativ_fem_genomsok_sidan_pa_Screaming_Frog_med_Googlebot\"><\/span><strong>Alternativ fem: genoms\u00f6k sidan p\u00e5 Screaming Frog med Googlebot<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Och med JavaScript-\u00e5tergivningsalternativet inaktiverat.  Kontrollera om boten renderar inneh\u00e5ll och metainneh\u00e5ll korrekt.<\/p>\n<p>Efter alla dessa kontroller, fr\u00e5ga dina mjukvaruingenj\u00f6rer eftersom du inte vill l\u00e4mna n\u00e5gra l\u00f6sa tr\u00e5dar.<\/p>\n<h2><span class=\"ez-toc-section\" id=\"5_Losningarna_hybrid_rendering_och_dynamisk_rendering\"><\/span><strong>5. L\u00f6sningarna: hybrid rendering och dynamisk rendering<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Att be en mjukvaruingenj\u00f6r att \u00e5ngra mycket utvecklingsarbete eftersom det skadar SEO kan vara en sv\u00e5r uppgift.<\/p>\n<p>Det h\u00e4nder ofta att SEO:er inte \u00e4r inblandade i utvecklingsprocessen, och bara kallas in n\u00e4r all infrastruktur \u00e4r p\u00e5 plats.<\/p>\n<p>Vi SEO:are b\u00f6r arbeta f\u00f6r att f\u00f6rb\u00e4ttra v\u00e5r relation med mjukvaruingenj\u00f6rer och g\u00f6ra dem medvetna om de enorma konsekvenser som alla innovationer kan ha p\u00e5 SEO.<\/p>\n<p>S\u00e5 h\u00e4r kan du undvika ett problem som tomma sidor i f\u00f6rsta hand.  L\u00f6sningen ligger i tv\u00e5 tillv\u00e4gag\u00e5ngss\u00e4tt.<\/p>\n<h3><span class=\"ez-toc-section\" id=\"Hybrid_representation\"><\/span><strong>Hybrid representation<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Detta tillv\u00e4gag\u00e5ngss\u00e4tt, \u00e4ven k\u00e4nt som isomorft JavaScript, syftar till att minimera behovet av rendering p\u00e5 klientsidan och g\u00f6r ingen skillnad mellan bots och riktiga anv\u00e4ndare.<\/p>\n<p>Hybridrepresentationen f\u00f6resl\u00e5r f\u00f6ljande:<\/p>\n<ol>\n<li>F\u00f6r det f\u00f6rsta k\u00f6rs all icke-interaktiv kod (inklusive all JavaScript) p\u00e5 serversidan f\u00f6r att rendera statiska sidor.  Allt inneh\u00e5ll \u00e4r synligt f\u00f6r b\u00e5de s\u00f6krobotar och anv\u00e4ndare n\u00e4r de g\u00e5r in p\u00e5 sidan.<\/li>\n<li>\u00c5 andra sidan exekverar klienten (webbl\u00e4saren) endast de interaktiva resurserna med anv\u00e4ndaren.  Detta gynnar sidladdningshastigheten eftersom mindre rendering p\u00e5 klientsidan beh\u00f6vs.<\/li>\n<\/ol>\n<h3><span class=\"ez-toc-section\" id=\"Dynamisk_rendering\"><\/span><strong>Dynamisk rendering<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Detta tillv\u00e4gag\u00e5ngss\u00e4tt syftar till att uppt\u00e4cka f\u00f6rfr\u00e5gningar fr\u00e5n en bot kontra de som g\u00f6rs av en anv\u00e4ndare och servar sidan d\u00e4refter.<\/p>\n<ol>\n<li>Om beg\u00e4ran kommer fr\u00e5n en anv\u00e4ndare: servern levererar den statiska HTML-koden och anv\u00e4nder rendering p\u00e5 klientsidan f\u00f6r att bygga DOM och rendera sidan.<\/li>\n<li>Om beg\u00e4ran kommer fr\u00e5n en bot: Servern f\u00f6rbehandlar JavaScript genom en intern processor (som Puppeteer) och levererar den nya statiska HTML-koden (DOM, manipulerad av JavaScript) till boten.<\/li>\n<\/ol>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-123899 aligncenter\" src=\"https:\/\/blogging-techies.com\/wp-content\/uploads\/2021\/10\/1633623373_580_Un-kit-de-supervivencia-para-sitios-web-JavaScript-compatibles-con.png\" alt=\"hur google g\u00f6r dynamisk javascript-webbplatsrendering\" width=\"555\" height=\"250\"><\/p>\n<h3><span class=\"ez-toc-section\" id=\"Det_basta_av_bada_varldar\"><\/span><strong>Det b\u00e4sta av b\u00e5da v\u00e4rldar<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n<p>Att kombinera de tv\u00e5 l\u00f6sningarna kan ocks\u00e5 ge stora f\u00f6rdelar f\u00f6r b\u00e5de anv\u00e4ndare och bots.<\/p>\n<ol>\n<li>Anv\u00e4nd hybridrendering om beg\u00e4ran kommer fr\u00e5n en anv\u00e4ndare<\/li>\n<li>Anv\u00e4nd rendering p\u00e5 serversidan om beg\u00e4ran kommer fr\u00e5n en bot<\/li>\n<\/ol>\n<h2><span class=\"ez-toc-section\" id=\"Slutsats\"><\/span><strong>Slutsats<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>Eftersom anv\u00e4ndningen av JavaScript p\u00e5 moderna webbplatser v\u00e4xer dag f\u00f6r dag, \u00f6ver m\u00e5nga l\u00e4tta och enkla ramverk, m\u00e5ste mjukvaruingenj\u00f6rer f\u00f6rlita sig enbart p\u00e5 HTML f\u00f6r att tillfredsst\u00e4lla s\u00f6kmotorrobotar, vilket varken \u00e4r realistiskt eller genomf\u00f6rbart. .<\/p>\n<p>De SEO-problem som v\u00e4cker renderingsl\u00f6sningar p\u00e5 klientsidan kan dock l\u00f6sas framg\u00e5ngsrikt p\u00e5 olika s\u00e4tt med hybridrendering och dynamisk rendering.<\/p>\n<p>Att k\u00e4nna till den tillg\u00e4ngliga tekniken, din webbplatsinfrastruktur, ingenj\u00f6rer och l\u00f6sningar kan s\u00e4kerst\u00e4lla framg\u00e5ngen f\u00f6r din SEO-strategi \u00e4ven i komplicerade milj\u00f6er som JavaScript-webbplatser.<\/p>\n<p>Giorgio Franco \u00e4r senior teknisk SEO-specialist p\u00e5 Vistaprint.<\/p>\n  <div id=\"ez-toc-container\" class=\"ez-toc-v2_0_88 ez-toc-wrap-center counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"Toggle Table of Content\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 eztoc-toggle-hide-by-default' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#1_JavaScript-utmaningar_for_SEO\" >1. JavaScript-utmaningar f\u00f6r SEO<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#2_Representation_pa_klientsidan_och_serversidan_de_basta_%E2%80%9Cfienderna%E2%80%9D\" >2. Representation p\u00e5 klientsidan och serversidan: de b\u00e4sta &#8220;fienderna&#8221;<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#3_Hur_Google_genomsoker_webbplatser\" >3. Hur Google genoms\u00f6ker webbplatser<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#4_Hur_man_upptacker_renderat_innehall_pa_klientsidan\" >4. Hur man uppt\u00e4cker renderat inneh\u00e5ll p\u00e5 klientsidan<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Alternativ_ett_dokumentobjektmodellen_DOM\" >Alternativ ett: dokumentobjektmodellen (DOM)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Alternativ_tva_Chrome-profil_utan_JS\" >Alternativ tv\u00e5: Chrome-profil utan JS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Alternativ_tre_Utforska_som_Google_i_Google_Search_Console\" >Alternativ tre: Utforska som Google i Google Search Console<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Alternativ_fyra_Kor_Chrome_version_41_i_huvudlost_lage_Chromium\" >Alternativ fyra: K\u00f6r Chrome version 41 i huvudl\u00f6st l\u00e4ge (Chromium)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Alternativ_fem_genomsok_sidan_pa_Screaming_Frog_med_Googlebot\" >Alternativ fem: genoms\u00f6k sidan p\u00e5 Screaming Frog med Googlebot<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#5_Losningarna_hybrid_rendering_och_dynamisk_rendering\" >5. L\u00f6sningarna: hybrid rendering och dynamisk rendering<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Hybrid_representation\" >Hybrid representation<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Dynamisk_rendering\" >Dynamisk rendering<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Det_basta_av_bada_varldar\" >Det b\u00e4sta av b\u00e5da v\u00e4rldar<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/blogging-techies.com\/sw\/ett-survival-kit-for-seo-vanliga-javascript-webbplatser\/#Slutsats\" >Slutsats<\/a><\/li><\/ul><\/nav><\/div>\n ","protected":false},"excerpt":{"rendered":"<p>JavaScript-webbplatser \u00e4r h\u00e4r f\u00f6r att stanna. Eftersom JavaScript i dess m\u00e5nga ramverk blir en allt mer popul\u00e4r resurs f\u00f6r moderna webbplatser, m\u00e5ste SEO:are kunna s\u00e4kerst\u00e4lla att deras tekniska implementering \u00e4r s\u00f6kmotorv\u00e4nlig. I den h\u00e4r artikeln kommer vi att fokusera p\u00e5 hur man optimerar JS-webbplatser f\u00f6r Google (\u00e4ven om Bing ocks\u00e5 rekommenderar samma l\u00f6sning, dynamisk rendering). [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":784302,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/blogging-techies.com\/wp-content\/uploads\/2023\/06\/22.png","fifu_image_alt":"","footnotes":""},"categories":[5],"tags":[],"class_list":["post-784301","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-bloggar"],"_links":{"self":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/784301","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/comments?post=784301"}],"version-history":[{"count":0,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/posts\/784301\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media\/784302"}],"wp:attachment":[{"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/media?parent=784301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/categories?post=784301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blogging-techies.com\/sw\/wp-json\/wp\/v2\/tags?post=784301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}