Weboldal készítése 2021-ben: teljes útmutató példákkal

A weboldal elindítása az egyik legfontosabb lépés egy modern vállalkozás számára. Ez különösen igaz azokra, akik csak nemrég kezdtek el/mentek online. Sajnos az egyszer és mindenkorra elkészített weboldal sem opció: azoknak is alkalmazkodniuk kell a trendekhez és a változásokhoz, akik már régóta online vannak. Együtt megvizsgáljuk, mire van szüksége minden weboldalnak ahhoz, hogy 2021-ben sikeres legyen, és megosztunk néhány példát a Teksterra gyakorlatából.

Találjon egy egyedi értékesítési ajánlatot

A weboldal elkészítése során először is meg kell találnia a szakterületét. Ez nem azt jelenti, hogy egyedi képekkel kell rendelkezned és 80%+ az Adwego-n (bár természetesen ez is igaz). Az egyediség 2021-ben egy vállalkozás szokatlan jellemzője, amely megkülönbözteti azt a többitől. Hangsúlyozd ki, különben azt kockáztatod, hogy elveszel az információs zajban.
Weboldal készítése 2021-ben: Teljes útmutató példákkal.

A SOIC kereskedelmi kínálata például a fitokémiai anyagokból készült egészséges, megelőző hatású termékek előállítása. Egyediségük abban rejlik, hogy nem csak gyógynövény- és fitoteákat árulnak, hanem azt is elmondják a vásárlóknak, hogy a kollekció minden egyes összetevője mire való.

Egy másik példa arra, hogy az egyediség hogyan segít az értékesítésben, a rehabilitációs eszközök SMM-promóciója. A téma sajátosságai miatt a versenytársak egyszerűen félnek belépni a közösségi hálózatokba, mivel úgy gondolják: “Mivel nehéz elérni azokat, akik a vásárlási döntést hozzák, miért vesztegetnénk időt és idegeket?”. És ez nagy hiba!
Weboldal készítése 2021-ben: teljes útmutató példákkal.

Úgy döntöttünk, hogy egy merész és a maga nemében egyedülálló üzleti megközelítést alkalmazunk – elkezdtük a szimulátorokat a végfelhasználóknak (azoknak, akik ezekben a központokban edzenek) népszerűsíteni.

A Texterra szakértői úgy döntöttek, hogy szakértő barátként mutatják be a boltot, így az emberek elkezdtek bízni a márkában. Ez azt jelenti, hogy sok mozgáskorlátozott ember fontolóra veszi egy otthoni szimulátor megvásárlását, vagy egy adott szolgáltatót ajánl az oktatóknak.

Ha visszatérünk a weboldalakhoz, megnézhetjük a Buggy Boom játék- és babakocsiboltot. Általában a gyermekeknek szánt termékeket tartalmazó weboldalak hihetetlenül fényesek, mint a “12 színű” zsírkréták. Úgy döntöttünk, hogy eltérünk a szabványos sablontól, és gazdag, de kifinomult árnyalatokkal készítjük el a portált.

Válassza ki a termékeket itt lesz egy öröm, mint chadam, és a szülők. Az élénk képek a fiatalabb generációnak tetszeni fognak, míg a felnőttek a nemes színválasztékot fogják szeretni.

Előkészítő munka

A fejlesztés legfontosabb része a felkészülés. Még a tapasztalt szakemberek sem fogják létrehozni az álomoldalt, amíg nem rendelkeznek egy világos TOR-ral, ami csak az összes előkészítő munka teljes elvégzése után lehetséges.

Meg kell értenie, hogy kivel kell versenyeznie a felhasználó figyelméért és pénztárcájáért. Végezzen némi versenyinformációt a piaci réséről. Figyeljen arra, hogy versenytársai honlapjai hogyan vannak felépítve, milyen az Egyedi értékesítési ajánlatuk, a minőségük és a közösségi médiában való viselkedésük.

A vállalkozás SWOT-elemzése

