Merge pull request #7473 from supabase/chore/improve-seo

Chore: improve SEO

apps/www/components/AuthWidget/AuthWidget.tsx

@@ -84,6 +84,7 @@ function AuthPage() {
                               <img
                                 src="https://app.supabase.com/img/supabase-dark.svg"
                                 width="96"
+                                alt="supabase logo"
                               />
                               <h3>{companyName}</h3>
                             </Space>

apps/www/components/Avatar.tsx

@@ -12,6 +12,7 @@ export default function Avatar(props: Props) {
         src={'/images/blog/avatars/' + img}
         className="h-8 w-8 rounded-full object-cover text-center"
         style={{ margin: 0 }}
+        alt={`${caption} avatar`}
       />
       <figcaption style={{ marginTop: 0 }} className="text-scale-1000">
         <p>{caption}</p>

apps/www/components/Blog/BlogListItem.tsx

@@ -42,6 +42,7 @@ const BlogListItem = ({ post }: Props) => {
                   }
                   objectFit="cover"
                   className="scale-100 transform duration-100 ease-in group-hover:scale-105"
+                  alt="case study thumbnail"
                 />
               </div>
 

apps/www/components/ExampleCard.tsx

@@ -56,7 +56,7 @@ function ExampleCard(props: any) {
           <div className="mt-3 flex items-center gap-2">
             {props.vercel_deploy_url && (
               <a target="_blank" href={props.vercel_deploy_url}>
-                <img className="h-6" src="https://vercel.com/button" />
+                <img className="h-6" src="https://vercel.com/button" alt="vercel button" />
               </a>
             )}
             {props.demo_url && (

apps/www/components/FloatingIcons/FloatingIcons.tsx

@@ -12,30 +12,37 @@ function FloatingIcons() {
         <img
           className={`${Styles['icon-react-one']}`}
           src={`${basePath}/images/product/auth/react-icon.svg`}
+          alt="react icon"
         />
         <img
           src={`${basePath}/images/product/auth/electron-icon.svg`}
           className={`${Styles['icon-electron']}`}
+          alt="electron icon"
         />
         <img
           src={`${basePath}/images/product/auth/vue-icon.svg`}
           className={`${Styles['icon-vue']}`}
+          alt="vue icon"
         />
         <img
           src={`${basePath}/images/product/auth/angular-icon.svg`}
           className={`${Styles['icon-angular']}`}
+          alt="angular icon"
         />
         <img
           src={`${basePath}/images/product/auth/flutter-icon.svg`}
           className={`${Styles['icon-flutter']}`}
+          alt="flutter icon"
         />
         <img
           src={`${basePath}/images/product/auth/nuxt-icon.svg`}
           className={`${Styles['icon-nuxt']}`}
+          alt="nuxt icon"
         />
         <img
           src={`${basePath}/images/product/auth/redwood-icon.svg`}
           className={`${Styles['icon-redwood']}`}
+          alt="redwood icon"
         />
       </div>
     </div>

apps/www/components/TweetCard.tsx

@@ -23,7 +23,13 @@ function TweetCard(props: TweetCard) {
       <div className="relative">
         <div className="flex items-center gap-2">
           <div className="h-10 w-10 overflow-hidden rounded-full border dark:border-gray-600">
-            <Image src={props.img_url} layout="responsive" width="64" height="64" />
+            <Image
+              src={props.img_url}
+              layout="responsive"
+              width="64"
+              height="64"
+              alt={`${props.handle} twitter image`}
+            />
           </div>
           <p className="text-scale-1200 mt-3 text-sm font-medium">{props.handle}</p>
           <div

apps/www/pages/database/Database.tsx

@@ -109,6 +109,7 @@ function Database() {
                     src={`${basePath}/images/product/database/postgresql-icon.svg`}
                     width={30}
                     height={30}
+                    alt="postgresql icon"
                   />
                 </div>
               </div>