Kuinka rakentaa oma verkkosivusto - kokemuksemme
Teknologia
5 min. lukuaika
Suunnitteletko omaa verkkosivustoa? Jos et ole varma, millaista sisällönhallintajärjestelmää tai sisällön tallennustapaa sinun tulisi käyttää, blogitekstimme voi auttaa sinua näissä kysymyksissä.
Tässä artikkelissa kerromme syyn, miksi hylkäsimme valmiin web-kehitysalustan, miksi käytämme päätöntä CMS:ää (Headless Content Management System) taustajärjestelmässämme ja Markdownia sisällön tallentamiseen ja miten tämä kaikki vaikuttaa hakukoneoptimointiimme.
Yrityksellämme oli aiemmin WordPress-sivusto. Vaikka Wordpressissä on paljon ominaisuuksia ja laajennuksia, vei sen hallinta lopulta liikaa aikaa ja resursseja. Oikeastaan kaikki valmiit järjestelmät vaarantavat hallinnan. Alussa kaikki sujui hyvin – onnistuimme ratkaisemaan suurimman osan eteen tulleista ongelmista.
Ajan myötä tajusimme, että järjestelmä ei täytä tavoitteitamme. Tarkempi tarkastelu paljasti, että tiimimme käytti yhdessä eniten aikaa sivuston rakenteen korjaamiseen kuin mielessämme olevien ideoiden kehittämiseen. Kehitysalustamme rajoitusten kiertäminen muuttui päätehtäväksemme.
Mielenkiintoista verkkosivustoissa on se, että ne yrittävät kopioida sen, mitä mikä tahansa interaktiivinen dokumentti voi tehdä. Animoitu PowerPoint-esitys koostuu osuvista teksteistä, kuvista ja jopa videoista. Kaikki tämä löytyy myös verkkosivulta, mutta sillä on tiukka työnjako. HTML käsittelee kaiken tekstin, kuviin ja videoihin liittyvän, muotoilu on CSS:n vastuulla ja jokainen sivun vuorovaikutus siirtyy JavaScriptille.
Hakukoneoptimoinnin kannalta HTML on johtava tekijä, koska se sisältää kaikki tärkeät sisältökuvaukset eli meta tagit. HTML-tageja on monia, mutta on tärkeää keskittyä niistä tärkeimpiin. Isännöimme kaikkia asiaankuuluvia tageja yleistunnisteesssa samalla, kun merkitsemme todellisen sisällön (tekstikuvat ja videot) itse tagiin.
Tarvitsimme sisällönhallintajärjestelmän web-omaisuutemme organisointiin. Meidän oli myös löydettävä universaali tapa, jolla palvelinpuolen osa eli backend kommunikoi frontendin eli selainpuolen osan kanssa, jotta tietojen näyttämiseen liittyvästä logiikasta riippumatta tiedämme aina, että katsoja näkee sen, mikä on tarkoituksena. Tätä varten tarvitsimme virheettömästi kommunikoivan backendin ja frontendin, jotka eivät kuitenkaan ole vahvasti riippuvaisia toisistaan. Tämä tarkoittaa, että halusimme tehdä täydellisen verkkosivuston vaihdon ilman perusmuutoksia alustallemme tai, mikä vielä pahempaa – alusta aloittamista.
Yksi tapa ratkaista edellä mainittu tilanne on lähestymistapa nimeltä päätön CMS . Tässä hallintajärjestelmässä ei käytetä frontend-logiikkaa, mikä tarkoittaa, että mitä tahansa näytölle tulee näkyviin, voidaan muuttaa helposti ilman raskaita taustahallinnan säätöjä ja se voidaan sovittaa mihin tahansa haluttuun tekniikkaan. Tällöin backendin ja frontedin välillä tieto liikkuu API-rajapinnan avulla. Se tarkoittaa myös, että meillä voi olla taustaohjelma yhdellä kielellä ja käyttöliittymä toisella. Tämä ehto on äärimmäisen vapauttava: irrottamalla sisällönhallinta ja -tuotanto toisistaan, voimme työskennellä toisen kanssa vaikuttamatta toiseen. Voimme esimerkiksi muuttaa verkkosovelluksemme nopeasti mobiilisovellukseksi tekemättä suuria muutoksia.
Etsiessäni oikeaa päätöntä sisällönhallintajärjestelmää törmäsin Contentfuliin , joka on ratkaisuna hyvä, mutta hinnaltaan todella kitkerä. Edullisempi vaihtoehto, Strapi , taas on ominaisuuksiltaan hieman rajoittunut. Sitten löysin Directuksen . Yksinkertaisesti sanottuna: se oli rakkautta käyttöönotosta lähtien. Directus on päätön CMS-ratkaisu, jota voidaan käyttää myös palvelimella.
Directuksella on erittäin älykäs lähestymistapa sisällön näyttämiseen. Älykkään ja merkintäystävällisen käyttöliittymän lisäksi alustalla voit automaattisesti muuttaa kuvien kokoa tai pakata kuvia ja valita käytettävän kuvaversion tai oikean muodon (JPG/WEBP). Etkö ole varma kuinka erilaiset kuvaparametrit vaikuttavat selaimessa? Kirjoita ne osoitepalkkiin, niin voit esikatsella niitä ja ottaa ne käyttöön.
Kun sisällöntuottajat tallentavat työnsä, työ päätyy tiedostoon. Tallentaaksemme kaiken tiedostoon meidän on tallennettava se jonnekin; yleensä tämä talletuskohde on binäärimuodossa. Tallentaapa sisällönhallintasi tiedot MS Word -tiedostoon, .ODT - tai WordPress-editoriin, se sisältää tekstiä, mutta myös paljon koodia, taulukoita ja merkkijonoja. Eri komponenttien määrän ansiosta sinun täytyy luottaa tiettyyn ohjelmistoon koodin purkamisessa ja sen esittämisessä ihmisystävällisellä tavalla. Voit kokeilla tätä käytännössä avaamalla minkä tahansa tekstidokumentin Notepad++ tai Sublime Text -sovelluksella. Huono uutinen on, että jopa WordPress-editori tekee saman.
Tosiseikka: perinteiset tekstitiedostot ja editorit ovat kaaoksellisia , eikä ole olemassa yleistä tapaa säilyttää sisältöä ilman, että sinun tarvitsee käyttää alkuperäistä ohjelmistoa, jota sen luomiseen käytettiin.
Tietojen selkeän esittämisen ansiosta Markdownia käytetään jo laajalti älykkäissä tekstipohjaisissa ratkaisuissa, kuten Trellossa tai Asanassa . Selkeä ja looginen yksinkertaisten sääntöjen kaavio määrittää, kuinka pelkkä teksti voi saada kehittyneemmän muodon ilman, että se vaikeuttaa tallennusta, sen lukemista tai hallintaa. Aiemmin kun vaihdoimme Word-tiedoston jonkun kanssa, luotimme siihen, että heillä oli sama ohjelma tai jopa ohjelmistoversio kuin meillä.
Tavanomaisissa editoreissa koodinpätkä ei erotu muusta normaalista tekstistä lauseiden ja kappaleiden avulla. Sen sijaan Markdown tunnistaa spesifioidun tekstin ja korostaa sen.
Markdown onnistuu saamaan kaksi kärpästä yhdellä iskulla: se on ihmiselle selkeämpää ja koneetkin voivat purkaa tiedon helpommin.
Vaikka Markdown onkin hyvin yksinkertainen, on se vallankumouksellinen tapa ajatella ja käsitellä sisältöä, etenkin yhteistyöympäristössä. Kukaan ei omista Markdownin syntaksisääntöjä, joten se on paljon parempi työkalu liiketoiminnan jatkuvuuden näkökulmasta. Sitä vastoin, jos avaat MS Word -tiedoston viidenkymmenen vuoden kuluttua, luotat siihen, että ohjelmisto on edelleen saatavilla asianmukaisella huollolla ja tuella. Jos Word poistuisi jostain syystä, sinun tulisi takaisinmallintaa (reverse-engineering) kyseiset tiedostot tietojen purkamista varten.
Markdown tallentaa tiedot universaalien sääntöjen mukaisesti, jotka eivät ole sidottu muutoksiin tai omistusoikeuden loukkauksiin.
Toinen Markdownin keskeinen etu on, että voit käyttää sitä useiden siitä johdettujen muotojen tuottamiseen. Muunna merkintäteksti HTML-muotoon, ja se sisältää automaattisesti kaikki aiemmin käyttämäsi tyylit. Sinulla on nyt yleinen tiedosto, joka on valmis jaettavaksi kenen tahansa kanssa. Heidän tarvitsee vain pudottaa se mihin tahansa selaimeen. Lisäksi Markdownin avoimen lähdekoodin standardin ansiosta ja tarkoituksestasi riippuen voit myös nopeasti muuntaa sisältösi useisiin muihin käteviin muotoihin, kuten EPUB, LATEX tai PDF.
Google rakastaa HTML:ää. Vaikka hakukoneet ovatkin kehittyneet monimutkaisen koodin, kuten JavaScriptin tulkitsemisessa, yksinkertainen merkintä on aina ollut parempi. Selaimen renderöinti eli sisällön renderöinti selaimessa JavaScriptin avulla ja Cloudflare-palvelujen näyttävä kattavuus edistävät ylivertaista käyttökokemusta.
Kun testaat verkkosivustoa Page Insightsilla ja Lighthousella , niistä kannattaa huomioida eräs asia: vaikka Google-algoritmit ovat aina olleet arvoitus, Lighthouse tarkistaa meta tagiesi eheyden. Googlen niin sanottu kokonaispistemäärä sisältää monimutkaisia tekijöitä, mukaan lukien käyttökokemuksen (UX).
Mobiilitestaukseen käytämme BrowserStackia , sillä sen tehokas virtuaaliympäristö sisältää tuhansia tuettuja selaimia ja laitteita.
Menestynyt web-kehitys syntyy oikean tiimin ja oikean teknologian tuloksena, jolloin molemmat toimivat täydellisessä synergiassa. Todettuamme standardimenetelmät epätoimiviksi saavutimme pisteen, jossa pystyimme tekemään tietoisia päätöksiä ihanteellisen johtamisjärjestelmän rakentamisessa. Verkossa saatavilla oleva teknologia on hienoa, kun sitä käytetään viisaasti suunnitelmassa, joka sisältää useita resursseja.
Irrotimme backendin asiakkaille näkyvissä olevasta osasta, mikä mahdollistaa tuhansia tapoja muuttaa käyttöliittymää ilman, että meidän pitäisi ottaa takapakkia tai aloittaa alusta. Käytäntö osoittaa, että saatavilla oleva tekniikka on enemmän kuin tarpeeksi minkä tahansa tavoitteen saavuttamiseen. Tärkeää on tavoitteen taustalla oleva strategia ja sen toteuttajat.
Tulisiko sinun käyttää mukautettua sisällönhallintajärjestelmää? Huolimatta räätälöidyn CMS:n kiistattomista eduista, kaikki yritykset eivät sovellu sen käyttämiseen ainakaan heti. Jokaisen eteenpäin katsovan verkkokehitysyrityksen tulisi kuitenkin tosissaan harkita sen käyttöä. Jokainen yritys kehittyy eri tavalla, mutta kaikilla on sama polku täydellisyyteen: yrityksen ja erehdyksen kautta. Ilman mukautettua sisällönhallintajärjestelmää joudut käyttämään aikaa ja vaivaa muokataksesi valmiin alustasi jatkuvasti muuttuvien ideoiden mukaan. Mitä nopeammin valitset verkkokehitysympäristöäsi varten räätälöidyn ratkaisun, sitä parempi.
Jaa: