Jordan @ Island Web Design
Jordan @ Island Web Design
  • 28
  • 231 835
Build SEO Optimised Websites with Sanity and Astro: An Expert Guide 🔎 #codingtutorial #webdevtips
Exactly how we implement an SEO panel inside our website clients Sanity Studio using Astro allowing them to have full control over their search engine optimisation and Google ranking from inside their Content Management System.
People are always asking me about the custom content management systems we build for our web design clients using Sanity and Astro, and we are building at least 10 websites a month using Sanity & Astro which means we are up to date with all the newest technologies and updates before they are even being taught on TH-cam.
So in this follow up to our Sanity & Astro tutorial series where I have been taking you through showing you exactly how we build custom content management systems for our web design clients meaning they can update their website themselves, easily, no matter their tech skill level.
We have not had 1 single client on our customer feedback survey who said there was anything they didn't understand with their website which is a testament to how effective this system is.
In This Video You Will Learn:
⭐️ The fundamentals of integrating SEO into your web projects using Sanity Studio and Astro.
⭐️ How to set up and navigate Sanity Studio for efficient web development.
⭐️ Techniques for building an SEO optimised web page using Sanity & Astro.
⭐️ Creating and managing schemas in Sanity to enhance SEO performance.
⭐️ Practical steps for implementing SEO strategies in your web design using Astro.
⭐️ Tips for enhancing your project's visibility and search ability on the web.
⭐️ Insights into using custom schemas for dynamic web components.
Timestamps:
0:00 - Introduction: Overview of Our Project
0:54 - Sanity Studio Tour: Inside Look & Desk Structure API Overview
1:52 - Sanity Page Builder: Recap from Last Video
2:17 - SEO Pane: Importance and Implementation
2:36 - GitHub Mono Repository: Explaining Its Role
3:00 - HomePage Schema: Defining Groups
3:55 - SEO Object Schema: Building Process
5:20 - CustomImage Object Schema: An In-depth Look
5:38 - SEO Schema: Importing in index.js
6:15 - Interface Design: Defining Tabs for Better Navigation
7:15 - SEO Panel: Step-by-Step Population
8:10 - Frontend SEO Querying: Integration with Astro for Rendering
8:58 - SEO Display: Final Look on the Frontend
9:09 - Sanity Components: Custom Schema with Reusable Buttons (Upcoming Video Teaser)
9:44 - Newsletter Sign-Up: Get Free Web Design & Development Insights
9:55 - Outro: Next Time on Sanity and Astro Building Project
⭐️ How I use Sanity and Astro to Build Custom Content Management Systems For My Web Design Clients th-cam.com/video/wPtKjk2YTCI/w-d-xo.html
⭐️ How I Create Page Builders Using Sanity & Astro For My Web Design Clients & Auto Trigger Deploys 🚀 th-cam.com/video/lQZpgDsHUiM/w-d-xo.html
⭐️ How To Build An Easy Search Bar For Your Astro Website With The Pagefind Package 👀 th-cam.com/video/f8TfkmfyuzI/w-d-xo.html
⭐️ Sanity Sign Up Page: www.sanity.io/
⭐️ Sanity Desk Structure Api: www.sanity.io/docs/structure-builder-reference
⭐️ Astro Docs: docs.astro.build/en/getting-started/
⭐️ Island Web Design Website: islandwebdesign.net/
⭐️ Follow me on Instagram: jordanislandwebdesign
#webdevelopmenttutorials #codingtips #webdesignagency #webdesigntutorial #astro #sanitystudio #cms #cmsstudio #webdevtips #webdevelopmentagency #contentmanagement
มุมมอง: 594

วีดีโอ

