SEOilin internetissä - hakukoneoptimointia
Julkaistu: 02.06.2025 12:54
Nyt kun Tarinan Paikka on indeksoitu Googlea varten niin tutustuin muihin tapoihin lisätä näkyvyyttä internetissä, eli SEO (Search Engine Optimization). Vaikka tämä blogi-alusta on lähinnä oma oppimisprojekti, SEO on tärkeä osa ohjelmistosuunnittelua joten se on hyvä osata. Siispä seuraavana asioita joita olen SEOillut:
Title ja Description:
Title -tagi ja meta-kuvaus (meta name=description) ovat tärkeitä ensikosketuspisteitä hakukoneille ja käyttäjille. Title näkyy hakutuloksissa klikattavana otsikkona ja Description toimii esikatseluna, joka houkuttelee käyttäjiä klikkaamaan. Nämä kannattaa olla jokaisessa tiedostossa joka näkyy käyttäjälle.
Canonical-tagit:
Canonical-tagit kertovat hakukoneelle mikä versio sivusta on alkuperäinen, mikäli sisältöä on saatavilla useilla URL-osoitteilla, estäen siten kaksoissisältöongelmat. Blogissani Canonical-rakenne toimii dynaamisesti ja ohjaa hakukoneet oikealle sivulle.
OG-tagit:
Open Graph -metatiedostot varmistavat, että kun jaan sivuni sosiaalisessa mediassa, linkkikortti näyttää siistiltä: Oikea otsikko, kuva ja kuvaus.
Twitter Cards:
Twitter käyttää omaa metatiedostostandardiaan. Periaatteen vuoksi en ole lisännyt Twitter Cardsia omaan blogiini.
Favicon:
Favicon on pieni kuvatiedosto joka näkyy selaimen välilehdessä. Pieni juttu mutta parantaa sivuston tunnistettavuutta. Blogissani favicon on osana layout-pohjaa.
Schema.org / JSON-LD:
Strukturoitu data kuten Schema.org mahdollistaa lisätietojen esittämisen hakutuloksissa: Kirjoittaja, kuvaus, päiväys… Tätä voi lisätä JSON-LD -muodossa. Tarkoitus on lisätä jokaiselle julkaisulle oma Schema, tällä hetkellä kuvaus on blogin tasolla.
Kuvien alt-tekstit:
Jokaisen kuvan yhteyteen tulisi lisätä (ja pitäisi olla) alt-teksti. Ne parantavat saavutettavuutta, mutta myös hakukoneet hyödyntävät niitä sisällön ymmärtämisessä.
SEO on osittain teknistä hienosäätöä. Favicon ja OG-tagit tuovat sivulle tyyliä ja ne näyttävät ammattimaiselta mutta SEO on tärkeä osa sivuston saavutettavuutta ja elinkaarta. Tässä pieni tiivistelmä hakukoneoptimoinnista, palaan asiaan jos ja kun säädän vielä lisää.
Kun avasin oven roboteille - Tarinan Paikan Google -indexointi
Julkaistu: 28.05.2025 05:37
Koska Tarinan Paikka on saanut tietyn muotonsa, on ollut aikaa pohtia muitakin osa-alueita kuin koodaamista. Vaikkapa sitä että olisihan se kiva jos blogi löytyisi Googlaamalla. Siispä otin selvää että kuinka se tapahtuu. Tässä pieni kirjoitus Google indexoinnin vaiheista:
1. robots.txt
Oven avaaminen tapahtuu lisäämällä robots.txt tiedosto. Eli kerrotaan roboteille että tervetuloa! Tiedostoon laitetaan seuraavat asiat:
User-Agent: *
Disallow:
Sitemap: hhtps://sivun_osoite/sitemap.xml
2. Meta-tunniste: sivukohtainen ohjeistus hakukoneille
Varmistetaan että sivut lisätään Google hakemistoon, ja että botit seuraavat linkkejä, jotka johtavat muihin sivuston osiin.
3. Google-verifointi - Todista, että omistat sivustosi
Google Search Concole on työkalu jolla voin seurata Tarinan Paikan näkyvyyttä ja suorituskykyä. Sivuston omistajuuden voi todentaa lisäämällä Googlelta saadun HTML -tiedoston palvelimen juureen.
Esim.: https://tarinanpaikka.up.railway.app/googlecfd84af9800ef2bc.html
4. Dynaaminen sitemap.xml - Kartta hakukoneille
Loin dynaamisen PHP-sivun, joka tuottaa aina ajantasaisen sitemap.xml-tiedoston tietokannan perusteella. Tiedosto sisältää: Etusivun, kaikki blogisivut, jokaisen artikkelin yksilöllisen osoitteen. Tämä auttaa Googlea ymmärtämään, mitkä sisällöt ovat tärkeitä ja miten usein niitä päivitetään.
5. .htaccess ja sitemap ohjaus
Jotta hakukoneet löytävät dynaamisen PHP-sivun ja kohtelevat sitä staattisena tiedostona, lisäsin juureen .htacces-säännön:
RewriteEngine On
RewriteRule ^sitemap\.xml$ sitemap.xml.php [L]
Tämän ansiosta osoitteessa /sitemap.xml palautuu dynaamisesti luotu XML-sivustokartta – ilman URL-parametreja.
6. Google Search Consoleen ilmoitus
Lopuksi siirryin Google Search Consoleen, valitsin oman sivustoni ja syötin sitemapin osoitteeksi: sitemap.xml
Tässä oli pieni selostus siitä miten saadaan Google-indexointi toimimaan PHP-sivulle ilman valmiita julkaisujärjestelmiä kuten vaikka WordPressiä.
Julkaisut ja blogit nyt näkyvissä
Julkaistu: 20.05.2025 05:08
Etusivulla näkyvät nyt kaikki julkaisut ja blogit, siten että uusimmat ovat ensimmäisinä. Nappeja painamalla saa sitten lisää asioita näkyviin. Myöhemmin tavoitteena on tehdä listaus julkaisuista ja blogeista siten että voi valita vaikka tietyn blogin julkaisut tai käyttäjän blogit (myöhemmin käyttäjä voi luoda useamman blogin). Käyttöliittymää hion jatkuvasti, toivottavasti se on nyt selkeä ja helppokäyttöinen.
Mobiiliyhteydellä blogin käyttäminen, varsinkin uusien julkaisujen luominen, saattaa olla hidasta joten tein jokaiseen ikkunaan lataus-ilmoituksen. -Mikko
Tarinan Paikka avoin kaikille!
Julkaistu: 31.03.2025 14:32
Blogisovellus on nyt siinä vaiheessa että tilin ja blogin luominen on nyt mahdollista kaikille. Blogien määrä on rajoitettu yhteen kerrallaan mutta sen sisältöä on mahdollista muokata milloin vain. Eli rohkeasti kokeilemaan!
Jos eteen tulee bugeja tai muuta (joita luultavasti tulee) ilmoita allekirjoittaneelle sähköpostiin metarktis@gmail.com tai whatsappiin. Blogille on tehty käyttöehdot, voit lukea ne osoitteesta https://tarinanpaikka.up.railway.app/terms.html
Käyttöehdot löytyvät myös linkkinä sivun alaviitteestä.
T. Mikko
Kuvat Cloudinaryyn
Julkaistu: 14.03.2025 08:27
Kuvien lataaminen Cloudinaryyn ja sitä kautta blogiin näkyville olikin astetta haasteellisempi urakka. Suurimmat kompastuskivet olivat kännykkäkuvien koko (useita megabittejä) ja iPhonen oma kuvaformaatti (HEIC). Blogisovellus, toisin sanoen PHP -koodi ei aluksi antanut ladata kuin korkeintaan 2MB kokoisia kuvia joten piti käydä luomassa php.ini -tiedosto josta annetaan lupa isommille kuville. Cloudinary itse pienentää kuvien kokoa mutta käyttäjän laitteen ja Cloudinaryn välille piti saada reilumpi juttukaveri.
Toinen haasteellisempi homma oli ja on, iPhonen omat kuvatiedostot. iPhone ei tallenna kameran kuvia jpg -tiedostoon vaan omaan HEIC -formaattiin, totta kai. Kun kuvia sitten yritti lisätä tähän blogisovellukseen, Cloudinary keikautti kuvia 90 astetta kumolleen. Mikä on tietenkin ärsyttävää, käyttäjän ja ylläpitäjän vinkkelistä. Jälleen piti käydä muokkaamassa php -koodia: Kuvilla on oma EXIF -tieto jossa on Orientation -arvo. Tätä arvoa kun vaihtaa niin saadaan kuva oikein päin ennen kuin kuva latautuu Cloudinaryyn. Toivottavasti tämä on nyt kunnossa!
Mitä siis tapahtuu jos käyttäjä lisää kuvan?
1. Käyttäjä lataa kuvan ja liittää sen osaksi blogijulkaisua
2. Palvelin vastaanottaa kuvan ja tarkistetaan että kuvan on olemassa ja että tiedosto on kelvollinen (JPEG, PNG tai WEBP).
3. Kuva optimoidaan:
- JPEG -kuvasta tarkistetaan EXIF-tieto ja korjataan mahdollisesti oleva väärä suunta.
- Kuva skaalataan siten että kuvan leveys on korkeintaan 1200 pikseliä. (Sivuston latausaika pysyy nopeana).
- Kuva tallennetaan väliaikaisesti ja pakataan 75% laadulla.
4. Kuva ladataan Cloudinary-palveluun:
- Cloudinary optimoi kuvaa vielä lisää ja antaa sille pysyvän verkko-osoitteen.
- Sovellus tallentaa kuvan lopullisen URL -osoitteen tietokantaan.
5. Julkaisun tallennus ja kuvan näyttäminen blogissa:
- Artikkeli tallennetaan tietokantaan, ja siihen liitetään kuvan URL -osoite.
- Kun käyttäjä avaa blogisivun, kuva ladataan suoraan Cloudinarysta ja näkyy julkaisussa.
Kuvien lataaminen ja liittäminen blogiin on minulle aivan uusi projekti joten jos huomaat jotain ongelmia niin voit raportoida sähköpostilla. Otan todella mielelläni kaikki mahdolliset kommentit vastaan jotta voin kehittää sovellusta. Esimerkiksi iPhone -ongelma ei olisi tullut itselleni vastaan koska en käytä Applen tuotteita. =)
Kuvia blogiin 2
Julkaistu: 09.03.2025 06:46
No niin, nyt on koodi saatu siihen vaiheeseen että Railway juttelee Cloudinaryn kanssa eli uuteen julkaisuun voi lisätä myös kuvan. Kuva tallentuu Cloudinaryyn ja tietokantaan tallentuu kuvan julkinen osoite.
Julkaisun muokkaus-ikkunassa voi käydä vaihtamassa tai poistamassa kuvan. Jos kuvan vaihtaa, vanha kuva poistetaan automaattisesti Cloudinarysta, samoin jos kuvan poistaa eli jos kuvan haluaa säilyttää itsellään, kannattaa se ladata omalle laitteelle. Myös vanhoihin julkaisuihin voi lisätä kuvan muokkaa julkaisua -ikkunassa.
Kuvan muotoilua ei pääse itse muokkaamaan, pyrin tekemään niin että kuva näyttää, noh, sopusuhtaiselta erilaisilla näytöillä.
Kuvia blogiin!
Julkaistu: 07.03.2025 07:01
Seuraava ominaisuus eli kuvien lisääminen julkaisuun on edennyt, vaiheeseen jossa kuvan lisääminen, poistaminen ja vaihtaminen onnistuu...puolittain.
Ongelma on se että Railway ei tarjoa paikkaa jonne kuvat voisi säilöä vaan kuvat ovat väliaikaisessa muistissa. Ja aina kun päivitän sovellusta (ajan uutta koodia yms.), kuvat häviävät. :o
Eli tällä hetkellä kuvanlisäys-ominaisuutta voi testata mutta kuva tulee häviämään.
Cloudinary on palvelu jonne kuvia voi tallentaa ja seuraavaksi aion saada koodattua Railwayn ja Cloudinaryn juttelemaan keskenään siten että kuvat pysyvät tallessa.
Julkaisujen muokkaus
Julkaistu: 03.03.2025 05:07
Hei, nyt on mahdollista muokata omia julkaisuja. Ainakin itse teen kirjoitusvirheitä niin nyt ei enää tarvitse harmitella!
Teknisiä asioita
Julkaistu: 02.03.2025 08:06
Tässä postauksessa esittelen vähän että mitä kaikkea tähän blogiin on laitettu ja miten.
Koodailen tätä projektia omalla koneellani ja käytän Visual Studio Codea itse ohjelmointiin ja Dockeria lokaalina palvelimena. SQL -tietokanta on MyPHPAdminissa. Sen jälkeen kun olen testannut koodin toimivuutta, siirrän koodin GitHubiin. Railway.com, jossa projektini on, käy hakemassa päivitetyn koodin GtiHubista ja näyttää sen kaikille käyttäjille. Railwayssa on oma SQL -tietokanta joka pitää erikseen päivittää jos teen sinne rakenteellisia muutoksia.
Tässä oli suunnilleen se tapa millä pyöritän projektia.
Mitä koodia sitten olen käyttänyt projektissa?
-HTML (blogisivujen rakenne)
-CSS (blogisivujen tyyli)
-HTMX (dynaamisen sisällön lataaminen: lomakeikkunat yms.)
-PHP (tietokantakyselyt, tietoturva, lomaketietojen käsittely)
-JavaScript (esim. lomakeikkunoiden sulkeminen)
-SQL (tietokanta)
Tekoäly: olen käyttänyt ohjelmoinnin apuna ChatGPT:tä. Vaikka yritän itse koodata asiat niin ChatGPT helpottaa ja ennen kaikkea nopeuttaa projektin luontia, varsinkin ongelmatilanteissa ja koodin syntaksin tarkastamisessa. Myös tekoälyn liittäminen itse blogiin kiinnostaa. Noh, kaikki aikanaan.
Blogin esittelyä
Julkaistu: 28.02.2025 06:57
Hei ja tervetuloa lukemaan ja ehkä myös tekemään blogia! Valmistuin tammikuussa 2025 ohjelmistokehittäjäksi Savon ammattiopistosta ja mietin että millä tavalla ylläpidän koodaustaitojani. Niinpä aloin uudelleen kirjoittamaan lopputyötä (leva-verkkosivut) ja nopeasti muodostui ajatus omasta blogista. Ei pelkästään sellainen jonne voisi itse kirjoitella vaan että muutkin voisivat kirjoitella omia tarinoita tai ajatuksia. Blogikone siis.
Nyt on bloginkoneen, projektinimeltään "Tarinan paikka", tilanne on sellainen että palveluun voi rekisteröityä. Itse blogia pääsee tekemään ottamalla yhteyttä meikäläiseen, yhteystiedot löytyvät sivun alaosasta. Projekti on vielä alussa ja mielelläni otan testauskäyttäjiä kokeilemaan ja kommentoimaan blogikonetta. Ominaisuus-listani on jo kilometrin pituinen, ulkoasua ja käyttöliittymää viilaan jatkuvasti.
Päivitän tähän blogiin kaikista muutoksista mitä täällä tapahtuu.
Toinen syy, miksi teen tätä projektia on se että etsin töitä ohjelmisto-alalta ja tämä toimii käyntikorttina CV:ssä. Eli jos joku huomaa ja haluaa ottaa yhteyttä työn merkeissä niin rohkeasti vain! =)
Ihan eka postaus
Julkaistu: 24.02.2025 07:21
Hello world (muokattu 2.3.2025)!