Határozza meg a vállalat erősségeit, gyengeségeit, lehetőségeit és fenyegetéseit a horizonton. Értse meg, hogy az online hirdetendő USP hogyan fog kinézni a fogyasztó és a versenytársak szemében.

Például a barátságos bolti tanácsadók olyan offline USP-t jelentenek, amely arra ösztönzi az ügyfeleket, hogy offline is igénybe vegyék az Ön szolgáltatásait. Mi lesz a PPM azok számára, akik online veszik igénybe a szolgáltatásait? A versenytársak elemzésével Önön múlik, hogy eldöntse. Ez lehet azonnali szállítás “az ajtóban”, több tucat tesztelő/mintadarab biztosítása az első kattintásra stb.

Gondolkodjon az üzenetről, a honlap magjáról és hozzávetőleges “vázáról”.

Elemezte versenytársait és megtalálta a webTP-t? Gratulálok, most már csak szépen kell megtervezni. Gondolja végig az oldal üzenetét és küldetését.

Döntse el, hogyan fog kinézni az oldal. Hozzon létre egy durva szerkezetet, stílust és előadásmódot. E lépés után a fejedben már megvan a webhely “tervrajza”.Itt az ideje, hogy egy csapatot keress, amely segít elérni, amit szeretnél.
Ez bármilyen vállalkozásra vonatkozik, legyen szó akár egy nagy online áruházról vagy egy kisállatszálloda weboldaláról. Mindenhol előre átgondolt struktúrának kell lennie, különben a felhasználó nem fogja megérteni az Ön ajánlatát, és elszalad a versenytársakhoz.

Stratégia kiválasztása + kulcsszavak

Kialakított egy telephelyi stratégiát és annak térképét? Összegyűjtheti a kulcsszavakat. Nem kell rögtön “nagy fát” készítened. Néha, amikor a kulcsokkal dolgozik, észreveheti, hogy néhány lekérdezés nem érdekes a hitelesítésszolgáltató számára. Ebben a “fából készült” szerkezetben kötelező: nem kell ugyanazon az oldalon előmozdítani a szusi szállítást Moszkvában és Novoszibirszkben.

Hozzon létre egy “Sushi delivery” szekciót, és már ebből építsen “ágakat” azokban a városokban, ahol dolgozni fog. Egy ilyen struktúrával könnyebb lesz a népszerűsítés, és a jövőben könnyebb lesz a bővítés.

Ha valami “nem fog feljönni”, akkor könnyű lesz eltávolítani anélkül, hogy a webhely többi részét elkapná. Jobb, ha a projekt azon részeibe fektetünk időt és figyelmet, amelyek biztosan megtérülnek. Vagy ahol legalábbis ígéretesnek tűnik 🙂

A CMS kiválasztása

CMS (tartalomkezelő rendszer) – az egyik legfontosabb dolog az oldalépítésben. A megfelelő “admin panel” segít az összes ötlet megvalósításában, a gyors skálázásban és a kritikus hibák nélküli működésben. A szövegek esetében a WordPress ideális, és a Tilda is jól működik. Az üzletek számára a Bitrix és a Shoptet a legjobb választás.

Előkészítő munka a Google-lal

Ha már megvan a webcím, megtaláltad a tárhelyet, átgondoltad a TOC-ot és a weboldal szerkezetét, akkor jöhet a keresőmotorok előkészítő munkája.

• Profilok létrehozása a Google Business. Címtár.
• Adja hozzá vállalkozását a Google Maps. Térképek. Nem ártana hozzáadni az Apple és a Bing Térképeket.
• Minél több szolgáltatás indexeli Önt, annál jobb. Lehet, hogy még nincs honlapod, de egy oldal a térképen kötelező!
• Különben honnan fogják tudni az emberek, hogy a közelükben dolgozol?

A webhely magjával és struktúrájával való munka

Az első dolog, amit a vásárlás után hosting -, hogy dolgozzon át a mag a helyszínen (megteheti még korábban, senki sem tiltja). Továbbra is, mint egy csontváz, lesz rétegezve a többi részre, amíg készen nem áll a portál átadására.

