#Hashtag Cyberstar · Day 4
lecture notes

Community, Connection
& Digital Gardens 🌱

SEO & Meta Content · Authentic Storytelling · Webrings & Connection · Your Digital Garden

Karen ann Donnachie · VCA · 2025

Welcome everyone. Today we loop back to fundamentals — the web was built for connection, not just publication.
✿ critical concept

The web was built for connection,
and building relationships in community, over time.

Your site can be like a living, growing digital garden, where you can grow, too.

recap

Recap & Check-In

We're past the halfway point! By now you have:

  • Consolidated your site structure (HTML)
  • Styled & shaped it to reflect your own aesthetic (CSS)
  • Understood how to make it responsive for mobile
  • Considered accessibility and interactivity
Now we ask: Who will find your site?
How & Why will they come back?
01
section one

🔍 SEO:
Being Found

Not gaming the system — just telling it what you are

SEO Basics for Portfolio Sites

SEO (Search Engine Optimization) is about making your site discoverable. Not gaming the system — just telling search engines (and humans!) what your site is about.

  • Title tags — Unique, descriptive title per page
  • Meta descriptions — Summary for search results
  • Headings — Proper h1, h2, h3 hierarchy
  • Alt text — Describe images (accessibility!)
  • Links — Link to relevant sites, get linked back
  • Content — Regular updates signal "alive" site

Open Graph = Social Sharing

When you share a link, the preview card comes from your OG tags.

<meta property="og:title" content="Your Name | Portfolio"> <meta property="og:image" content="preview.jpg"> <meta property="og:description" content="Artist in Melbourne">

The <meta> Tags

Meta tags live in your <head> section. They're invisible to visitors but tell search engines and social media about your page.

<!-- SEO Meta Tags --> <title>Your Name | Designer</title> <meta name="description" content="Portfolio of [Name], Melbourne-based artist..."> <meta name="keywords" content="designer, artist, Melbourne"> <meta name="author" content="Your Name">

🛠️

Interactive Tool

Use our meta tag generator to create your meta tags — copy & paste into your <head>.

Open Meta Tag Generator →

🤖 with knowledge comes responsibility

AI Bots & Your Content

AI companies are scraping the web to train their models. Your images and text may be used without your consent.

robots.txt — a text file in your site's root that tells bots what they can access.

  • GPTBot / ChatGPT-User — OpenAI
  • ClaudeBot / anthropic-ai — Anthropic
  • Google-Extended — Google AI training
  • CCBot — Common Crawl
  • FacebookBot — Meta

📦 ai.robots.txt on GitHub →

# Block AI bots, allow search engines User-agent: GPTBot Disallow: / User-agent: ClaudeBot Disallow: / User-agent: Google-Extended Disallow: / # Allow regular search engines User-agent: Googlebot Allow: / User-agent: Bingbot Allow: /

Save as robots.txt in your site's root folder

⚠ dark patterns

The Other Side:
Manipulative Design

The same knowledge that creates engaging experiences can be weaponized to manipulate users.

  • Hidden unsubscribe buttons
  • Pre-checked consent boxes
  • "Confirmshaming" — "No thanks, I hate saving money"
  • Fake urgency timers
  • Interfaces designed to make you misclick

Some dark patterns are now illegal in parts of Europe and California.

🔍

Explore Our Gallery

Real examples of deceptive design — and what NOT to do.

Open Dark Patterns Gallery →

✨ The Alternative: Ethical Design

Clear navigation. Honest messaging. Real value. Make people want to stay — don't trap them.

02
section two

✍️ Authentic
Storytelling

Your portfolio is not a resume. It's a story.

Corporate vs. Authentic

Your portfolio is not a resume. It's a story you're telling about who you are, what you care about, and why your work matters.

🚫 Corporate

"I am a multi-disciplinary creative professional leveraging synergies across diverse media platforms to deliver impactful solutions..."

Nobody wants to read this. Nobody believes it.

✅ Authentic

"I make things that make people feel something. Mostly confused, sometimes delighted."

This sounds like a real person. You want to know more.

net art · identity · storytelling

Mouchette.org

Martine Neddam · Online since 1996 · The site IS the artwork

"Mouchette" presents herself as a nearly 13-year-old girl. The site blurs identity, fiction, and interaction — visitors become participants. User submissions become part of the artwork.

  • Interactive pages invite visitors to respond to emotional prompts
  • Identity of the creator was unknown for years
  • Still online after nearly 30 years

🔗 mouchette.org

mouchette.org

"My name is Mouchette
I live in Amsterdam
I am nearly 13"

The website as character, as performance, as community Enter mouchette.org →

Creator revealed in 2011, after 15 years of anonymity

art · surveillance · social relationships

Lauren Lee McCarthy

Artist exploring social relationships in the age of surveillance · Creator of p5.js