How To Build An Easy Search Bar For Your Astro Website With The Pagefind Package 👀
มุมมอง 7186 หลายเดือนก่อน
Exactly how we implement an easy Search Bar in our Astro Websites to allow for quick search functionality without a database or having to create complex search indexing's using the pagefind npm package. At Island Web Design we are building at minimum 10 websites a month for our web design clients and we are using Astro & Sanity for nearly every single one. This gives us a unique insight into th...
How I Create Page Builders Using Sanity & Astro For My Web Design Clients & Auto Trigger Deploys 🚀
มุมมอง 1.8K6 หลายเดือนก่อน
Exactly how we implement Sanity as a custom page builder for our web design clients using Astro. In the last video, I showed you exactly how we use Sanity and Astro to build custom content management systems for our web design clients. This allows them to update and make changes to their website by themselves, super easily, no matter their tech skill level. In this video, I want to dive deeper ...
How I use Sanity and Astro to Build Custom Content Management Systems For My Web Design Clients ⭐️
มุมมอง 4.6K6 หลายเดือนก่อน
Exactly how we implement custom content management systems using Sanity Studio & Astro for our Web Design Clients at Island Web Design. In my last video I did a deep dive into a real client web design project and walked you through my thought process and how I go about putting these websites together at Island Web Design. People ask me this all the time, and the comments on the last video were ...
A Web Design Deep Dive Into A Real Client Project 🚀 Transforming The Vale Church's Online Presence
มุมมอง 6076 หลายเดือนก่อน
In this video I am going to dive in to a real web design project for a real client and show you exactly how we transformed The Vale Church's online presence with a new website and content management system. We designed and coded this website and I have packed this video full of value to show you what goes in to a real web design project. I am going to dive in to my Figma project, and my code ba...
How I Automate My Agency With Zapier & Ai Assistants 🤯
มุมมอง 1.5K7 หลายเดือนก่อน
Discover the ultimate guide to automating your web design agencies client onboarding process using OpenAI and Zapier. In this must-watch tutorial, I, Jordan from Island Web Design, reveal how our custom AI assistant has supercharged our efficiency allowing us to effortlessly onboard about 10 clients a month. No more manual data entry in accounting software, sending invoices and contracts manual...
How I Grew My Web Design Agency To Over 70 Clients In 1 Year
มุมมอง 7K7 หลายเดือนก่อน
How I Grew My Web Design Agency To Over 70 Clients In 1 Year

