Je vraagt Claude Design om een nieuwe pagina te ontwerpen voor je Squarespace website. In no time spuugt ‘ie code uit. Je plakt de code in een Code Block op een nieuwe pagina. Super simpel! Dus dat doe je nog een keer en nog een keer. En voor je het weet, heb je een hele pagina vol Code Blocks met AI-code.
Het gaat als een speer en het ziet er op het eerste gezicht goed uit. Toch zit er een addertje onder het gras. Het gebruik van AI-gegenereerde code is niet het probleem. Het probleem is dat je de code niet begrijpt, niet test en later niet makkelijk kunt aanpassen. In deze blog lees je wanneer AI-code slim is om te gebruiken, waar je op moet letten en wat het betekent voor je SEO.
Inhoudsopgave:
Wat is een Code Block in Squarespace eigenlijk?
Een Code Block is een blok op je pagina, net als een tekstblok. Alleen zet je er geen tekst in, maar code: HTML, en soms CSS of JavaScript. Klinkt technisch, maar het valt heel erg mee. Je gebruikt het bijvoorbeeld als je Calendly op je website wil zetten, of als je Google-reviews wil laten zien. Op zich is daar dus helemaal niks mis mee.
Een stukje code of een hele pagina vol code
Er is een groot verschil tussen deze twee situaties:
Een stukje code. Je bouwt een pagina met de standaard blokken van Squarespace. Alleen voor iets bijzonders, zoals een prijscalculator, gebruik je een Code Block.
Een hele pagina in code. In elke sectie staat een Code Block met AI-code. Alle tekst, buttons en foto's staan in die code.
Het eerste is meestal geen probleem. Het tweede ziet er misschien hartstikke mooi uit, maar maakt je website een stuk lastiger om zelf bij te houden. En dat is nou net waarom je ooit voor Squarespace hebt gekozen.
De voordelen van AI-code in Squarespace
Er zijn goede redenen om AI-code te gebruiken:
Meer ontwerpvrijheid. Je maakt dingen die met de gewone blokken niet lukken. Denk aan een prijscalculator, een speciale animatie of een stappenplan.
Snel resultaat. Je beschrijft je idee en hebt binnen een paar minuten iets dat werkt.
Geen developer of webdesigner nodig. oor kleine dingetjes hoef je niemand in te huren. Ja, dat zeg ik als webdesigner.
Makkelijk uitproberen. Je test snel een nieuw design of een andere button.
Kortom: AI-code is een prima aanvulling. Zolang je het gebruikt voor iets dat met Squarespace zelf niet lukt.
De nadelen van AI-code in Squarespace
Aanpassen wordt lastig
Stel dat je AI een button laat maken. Een paar weken later wil je al je buttons een andere kleur geven. Bij de Squarespace buttons doe je dat op één plek, in je Site Styles. Maar elk Code Block heeft zijn eigen buttonstijl. Dus mag je ze een voor een aanpassen. Een leuk klusje.
En het wordt nog lastiger als je over een half jaar niet meer weet welke code waarvoor is.
Een lappendeken van code
Vraag je voor elke sectie opnieuw om code? Dan krijg je elke keer een andere aanpak. De kleuren kloppen net niet, de regelafstand is anders en de teksten hebben andere groottes. Allemaal details, maar bij elkaar ziet je pagina er dan al snel rommelig uit.
Je verliest het gemak van Squarespace
Het grote voordeel van Squarespace is dat je alles zelf aanpast in de editor. Zonder kennis van code. Bij een sectie met één Code Block ben je dat kwijt. Een tekstje veranderen doe je dan in de code. En even een tekstblok los van een afbeelding verslepen? Dat gaat niet meer.
Je foto's staan niet in Squarespace
Normaal upload je een foto in een Image Block. Die komt dan in je Asset Library te staan, dus de plek in Squarespace waar al je afbeeldingen bij elkaar staan. Zo kan je die foto ook makkelijk hergebruiken op een andere pagina.
Bij AI-code upload je je foto's meestal eerst in de AI-tool. Wil je foto's van jezelf of van anderen daar wel in zetten? Daarnaast komt je foto niet in de Asset Library te staan. Wil je een andere foto of een andere uitsnede? Dan moet je dat in de code aanpassen.
Mobiel, toegankelijkheid en formulieren
AI-code ziet er op een laptop vaak goed uit, maar op mobiel niet altijd. Tekst valt buiten beeld of buttons worden piepklein. Mijn advies: test altijd op een echte telefoon, niet alleen in de mobiele preview van Squarespace.
Soms werken buttons niet met het toetsenbord, of is het kleurcontrast te laag. Klinkt als een detail, maar voor bezoekers die slecht zien of geen muis gebruiken, maakt het echt uit. En een formulier van AI ziet er misschien mooi uit, maar je moet dan zelf regelen waar de ingevulde gegevens naartoe gaan. Een Form Block van Squarespace regelt dat allemaal voor je.
Updates kunnen je code breken
Squarespace is constant in ontwikkeling. Achter de schermen verandert de code van je website dus ook regelmatig. Leunt jouw AI-code op hoe Squarespace achter de schermen werkt? Dan kan die na een update ineens niet meer werken. Dat geldt trouwens ook als je met veel custom CSS werkt.
Is AI-code in Squarespace slecht voor je SEO?
Nee, niet per se. Google leest tekst in een Code Block net zo goed als tekst in een gewoon blok. En Google straft je niet omdat je AI-code gebruikt. Het gaat pas mis als de code niet goed in elkaar zit. Ik zou daarom op deze vier dingen letten:
Zet je tekst direct in de HTML. Sommige AI-code laat tekst pas verschijnen via JavaScript. Google kan dat meestal lezen, maar niet altijd. Andere zoekmachines en AI-tools vaak niet (Google Search Central).
Gebruik echte koppen. Eén H1 per pagina, H2 voor de hoofdkoppen van je secties en H3 voor de subkoppen daaronder. AI maakt soms van elke kop een H1, of gebruikt alleen grote dikke letters. Dan ziet het eruit als een kop, maar voor Google is het gewoon tekst.
Gebruik echte links. Een button moet een gewone link zijn (<a href="...">). Zo vindt Google je andere pagina's (Google Search Central).
Gebruik de SEO-instellingen. Je SEO-titel en -omschrijving stel je nog steeds in Squarespace in. Dat doet een Code Block niet voor je.
Checklist: zo controleer je je AI-code
Loop dit lijstje even langs voordat je een pagina met AI-code live zet:
Staat je belangrijkste tekst direct in de HTML?
Heeft de pagina één H1 en een logische opbouw met H2, H3 en H4?
Zijn je links echte links?
Zijn je SEO-titel en -omschrijving per pagina ingevuld?
Werkt alles goed op een echte telefoon?
Werken je buttons en formulieren?
Kun je de pagina met alleen je toetsenbord gebruiken?
Weet je hoe je teksten en foto's in je code aanpast?
Zo gebruik je AI-code wel slim
Bouw je website met de gewone blokken van Squarespace. Dus teksten, foto's, buttons, formulieren, enzovoort.
Gebruik AI-code alleen voor onderdelen die niet makkelijk in Squarespace kunnen. Gebruik je toch veel code? Zet dan niet de complete inhoud van een pagina in één Code Block, maar splits het op per sectie. Dan kan je in ieder geval nog relatief makkelijk per stukje iets aanpassen.
Bestaat je hele website uit code? Dan gebruik je Squarespace eigenlijk als lege doos. Dat kan, maar dan ben je ook zelf verantwoordelijk voor al het onderhoud. Squarespace helpt je namelijk niet bij problemen die door je eigen code komen.
Conclusie
AI-code is niet goed of slecht. Voor een prijscalculator of een speciale animatie is het handig. Maar een website vol code die je niet begrijpt, wordt al snel lastig om aan te passen.
Voor je SEO maakt AI-code weinig uit. Zolang je tekst in de HTML staat en je koppen en links kloppen.
En bedenk vooral: een goede website ziet er niet alleen mooi uit. Hij is duidelijk en goed vindbaar, zet je websitebezoekers om in klanten en is makkelijk zelf bij te houden. Je website hoort je hardst werkende teamlid te zijn, niet je grootste klus.
Veelgestelde vragen
-
Ja hoor. Maar gaat er iets mis met je code, dan helpt de Squarespace-support je niet.
-
Nee, niet per se. Google kan tekst in een Code Block gewoon lezen. Het gaat mis als je tekst alleen via JavaScript verschijnt, of als je koppen en links niet kloppen.
-
Dat kan, maar elke wijziging moet je dan in de code doen. Ook als je alleen een komma wil verplaatsen. Ik zou Code Blocks alleen gebruiken voor dingen die in Squarespace niet makkelijk voor elkaar te krijgen zijn.
-
Ja, maar dan upload je ze eerst in de AI-tool, bijvoorbeeld Claude of ChatGPT. Check wel even of je daar toestemming voor hebt van de fotograaf en van de mensen op de foto. En je foto's staan daarna niet in de Asset Library van Squarespace.
Gebruik je Claude of ChatGPT voor code in je Squarespace website? Dit zijn de voor- en nadelen van het gebruiken van AI-code in Code Blocks en wat het betekent voor je SEO.