Szemantikus mag létrehozása

Itt jönnek a képbe a SEO-specialisták. Meg kell találniuk a kulcsokat minden egyes oldalhoz, nem feledkezve meg a kis gyakoriságú és a nagy lekérdezésekről sem. Ha Ön egy induló vállalkozás, amelynek nincs sok pénze reklámra, akkor ők lesznek az Ön megmentői.

A nagyfrekvenciás lekérdezésekben irreális verseny van, és ha a mezőny már kialakult, akkor biztosan vannak “masztodonok”, akiknek még növekedniük kell / hatalmas mennyiségű hirdetési pénzt kell ölniük. A “közepes gyakoriságú” lekérdezések univerzálisak – elég gyakran kattintanak rájuk, bár a verseny még nem olyan nagy.

Ha úgy látja, hogy a webhely szemantikus magja és “vázlatos” szerkezete eltér egymástól, ne féljen megváltoztatni a szerkezetet. Ez a jövőben bármikor bővíthető/csökkenthető, de most a lehető legtöbb releváns kérdésre kell válaszolnia.

A “szemét” lekérdezések eltávolítása

A szemét lekérdezések azok, amelyek a témádhoz kapcsolódnak, de nem relevánsak a webhely témájához. Használja a szűrést a megállószavak, a konkrét szókincs, a földrajz és a helyesírás ellenőrzésével.
Weboldal készítése 2021-ben: teljes útmutató példákkal

Például, van 2 lekérdezés: “vásárolni őrölt kávét Moszkvában” és “vásárolni molata kohf Moszkvában”. A másodikat tiszta szívvel távolítsd el: a keresőmotor úgyis korrigálni fogja az elsőt, és megjeleníti a találatok között.

Grafikák és fényképek keveréke

A grafikai elemek fotókkal való kombinálásának trendje 2018 közepe körül kezdődött, és még mindig tart. Vegye fel: ez egy gyors és egyszerű módja annak, hogy “életet leheljen” egy weboldal grafikai komponensébe, és a fényképeket egyetlen kompozícióba kapcsolja össze.

A LISTME honlapja tökéletesen illusztrálja ezt. A szokatlan animációnak köszönhetően egy pillantással láthatja, hogy az egyedileg adaptált zöld növényzet hogyan kelti életre még az egyhangú irodát is.

Ezt a technikát a LEXXIS nyelviskola is alkalmazza. Ezáltal az oldal “élénkebbnek” és modernebbnek tűnik.

Az oldal elkészítése 2021-ben: teljes útmutató példákkal

Németh Mária,

A TexTerra tervezési vezetőjének helyettese

Gyakran keverjük a fotókat és a grafikákat, hogy változatosabbá tegyük a látványt. Lehet, hogy csak egy négyzet alakú fotót teszel fel, és egy unalmas, statikus kompozíciót kapsz. Vagy lekerekítheti a fotót, árnyékot vethet, repülési hatást, geometriai formákat hozhat létre, és dinamikát adhat hozzá. És most egy unalmas sablonból egy egyedi művet kapunk.

Ez volt a helyzet a lexxis projekt esetében is. Szembesültünk azzal a ténnyel, hogy a téma tartalmát tekintve nagyon terjedelmes. Nem lehet eltávolítani vagy csökkenteni. Már csak a diverzifikálás és a levegő hozzáadása volt hátra, amihez a vállalati vörös és bordó színt használtuk, ami részben tehermentesíti az oldalt, és eltereli róla a figyelmet. Kör alakú kör alakú körbe foglaltuk, és többféleképpen játszottunk a dizájnnal. Hozzáadtunk hozzájuk könnyű animációt, és itt, úgy tűnik, a szigorú, lakonikus oldal tipográfiával és serifekkel könnyen érzékelhetővé válik a különböző korosztályok számára.

Vektorgrafika