McCarthy's work examines how technology mediates human relationships. She created p5.js — the JavaScript library you may already know from creative coding.

  • LAUREN — She became a human Amazon Alexa, controlling someone's smart home
  • I.A.M. — Training to become a better version of yourself through AI
  • Her website itself tells a story about her practice

🔗 lauren-mccarthy.com

lauren-mccarthy.com
👁️
LAUREN (2017)
A human intelligence smart home
"I will watch over you"
Visit lauren-mccarthy.com →

Also created p5.js — used by millions of creative coders

multimedia · speculative fiction · web storytelling

17776

Jon Bois · 2017 · SB Nation · "What Football Will Look Like in the Future"

A serialised speculative fiction multimedia narrative told through the web. It uses video, interactive maps, text, and web design itself as storytelling tools. The story unfolds as you scroll.

  • Starts looking like a normal sports article, then gets weird
  • Sentient space probes discuss the future of football
  • The browser IS the reading experience — not a PDF, not a video
  • Sequel 20020 followed in 2020

🔗 Read 17776 →

sbnation.com/a/17776-football
🏈🛰️
What Football Will Look Like
in the Future

A story told in web pages, video,
and interactive maps
Read it →

The web as a storytelling medium, not just a delivery system

03
section three

🔗 Connection:
Webrings, Links
& Community

The early web was about linking to each other

What's a Webring?

A collection of websites linked in a circular structure. Visit one site, click "Next", go to another site in the ring. Decentralized discovery — you find people through community, not algorithms.

Social media tried to replace this — but the indie web is bringing it back.

HOW A WEBRING WORKS

← Prev · 🌐 Site A · Next →
← Prev · 🌐 Site B · Next →
← Prev · 🌐 Your Site · Next →
← Prev · 🌐 Site D · Next →

After last site → loops back to first

Webrings & Curated Link Collections

This Instead

Isobelle McCall's resource container — links as antithesis of bigotry and discrimination.

This Instead →

PersonalSit.es

Curated collection of personal websites. Real people, no algorithms.

personalsit.es →

Neocities Browse

DIY web hosting. 700K+ sites. Spiritual successor to GeoCities.

neocities.org/browse →

Building Your Links Page / Blogroll

A links page or blogroll is a curated list of sites you love. It shows your taste, your community, your world.

  • Link to people, not just platforms
  • Write why you love each site
  • Update it — show you're still exploring
  • Ask people to link back — good for SEO!
<!-- A simple blogroll --> <section class="blogroll"> <h2>Sites I Love</h2> <ul> <li> <a href="https://example.com"> Site Name </a> <span> — Why I love this site </span> </li> </ul> </section>

Getting Visitors to Come Back:
Newsletter Sign-Up

Social media followers aren't yours — the platform owns them. An email list is the one audience you truly own.

Buttondown — Simple, privacy-focused

Mailchimp — Free tier for small lists

Substack — If you want to write regularly

<!-- Simple newsletter sign-up --> <!-- Replace ACTION with your newsletter provider's form URL --> <form action="YOUR_NEWSLETTER_URL" method="post"> <label for="email"> Stay updated: </label> <input type="email" id="email" name="email" placeholder="your@email.com" required> <button type="submit"> Subscribe </button> </form>
padlet activity

About Your About Page

Who are you? → your 'about page'. Where are you? → your social media & connections. How will you organise your community?

📝 Write 3 Sentences

3 sentences for your About page. No jargon. Must sound like you. Include something personal.

📸 Show Us Your Image

What image will represent you? A photo, an avatar, a drawing?

🔗 How Will You Connect?

How will you link to socials? Will you add your email? A contact form? Newsletter signup?

💡 Don't Forget

Your name! Your links page / blogroll. Your meta tags.

project updates

📋 Project Updates

Project 2: Web-to-Print

Walk through the submission template and see what we're looking for.

  • Design your own or populate this template
  • All work stays local — nothing gets uploaded
  • Save your progress as a .json file
  • Load it later to continue where you left off

Projects 1, 2 & 3

ASK US ANYTHING!

Questions about any project? Post them on the class Q&A form.

key takeaways

Today's Big Ideas

SEO = telling the web what you are, honestly

Meta tags make your site discoverable & shareable

Protect your work from AI scrapers with robots.txt

Know about dark patterns so you can avoid them

Authenticity > perfection. Sound like you.

Link to others. Be part of a community.

Build an email list — the one audience you own

day 4 checklist

Check That You Have:

  • Watched the VIDEO 'WOT is SEO'
  • Reviewed the Meta Tags code examples
  • Walked through DARK PATTERNS gallery
  • Watched the VIDEO 'Storytelling on the web'
  • Explored Mouchette, Lauren Lee McCarthy, or 17776
  • Contributed to PADLET: About your About
  • Walked through the Web-to-Print template
  • Started adding meta tags to your site
  • Planned a links page or blogroll

If you have completed all of the above you are ready for class #4

🌱

Go cultivate
your garden.

hashtagcyberstar.neocities.org