The playground

More information here

Angular Universal: co potřebujete vědět pro SEO

Zaregistrujte se pro naše každodenní rekapitulace neustále se měnícího prostředí marketingu vyhledávání. Poznámka: odesláním tohoto formuláře souhlasíte s podmínkami Third Door Media. Respektujeme vaše soukromí. John E Lincoln dne 1. února 2019 v 9:53 am Kategorie:Všechny Věci, SEO Sloupec, Kanál: SEO Pokud používáte Úhlovou k moci vaše webové stránky, pak máte další překážkou ke kříži, […]

Zaregistrujte se pro naše každodenní rekapitulace neustále se měnícího prostředí marketingu vyhledávání.

Poznámka: odesláním tohoto formuláře souhlasíte s podmínkami Third Door Media. Respektujeme vaše soukromí.

John E Lincoln dne 1. února 2019 v 9:53 am

  • Kategorie:Všechny Věci, SEO Sloupec, Kanál: SEO
  • Pokud používáte Úhlovou k moci vaše webové stránky, pak máte další překážkou ke kříži, když přijde na SEO. Naštěstí úhlová univerzální umožňuje snadné přeskočení.

    mějte na paměti, že „easy“ je zde relativní pojem. Je tam docela dost technických kouzel.

    budete téměř jistě potřebovat zapojit vývojový tým.

    ale jakmile je hotový produkt dodán, váš web bude sloužit optimalizovaným stránkám, které vyhledávače snadno vyhledají a indexují.

    v této příručce vysvětlím Angular Universal a proč je pro obchodníky důležité.

    problém SEO

    Angular je fantastický rámec pro poskytování modulárních, uživatelsky přívětivých webových aplikací. Bohužel je to trochu nepřátelské vůči SEO.

    to je ze dvou důvodů.

    nejprve se Angular silně spoléhá na skript pro doručování obsahu. Výsledkem je, že někteří vyhledávací roboti“ nevidí “ obsah, který uživatel vidí.

    podívejte se na úhlovou univerzální dokumentaci. Tato stránka je, nepřekvapivě, vykreslen s hranatým.

    při posouvání dolů uvidíte docela dost obsahu. Člověk by řekl, že je to všechno indexovatelné.

    ne nutně. Klepněte pravým tlačítkem myši na stránku a v zobrazené kontextové nabídce vyberte „Zobrazit zdroj stránky“.

    existuje pouze 100 řádků zdrojového kódu. Nikde tam neuvidíte obsah, který jste viděli při normálním prohlížení stránky.

    to je ve zkratce problém s úhlovým. Lidští návštěvníci uvidí obsah, ale vyhledávací roboti uvidí zdroj.

    a zdroj nemá obsah!

    je tu další SEO problém: rychlost. Úhlové aplikace se často nenačítají rychle.

    některé weby zobrazí prázdnou obrazovku několik sekund před zobrazením domovské stránky. To může způsobit, že návštěvníci budou netrpěliví.

    Rychlost webu je faktor mobilního hodnocení, takže vaše pozice bude zasažena, pokud se váš web nenačte rychle na mobilních platformách.

    ale Google říká …

    Google tvrdí, že jeho bot může indexovat stránky založené na skriptech. Existuje spousta důkazů, které to podporují,ale to neznamená, že se při optimalizaci úhlového místa můžete vyhnout další míli.

    pro začátek Není Google jediným vyhledávačem ve městě. Pokud chcete, aby se vaše úhlová aplikace umístila na Bing a DuckDuckGo, budete muset podniknout kroky, aby se to stalo.

    dále se může stát, že Google může indexovat některé Úhlové weby,ale ne vaše. Ne všechny úhlové aplikace jsou vytvořeny stejné. Vaše může být výjimkou z algoritmu indexování společnosti Google.

    podle mých zkušeností, weby, které se pohybují z HTML do Úhlové volné masivní provoz z vyhledávače většinu času. Za poslední rok mi totiž přišli tři klienti, kde jsme po propadech kvůli Úhlové museli místo opravit.

    existují řešení

    naštěstí existují způsoby, jak učinit váš úhlový web SEO přátelským.

    jednou z nejoblíbenějších možností je použití dynamického Vykreslování. To je, když používáte nástroj jako Puppeteer ke generování statických souborů HTML, které webové prohledávače mohou snadněji konzumovat.

    Pak, nakonfigurujte webový server tak, aby přímé vyhledávací roboty, aby pre-tavené stránek, zatímco lidské návštěvníky pohybovat kolem normální Úhlové aplikace.

    to je slušné řešení, ale stále neřeší problém s rychlostí. Za to budete pravděpodobně chtít jít s úhlovou univerzálností.

    co je Úhlové univerzální?

    Angular Universal spustí vaši webovou aplikaci na serveru, na rozdíl od jejího spuštění v prohlížeči.

    to je důležitý rozdíl. Úhlové aplikace jsou obvykle aplikace na straně klienta.

    problém pro vyhledávací roboty je, že nemají vždy „proces“ na straně klienta kód, jako je váš prohlížeč dělá, když to slouží vám webové stránky. Proto jste viděli rozpor mezi stránkou Úhlové univerzální dokumentace a jejím zdrojovým kódem.

    Angular Universal zpracovává Vykreslování na straně serveru (SSR). Předem vykresluje obsah HTML a CSS zobrazený uživateli předem.

    to znamená, že uživatel načte statickou stránku HTML namísto kódu na straně klienta. V důsledku toho se stránka načte rychleji.

    také, protože je to statické HTML, vyhledávací roboti mohou indexovat obsah.

    každý vyhrává.

    proč je to důležité

    Pokud jste v digitálním marketingu, pak už víte, že velká část bitvy zahrnuje získání expozice online. Proto oslovujete vlivné osoby, zveřejňujte aktualizace na sociálních médiích a optimalizujte své stránky tak, aby se dobře hodily.

    jednoduše řečeno: váš web se nemůže zařadit, pokud nemůže být indexován. Pokud Angular napájí váš web, musíte podniknout další kroky, abyste se ujistili, že se jeho obsah objeví ve vyhledávačích.

    proto potřebujete Úhlové univerzální řešení.nevýhodou samozřejmě je, že to bude stát peníze. K přidání SSR na váš web budete muset najmout kvalifikovaný vývojový tým.

    to je náklad, který by měl více než platit za sebe v průběhu času, pokud se váš web řadí dobře pro klíčové hledané výrazy související s vaším výklenkem.

    jak spustit aplikaci Angular na Angular Universal

    Pokud jste někdo, kdo si rád zašpiní ruce kódem nebo chcete ušetřit náklady na vývoj, můžete nasadit aplikaci na straně serveru sami.

    než to uděláte, je nejlepší, pokud máte základní znalosti o Angular, rozhraní příkazového řádku (CLI), TypeScript a webových serverech. V opačném případě budete pravděpodobně bojovat.

    kroky k nasazení Úhlové univerzální aplikace jsou následující:

    • Nainstalovat potřebné závislosti
    • Aktualizace Úhlové aplikace
    • Použití CLI vybudovat Univerzální svazek
    • Nastavit server spustit Universal bundle
    • Spuštění aplikace na serveru

    Tam je docela dost na těch pět kroků, tak jsem si zakrýt postupně v následujících kapitolách.

    nainstalujte závislosti

    Pokud máte nějaké zkušenosti s Angular, pak již víte o Node.js. To je runtime, který transponuje kód strojopisu do aplikace JavaScript.

    uzel.js přichází se správcem balíčků, nepředstavitelně pojmenovaným Node Package Manager nebo zkráceně npm. Použijete to k instalaci závislostí.

    Protipožární okno příkazový řádek a spusťte následující kód:

    npm nainstalovat –zachránit @úhlové/platforma-server @nguniversal/modul-mapa-ngfactory-nakladač ts-loader

    Dát pár chvil (nebo mnoho momentů) nainstalovat vše.

    aktualizujte aplikaci Angular

    Dále budete muset připravit aplikaci Angular pro univerzální nasazení. To zahrnuje čtyři kroky:

    • přidat univerzální podporu. Otevřete kořenový modul (obvykle AppModule) a přidejte ID aplikace do browsermodule importu. Uděláte to v sekci „import“ těsně pod deklarací @NgModule.
    • Vytvořte kořenový modul serveru.Dále musíte vytvořit nový modul s názvem AppServerModule. Ujistěte se, že importuje ServerModule ze závislosti platforma-server, kterou jste přidali v předchozím kroku.
    • vytvořte hlavní soubor. Budete potřebovat hlavní Soubor pro váš univerzální balíček. Vytvořte to v kořenovém adresáři (ve složce src) a exportujte třídu AppServerModule z tohoto souboru.
    • Vytvořte konfigurační soubor. Třída AppServerModule potřebuje konfigurační soubor. Vytvořte jeden ve formátu JSON. Mělo by to vypadat takto:

    vytvořte nový cíl sestavení

    váš úhlový zdrojový adresář by měl obsahovat soubor s názvem angular.json. Tento soubor budete muset aktualizovat v části“ Architekt“.

    bude to vypadat takto:

    „architect“: {
    „build“: { … }
    „server“: {
    „builder“: „@úhlové-devkit/build-hranatý:server“
    „options“: {
    „outputPath“: „dist/my-project-server“
    „hlavní“: „src/main.Server.ts“,
    „tsConfig“: „src/tsconfig.Server.json „
    }
    }
    }

    Všimněte si atributu“ builder “ o čtyři řádky dolů. Hodnota za dvojtečkou („server“) je název serveru. Můžete to aktualizovat, pokud chcete pojmenovat něco jiného.

    Nyní si můžete vytvořit aplikaci. Za předpokladu, že jste si ponechali server s názvem „server“, přejděte na příkazový řádek a zadejte následující:

    ng spustit můj-projekt:server

    měli Byste vidět výstup, který vypadá něco jako toto:

    Datum: 2018-12-12T12:42:09.601 Z
    Hash: 1caced0e9434007fd7ac
    Čas: 4122ms
    kus {0} hlavní.js (main) 9.49 kB
    chunk {1} styly.css (styly) 0 bajtů

    Nastavení serveru

    Next, musíte nastavit Univerzální server spusťte balíček. Takto aplikaci serializujete a vrátíte ji do prohlížeče.

    Chcete-li, aby se to stalo, vytvořte nový soubor s názvem server.ts. V tomto souboru definujete svůj App engine.

    podrobnosti o tomto kódu jsou trochu mimo rozsah tohoto tutoriálu. Neváhejte se podívat na příklad v úhlových univerzálních dokumentech.

    Spusťte aplikaci na serveru

    po tom všem jste konečně v bodě, kde můžete aplikaci spustit na serveru.

    Chcete-li to provést, nastavte webpack, který zpracovává server.ts soubor, který jste vytvořili v předchozím kroku.

    pojmenujte konfigurační soubor webpack.Server.konfigurace.js. Ještě jednou, podívejte se na Úhlové univerzální dokumenty pro přesný druh kódu, který patří do souboru. Možná budete muset tento kód přizpůsobit své vlastní konvenci pojmenování.

    po dokončení souboru budete mít ve složce dist dvě složky: prohlížeč a server.

    Chcete-li spustit kód serveru, zadejte do příkazového řádku následující:

    node dist/server.js

    Gratulujeme! Nyní používáte kód na straně serveru.

    zabalení

    ačkoli Angular umožňuje vývojářům rychle vytvářet vysoce kvalitní aplikace, nemusí vždy hrát pěkně s roboty vyhledávačů.

    naštěstí Angular Universal může předem vykreslit stránky Angular app jako statické HTML, takže jsou zjistitelné a indexovatelné. Také se načtou rychleji.

    vždy bylo mým doporučením mít HTML základnu a používat Angular k doručování dalších prvků na stránce. Toto doporučení dělám o všem, co souvisí s JavaScriptem od roku 2010. Tento proces Úhlové univerzálnosti je stejný princip. Nemohu říct, že máte mnoho stránek Úhlové a JavaScript redesigns zničily. Buďte opatrní s vašimi a vždy si to prověřuje společnost SEO před spuštěním.

    přihlaste se k odběru našich denních rekapitulací neustále se měnícího prostředí marketingu vyhledávání.

    Poznámka: odesláním tohoto formuláře souhlasíte s podmínkami Third Door Media. Respektujeme vaše soukromí.

    O Autorovi

    John E Lincoln

    John Lincoln je generální ŘEDITEL Zapálit Viditelnost, digitální marketingové agentury a Inc. 5000 Rota. Lincoln je trvale jmenován jedním z nejlepších marketingových odborníků v oboru. Byl držitelem ceny Search Engine Land „Search Marketér roku“, pojmenované # 1 SEO konzultant v USA Clutch.co, nejobdivovanějším generálním ředitelem a 40 pod 40. Lincoln napsal dvě knihy (The Forecaster Method a Digital Influencer) a natočil dva filmy (SEO: The Movie A Social Media Marketing: The Movie) o digitálním marketingu.

    Napsat komentář

    Vaše e-mailová adresa nebude zveřejněna.