Alkalmazkodnia kell a mobilfelhasználókhoz. De hogyan csinálja, ha az egyik felhasználónak egy 3,5 hüvelykes papucs, a másiknak egy iPhone 11 Pro Max, a harmadik pedig kesztyűként cserélgeti az androidos telefonokat? Csak vektorgrafikával! Nincs pixelhatár, könnyen skálázható, és bármilyen átlóhoz alkalmazkodik, az okosórától a 4K tévéig.

Pontosan ezt tettük, amikor létrehoztuk az Imereti Shop szállítási weboldalát. A fő elemek vektoros formában készültek, így könnyen méretezhetőek, és bármilyen eszközről megtekinthetők.

További számok, adatok és kutatások

2020 folyamán az átlagfelhasználó már annyi Fake News-nak volt kitéve, hogy mostanra forrón fújja a szél. Ha már a kezdetektől fogva szeretnéd, hogy megszeressék a vállalkozásodat, oszd meg velük a számokat, tanítsd meg őket érdekes dolgokra. Gondolja át, hogyan lehet mindezt az analitikát a megfelelő módon bemutatni.

A TAISU-TB összoroszországi vámügyi képviselő például a minőségi tanúsítványokat és az elégedett ügyfelek listáját közvetlenül a honlapja címoldalán tette közzé.

Sötét színek

A sötét témák 2019-es megjelenése után ez a tervezési funkció nem gondolja, hogy feladja. A sötét háttér elegánsan néz ki, és nem “égeti ki a szemet”, mint a sötét szöveg fehér háttéren. Ráadásul az ilyen témák segítenek energiát megtakarítani és meghosszabbítani az OLED képernyők élettartamát.

A felület színeinek kiválasztásakor ne csak a trendek, hanem maga a márka, a szolgáltatás és a termék is vezérelje. A sötét “téma” nem mindenkinek való, de senki sem tiltja a szürke árnyalataival való “játékot” 😉

Németh Mária,

a TexTerra tervezési osztályának helyettes vezetője

A tervezők már majdnem egy éve aktívan használják a sötét témákat munkájukban. Sajnos, lehetetlen mindenki számára skálázni az élményt: vannak olyan témák, amelyek egyszerűen nem biztosítják ezt. A Runetben a sötét színeket általában a luxus szegmenshez vagy a szerencsejátékokhoz társítják – itt ez lesz a legorganikusabb és legharmonikusabb.

A Video Seeker projekt részeként úgy döntöttünk, hogy egy kicsit eltérünk a ki nem mondott szabályoktól, és egy konkrét kérésre fejlesztünk ki egy dizájnt – hogy megkülönböztessük magunkat a versenytársaktól, és megmutassuk a termék prémium jellegét. A kiválasztott színek segítségével hangsúlyoztuk, hogy a vállalat a mozgásanimáció és egyéb komplex mechanika piacán dolgozik.

A weboldal SEO-optimalizálása

A SEO-optimalizálás a legjobb helyezések kulcsa. Felvázoljuk azokat az alapvető lépéseket, amelyek segítenek elérni, amit szeretne.

Alapvető optimalizálás

Mint fentebb említettük, gondolnia kell a szerkezetre. Minél több következménye van, annál jobb. A következő alapkövetelményekről kap egy listát, így gyorsan ellenőrizheti webhelyét ezekre a paraméterekre vonatkozóan.

