AI-code in een Squarespace code block: slim of niet?

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 supersnel 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 stukje code of een hele pagina vol code

• De voordelen van AI-code in Squarespace

• De nadelen van AI-code

• Is AI-code in Squarespace slecht voor je SEO?

• Checklist: zo controleer je je AI-code

• Zo gebruik je AI-code wel slim

• Conclusie

• Veelgestelde vragen

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. Dit blok gebruik je bijvoorbeeld als je Calendly op je website wilt zetten, of als je Google-reviews wilt 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 te beheren.

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. Voor kleine dingen hoef je niemand in te huren.

• Makkelijk uitproberen. Je test snel een nieuw design of een andere button.

Kortom: AI-code is een goede aanvulling. Zolang je het gebruikt voor iets dat met Squarespace zelf niet lukt.

De nadelen van AI-code

Aanpassen wordt lastig

Stel: je laat AI een button maken. Een paar weken later wil je al je buttons een andere kleur geven. Bij de Squarespace-buttons doe je dat op één plek. Maar elk Code Block heeft zijn eigen buttonstijl, dus moet je ze een voor een aanpassen.

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. Kleuren kloppen net niet, regelafstanden zijn anders en de teksten hebben andere groottes. Je pagina ziet er dan 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 tekst veranderen doe je dan in de code. En een tekstblok los van een afbeelding verslepen 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. Daardoor kun je deze 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 een telefoon niet altijd. Tekst valt buiten beeld of buttons worden te klein. Test daarom altijd op een echte telefoon.

Soms werken buttons niet met het toetsenbord, of is het kleurcontrast te laag. En een formulier van AI ziet er 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. Daardoor kan de broncode veranderen. Als jouw AI-code leunt op hoe Squarespace achter de schermen werkt, kan die na een update ineens niet meer werken. Dit geldt overigens 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. Let daarom op deze vier dingen:

1. 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).

2. 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 helemaal geen echte koppen.

3. Gebruik echte links. Een button moet een gewone link zijn (<a href="...">). Zo vindt Google je andere pagina's (Google Search Central).

4. 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

• Staat je belangrijkste tekst direct in de HTML?

• Heeft de pagina één H1 en een logische opbouw met H2 en H3?

• 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 in secties.

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 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.

Veelgestelde vragen

• Mag je AI-code gebruiken in een Squarespace Code Block?

  Ja hoor. Maar gaat er iets mis met je code, dan helpt de Squarespace-support je niet.

• Is een Code Block slecht voor SEO?

  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.

• Kan ik een hele pagina bouwen met Code Blocks?

  Dat kan, maar elke wijziging moet je dan in de code doen. Gebruik Code Blocks bij voorkeur alleen voor dingen die in Squarespace niet makkelijk voor elkaar te krijgen zijn.

• Kan ik mijn eigen foto's gebruiken in AI-code?

  Ja, maar je uploadt ze dan eerst in de AI-tool, bijvoorbeeld Claude of ChatGPT. Check of je daar toestemming voor hebt van de fotograaf en van de mensen op de foto. Je foto's staan daarna niet in de Asset Library van Squarespace.

Meer lezen?