ความคิดเห็น

  • @a1asdairpage
    @a1asdairpage 3 วันที่ผ่านมา

    Oh god, this video doesn't need to be HDR. I wish TH-cam would let you turn this off

  • @tipo20202
    @tipo20202 9 วันที่ผ่านมา

    I get sooo caught up in the little bits with web dev but I feel like your style makes it really easy to follow and manage troubleshooting. would love to see a start to finish project

  • @divakukulza
    @divakukulza 9 วันที่ผ่านมา

    How to code it?

  • @KeremTürkyilmaz
    @KeremTürkyilmaz หลายเดือนก่อน

    Thanks Man, really super clear and very easy to follow. Keep pushing !

  • @vol5-p2p
    @vol5-p2p 2 หลายเดือนก่อน

    I needed to see this. Looks like such a time saver, so thank you for sharing Jordan. One part of the video made me curious. What are the full assistant instructions?

  • @pierrebost4061
    @pierrebost4061 3 หลายเดือนก่อน

    Amazing video, mate! You've just gained a new follower in Paris. Can't wait to see what's next!

    • @jordanislandwebdesign
      @jordanislandwebdesign 3 หลายเดือนก่อน

      thanks man! We have loads of new content on the way

  • @lostinthenarrativve
    @lostinthenarrativve 3 หลายเดือนก่อน

    What's your tech stack bro ?

  • @_moore
    @_moore 3 หลายเดือนก่อน

    Hey Jordan this is valuable stuff, thank you for being the one to demonstrate Astro and Sanity. Next step… visual editing. Wouldn’t it be great to allow your clients to edit visually? I know it’s tricky with Astro. Would be great to see if you get this working

  • @truthteachers
    @truthteachers 3 หลายเดือนก่อน

    So sad, couldnt understand his language. It was more like commentator at a soccer match.

  • @SingaporeMathsAcademyUK
    @SingaporeMathsAcademyUK 3 หลายเดือนก่อน

    Very mature interview, well done!

  • @connortraynor1643
    @connortraynor1643 3 หลายเดือนก่อน

    Terrific video, and really liked the quality of the website you created and showcased in the video. would be great to see a video about the process involved in getting your first client

  • @DriveOcean
    @DriveOcean 3 หลายเดือนก่อน

    Do you recommend me to use wix to build websites. I have more than 4 years of experience in building websites using it.

  • @fernandavillarroel4797
    @fernandavillarroel4797 4 หลายเดือนก่อน

    GRACIAS, UN GENIO

  • @Undividedk
    @Undividedk 4 หลายเดือนก่อน

    What’s good Jordan what quality content man! Keep it up. I got a question how do you use Astro pagination in the same slug file that generates dynamic pages? I spent too much time trying to figure it out

  • @jeffreyagyepong8976
    @jeffreyagyepong8976 4 หลายเดือนก่อน

    is the sanity:client package depreciated? I'm getting this error "Cannot find module 'sanity:client' imported from ...."

  • @Rowafaedits194
    @Rowafaedits194 4 หลายเดือนก่อน

    CAN I edit YOUR TH-cam VIDEOS?

  • @irbis_rosh
    @irbis_rosh 4 หลายเดือนก่อน

    Thank you for your zero-cost added value man! I'm diving back into AI and digital/process automation as a one-man graphic design and web dev band, and this is an excellent how-to as well as display of what the current tools are capable of!

  • @hzokilly2bunny170
    @hzokilly2bunny170 5 หลายเดือนก่อน

    What niches would you recommend for beginners in web design?

  • @Choose1or2_
    @Choose1or2_ 5 หลายเดือนก่อน

    Its simple bruh

  • @nisharmultani2671
    @nisharmultani2671 5 หลายเดือนก่อน

    Awesome video

  • @iam_manishahir
    @iam_manishahir 5 หลายเดือนก่อน

    Hello jordan, I just saw some of your videos on TH-cam. I liked your videos very much. You have been uploading videos on TH-cam from last 3 month. According to this, your subscribers are very less. If you upload videos regularly and enhance the quality of your videos and thumbnails, then you will be able to grow on TH-cam very quickly. I can help you grow on TH-cam. I can enhance your videos better than before. If you have time, we can talk in a meeting

  • @fgbyte
    @fgbyte 5 หลายเดือนก่อน

    I'm learning a lot with your workflow. I got some projects using this stack to, swiper include. Is nice to see content about Astro/Sanity

  • @KoarisDesign
    @KoarisDesign 5 หลายเดือนก่อน

    Love the video ! With Sanity Studio, do you have like a panel where you see all of your clients websites and is the free tier enough ? Or do you have to pay a monthly fee?

  • @koppswiss
    @koppswiss 5 หลายเดือนก่อน

    Hey I dont get it, do you self host sanity and its free or is it a cloud service? Do your clients have to pay a monthly fee for the CMS?

    • @jacobwielgus
      @jacobwielgus หลายเดือนก่อน

      It's a cloud-hosted service. You can deploy to your own domain, but you can't self-host the software itself. Yes, it's paid. Cost mostly scales with number of users (editors & admins) that need to be in the system. Cost can also vary by usage (bandwidth, # of API requests, etc.). As far as clients paying or not paying, you could set it up however you want in your contract. Most likely it makes sense for the client to pay, as their usage may change over time.

  • @thatsabusinessidea
    @thatsabusinessidea 5 หลายเดือนก่อน

    I love AstroJS and Sanity and never thought to use it like this!! Great work

  • @koppswiss
    @koppswiss 5 หลายเดือนก่อน

    Amazing video, keep it up ! Is it not possible to use the Image component from Astro with Sanity? It is so handy to optimize images on the fly...... e: Oh and when vscode stop autofill you can do cmd + P and then type reload to just reload vscode, much faster

  • @koppswiss
    @koppswiss 5 หลายเดือนก่อน

    What CMS do you use for your clients?

  • @divyv20
    @divyv20 5 หลายเดือนก่อน

    Hey Jordan , really nice video ! I was wondering if I could help you with Best Quality Editing in your videos which visually appeal to audience and would increase average view duration and will also make a highly engaging Thumbnail which will overall help your videos to reach to a wider audience ? Pls let me know what do you think ?

  • @OneBrighDay
    @OneBrighDay 5 หลายเดือนก่อน

    Can you post somewhere the types you reference in the website schema like reference, teamMate, and testimonial? thx

  • @OneBrighDay
    @OneBrighDay 5 หลายเดือนก่อน

    Thanks for the tutorial, I look forward to watching the rest of them. I'm new to Astro but really, new to Sanity; so I have some questions. Why don't you use the Astro Image component? Is there a reason you don't use something like Flowbite? It would be easier than hand-constructing every component.

  • @lewismuriungi4564
    @lewismuriungi4564 5 หลายเดือนก่อน

    Your video is what I've been looking for. I want to better use Sanity, and am trying to get away from NextJs for a while, of late it has been slow in development and tiresome

  • @rogerpence
    @rogerpence 5 หลายเดือนก่อน

    This is very helpful--thank you.

  • @thewebstylist
    @thewebstylist 5 หลายเดือนก่อน

    Reallyyy surprised your face (which you mention dozen times) helped ramp up your business

  • @illuminaughty666
    @illuminaughty666 5 หลายเดือนก่อน

    This is what I was looking for sanity seo schema thank you mate

  • @jo69123
    @jo69123 6 หลายเดือนก่อน

    Im a webflow designer and ai have been doing cold outreach for 4 months, and nothing, I’m about to starve to death

    • @angieperez3864
      @angieperez3864 5 หลายเดือนก่อน

      Hey, get on upwork in the meantime. Watch videos on how to make a killer profile and apply ALOT. Those clients mostly likely will send you referrals if you create a good relationship with them. That's how I started my digital marketing agency. Much success to you!

    • @jo69123
      @jo69123 5 หลายเดือนก่อน

      @@angieperez3864 Thanks! I'll definitely give it a try

    • @menoswater1032
      @menoswater1032 5 หลายเดือนก่อน

      Brother it’s all in the niche. My niche allowed me to get clients instantly. And you have more skills than I do. Find a niche that needs websites, has social media presence and has money to spend.

    • @rabiy.a
      @rabiy.a 4 หลายเดือนก่อน

      @@menoswater1032 if you don't mind, can you tell me more about your niche or recommend similar niches? i'm planning to focus on construction since i have experience in that field

    • @DavidT-tm5co
      @DavidT-tm5co 3 หลายเดือนก่อน

      @@menoswater1032 Please, which niche will you advice to focus on? Thank you.

  • @carloshidalgo6315
    @carloshidalgo6315 6 หลายเดือนก่อน

    very good explanation, I hope you continue with more videos about astro and health, good content :)

  • @noah_cyan
    @noah_cyan 6 หลายเดือนก่อน

    Will this work in webflow? I need a solutiion in order to have a usable search bar that will work when I export my code to host on my server. Let me know if you can help please.

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      I'm not sure about Webflow, check out the docs, its an npm package so probably not

    • @noah_cyan
      @noah_cyan 6 หลายเดือนก่อน

      @@jordanislandwebdesign Thanks! I haven’t heard of the software that you are using before. I will look into it. Is it mostly writing own code, as I couldn’t find a designing software yet?

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      download penpot or figma, im thinking of moving to penpot but figma is like indsutry standard

  • @aarxn_dnb
    @aarxn_dnb 6 หลายเดือนก่อน

    really helpful stuff and you come across like a genuine guy big up

  • @dvkerns
    @dvkerns 6 หลายเดือนก่อน

    Sanity is the best. ❤

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      Well... Astro have just come out with Astro Studio so we will see 😎

  • @hunterbertoson156
    @hunterbertoson156 6 หลายเดือนก่อน

    I have been fighting sanity and Astro all day. This has saved my life. Earned my sub!

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      I thought I'd save a few people 😎 thank you my friend

  • @nizarlouaye7517
    @nizarlouaye7517 6 หลายเดือนก่อน

    صاحبي ماعليش تهدر إنجليزي ؟!!

  • @Showmatic
    @Showmatic 6 หลายเดือนก่อน

    Anyone who uses light themes in their IDE, I just assume they're a serial killer 😂. Jk, good video, man.

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      nah it's the other way round my friend, thank you haha 😎

  • @maxburrows57
    @maxburrows57 6 หลายเดือนก่อน

    This video is awesome! Definitely got some more knowledge to add to my Sanity/Astro projects now. Looking forward to seeing more in depth in future, especially the full website builder you mentioned at the end. Also wondering how you deploy these sites? Typically when using Astro I find I need to deploy with netlify and add a netlify.toml file to set the build settings, but then the site only updates by manually triggering deploys in netlify after publishing sanity changes. Makes it a bit of a headache to train clients on updating both the sanity studio and then deploying in netlify. Would love to know if you’ve found a way around this!

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      thanks man, I'll be doing way more on this in future videos, including how to trigger deploys automatically

  • @m4xelite261
    @m4xelite261 6 หลายเดือนก่อน

    Great video, I’d love to see an in depth step by step tutorial of how you use sanity as a CMS whether it’s with Astro or vanilla html. The only useful docs/ tutorials are for Next or React which is overkill for a lot of sites so would be much appreciated! 😁

    • @jordanislandwebdesign
      @jordanislandwebdesign 6 หลายเดือนก่อน

      I 100% agree with you and this is an actual problem I have suffered with learning Sanity, I will do that for my video next Sunday 😎

  • @bloojkl4520
    @bloojkl4520 7 หลายเดือนก่อน

    How do I use this though? I don’t get how it goes from this to on a website.

  • @jasont9045
    @jasont9045 7 หลายเดือนก่อน

    I feel like image trace was better a year ago. I just started using it again and I cannot for the life of me get a clean trace

    • @jordanislandwebdesign
      @jordanislandwebdesign 7 หลายเดือนก่อน

      In Figma I tend to use 'Tracer" plugin now, use Illustrator less, try turning the noise down to 0, this helped me

  • @Naiem_webdesign
    @Naiem_webdesign 7 หลายเดือนก่อน

    Understand ❤ No ai for Web design

    • @jordanislandwebdesign
      @jordanislandwebdesign 7 หลายเดือนก่อน

      thanks for your support man, I see you in all the comments 😀

    • @Naiem_webdesign
      @Naiem_webdesign 7 หลายเดือนก่อน

      @@jordanislandwebdesign thanks man. Learning from you is a massive to me😊

  • @Naiem_webdesign
    @Naiem_webdesign 7 หลายเดือนก่อน

    It would be great if you made a video about how you run an ad campaign to capture new clients.❤🎉

  • @Naiem_webdesign
    @Naiem_webdesign 7 หลายเดือนก่อน

    wonderful, this interview is really amazing. I am aware of your talent and helpfulness. To be honest, working closely with you taught me current technology, proper use of AI, and marketing. I really should have learned more from you, but it seems like I passed on the chance🙂😔. Extremely thankful for your assistance and support. wishing you all the best.

  • @RolloUnden
    @RolloUnden 7 หลายเดือนก่อน

    also that guy interviewing is shit