1. Semmi sem működik a Flashen. Ez elavult. Pont.
2. A szemantikus magot kifejezetten a népszerűsített oldalakhoz építik, és az oldal szerkezete teljesen összhangban van vele.
3. Helyes HTML-térkép.
4. Előírt metaadatok.
5. A duplikált és nem egyedi cím és leírás hiányzik.
6. Beállított https-protokoll. Ha az oldalnak vannak www-vel ellátott tükörképei, akkor ezek a fő verzióhoz vannak “ragasztva”.
7. A más domaineken lévő “tükrök” hiányoznak, vagy a 301-es átirányítással a főoldalhoz ragasztják őket. Ellenkező esetben szankciókra és az összes webhely blokkolására számíthat.
8. A zombi oldalakat eltávolítjuk és a duplikátumokat átirányítással ragasztjuk. Ez azért történik, hogy a promóciót egy adott oldalra összpontosítsuk, ahelyett, hogy 10 különböző oldalra szórnánk.
9. Szövegek tervezése + készítése a 3xx, 4xx, 5xx oldalakhoz és az online áruházak hiányzó termékfotóihoz. Mindenkinek vannak hibái, ezért vidítsa fel ügyfeleit az ilyen apróságok megoldásával.
10. A fájlok tömörítettek, és szinte semmi helyet nem foglalnak. Mindegyikük nyitott az indexelésre.
11. A portál rendelkezik Sitemap és Robots.txt fájlokkal, amelyeket rendszeresen frissítünk.
12. “A kenyérmorzsák be vannak állítva.
13. A W3C szabvány szerinti HTML-kódban nincsenek kritikus hibák.
14. Az oldal már szerepel a Google Webmester listáján. A Rambler és a Bing szintén hasznosak. Nézze meg az erőforrás régióját, és válassza ki a megfelelő keresőmotorokat a munkához.
15. URL-címek, amelyekben az összes szó latin betűkkel van írva. Például, ha a MacBook 2020 részre hivatkozol, az url-nek így kell kinéznie: pc / laptopok / apple, nem pedig pc / laptopok / -3n4oi#4t. Természetesen nincsenek tiltott vagy spam szavak, mint például fegyver, szex, erőszak. Ezt az online áruházakban található bármely termékkel kapcsolatban meg kell tenni.
16. A különböző böngészőkben és rendszerekben történő munka konfigurálása. Az okostelefonokon való munkavégzésre 3 lehetőség van: mobil verzió, adaptív elrendezés és dinamikus elrendezés. Válassza ki az Önnek legmegfelelőbbet.
17. Vélemények. Minden termék alatt tartalmazzon egy véleményezési részt. Továbbá, kerüljön fel a Google Business. Címtár, hogy az emberek véleményt írhassanak Önről. A valódi értékelések a bizalom további előnyét jelentik.

Weboldal készítése 2021-ben: teljes útmutató példákkal

Andor Nagy,

TexTerra projektmenedzser

Ha egy webáruházról van szó, ahol termékkártyák vannak, akkor az értékeléseknek mindig ott kell lenniük.

Először is, felhasználhatók a SEO-hoz. Például készítsen H2-fejlécet, és helyezze bele a H1-ben szereplő információkat. Példa: Oldal “FENDER CD-60 DREAD V3 DS BLK WN hangszórók” – “Véleményem a termékről FENDER CD-60 DREAD V3 DS BLK WN hangszórók”. Ez lehetővé teszi, hogy a lekérdezést a “felülvizsgálat” szóval népszerűsítse.

Másodszor, maga az ajánló mező már hitelességet teremt a felhasználók körében. Igen, még akkor is, ha a vélemények nincsenek ott: az ember legalább megérti, hogy a véleményt bármelyik ügyfél hozzáadhatja, a rendszer átlátható.

Ha az oldalon több mint 1000 tétel van, nyilvánvaló, hogy néhány tételnek nem lesz véleménye. Ezekben a kártyákban érdemes írni valamit a “Keresek egy hőst, aki 1 lépést tesz az elemek értékelésében.

Hagyjon negatív és pozitív visszajelzést is az oldalon. A negatívnak ki kell dolgoznia, hogy elférjen a felhasználó, hogy megmutassák őszinteségüket a potenciális vevőnek, és segítsék a választást (sokan az ilyen vélemények alapján döntenek).

Apropó, jelölje a véleményeket a Schema.org mikrojelöléssel.

A webhely sebessége és betöltési sebessége

Minél nagyobb a sebesség, annál kevesebb ember fog “kiborulni” a hosszú betöltési idő miatt. Ez azt jelenti, hogy tovább maradnak a webhelyen. 2021-ben a következő mutatókat kell megcéloznia:

• a legnagyobb tartalom megjelenítése (LCP) – kevesebb mint 2,5 másodperc az oldal betöltésének kezdetétől számítva;
  késleltetés az első bemenet után (FID) – kevesebb mint 100 ms;
• kumulatív elrendezésváltás (CLS) – kevesebb mint 0,1.

Az alábbiakat a webhely felgyorsítása érdekében végezzük.

Minimális átirányítások.

1. Tömörített grafika, videó és hang. Tartsa a fájlokat WEBP formátumban és klasszikus, de tömörített formátumban is.
   Összekapcsolt AMP oldalak a Google-ban és turbóoldalak.
2. Engedélyezett gyorsítótár. Ha a szerver gyorsítótárba helyezi a felhasználó adatait, akkor a következő látogatáskor a felhasználó nem a nulláról tölti be az oldalt, ami felgyorsítja a betöltési időt.

A kiszolgálóhoz érkező kérések számát a megengedett minimumra csökkentette. Csomagolja össze a kis grafikákat, JavaScript-fájlokat és egyéb “apróságokat”, amelyek betöltése sokáig tart.

Tartalommal való munka

Térjünk rá a legizgalmasabb részre: töltsd fel az oldaladat tartalommal. A 2021-es év hangulata a következő.

Elemezze versenytársai tartalmi stratégiáját. Keresse meg azokat a réseket, amelyeket nem hidaltak át. Hasonlítsa össze ezt a stratégiát a sajátjával. Találj ki egy olyan stratégiát, amely 2 rést zár be.

A blog elengedhetetlen. Így 2 legyet ütsz egy csapásra: kialakítod a szakértő képét + a témád összes lehetséges kulcsát feldolgozod, anélkül, hogy a “szemét” a webhely fő részén lenne. Ebben az esetben a vállalkozás szűk és összetett szakosodása nem ítélet, hanem inkább egy további tényező a malacperselyben. Ezt bizonyítja az “A magyarArbolit” arbolitblokkok gyártásának és értékesítésének honlapján található blog. Ha még ők is találtak valamit, ami érdekli az olvasókat a blogjukban, akkor te is megtalálhatod.

Weboldal készítése 2021-ben: teljes útmutató példákkal

Dabassy Jázmin,

TexTerra főszerkesztő

“A magyar Arbolit egy nagyon érdekes és különleges projekt. Például fehér és kék árnyalatokat használunk a tervezésben. Ezek nem jellemzőek erre a piaci résre: a versenytársak főleg barnát és zöldet használnak, a melegséggel és természetességgel kapcsolatos asszociációk alapján. Szándékosan választottunk szokatlan palettát.

Először is fontos volt számunkra, hogy hangsúlyozzuk, hogy a gyártás során tiszta vizet használunk (ez alapvető fontosságú a technológia szempontjából, és erről mindenhol beszélünk).

Másodszor, a vállalat meglehetősen nagy, és különböző területeken működik: blokkok gyártása, házak építése, franchise-értékesítés. A nagyvállalatok általában szívesen használják a fehér, kék és kék színeket.

Tartalmilag is érdekes történet volt: főleg HF-kérdésekkel dolgoztunk, de “farokkal”. Nem csak “hogyan szigeteljünk egy házat”, hanem “hogyan szigeteljünk egy arbolitból készült házat”, nem csak “hogyan számítsuk ki az építőanyagok mennyiségét”, hanem “hogyan számítsuk ki az építőanyagok mennyiségét egy arbolitból készült házhoz”. Természetesen átfogó longreadeket írtak a fő lekérdezés tárgyában, kiigazításokat végezve az arbolitra.

Egy SEO-szakértő, egy mérnök és egy technológus munkájának köszönhetően olyan erős anyagokat tudtunk előállítani, amelyek érdekesek mind az emberek egy kis része számára, akik már eldöntötték, hogy csak arbolitot vásárolnak, mind pedig általában véve egy szélesebb közönség számára. Utóbbiakat a blogról is feltűnésmentesen “megtérítették” mind a szakértelem, mind azáltal, hogy útközben folyamatosan az arbolit előnyeiről beszéltek.