Update/fix meta tags

app/root.tsx

@@ -11,7 +11,7 @@ import {
     useNavigation,
     useRouteError,
 } from '@remix-run/react';
-import { LoaderFunctionArgs } from '@remix-run/node';
+import { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { Tokens } from '@wix/sdk';
 import { useEffect } from 'react';
 import { CartOpenContextProvider } from '~/lib/cart-open-context';
@@ -117,3 +117,32 @@ export function ErrorBoundary() {
         </ContentWrapper>
     );
 }
+
+export const meta: MetaFunction = () => {
+    const title = 'E-Commerce Starter';
+    const description = 'Create your own e-commerce store';
+
+    return [
+        { title },
+        {
+            name: 'description',
+            content: description,
+        },
+        {
+            property: 'robots',
+            content: 'index, follow',
+        },
+        {
+            property: 'og:title',
+            content: title,
+        },
+        {
+            property: 'og:description',
+            content: description,
+        },
+        {
+            property: 'og:image',
+            content: '/social-media-image.jpg',
+        },
+    ];
+};

app/routes/_index/route.tsx

@@ -1,7 +1,7 @@
-import { LinksFunction, LoaderFunctionArgs } from '@remix-run/node';
+import { LoaderFunctionArgs } from '@remix-run/node';
 import { Link, MetaFunction, useLoaderData, useNavigate, json } from '@remix-run/react';
 import { initializeEcomApi } from '~/lib/ecom/session';
-import { isOutOfStock, removeQueryStringFromUrl } from '~/lib/utils';
+import { isOutOfStock } from '~/lib/utils';
 import { HeroImage } from '~/src/components/hero-image/hero-image';
 import { ProductCard } from '~/src/components/product-card/product-card';
 import styles from './index.module.scss';
@@ -13,7 +13,7 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
         throw json(productsResponse.error);
     }
 
-    return { products: productsResponse.body, canonicalUrl: removeQueryStringFromUrl(request.url) };
+    return { products: productsResponse.body };
 };
 
 export default function HomePage() {
@@ -52,22 +52,16 @@ export default function HomePage() {
     );
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App';
-    const description = 'Welcome to the E-Commerce App';
-    const imageUrl = 'https://e-commerce.com/image.png';
+export const meta: MetaFunction<typeof loader> = () => {
+    const title = 'E-Commerce Starter';
+    const description = 'Create your own e-commerce store';
 
     return [
         { title },
         {
             name: 'description',
             content: description,
         },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
-        },
         {
             property: 'robots',
             content: 'index, follow',
@@ -82,33 +76,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
         },
         {
             property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
+            content: '/social-media-image.jpg',
         },
     ];
 };

app/routes/about/route.tsx

@@ -1,11 +1,6 @@
-import { LinksFunction, LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
-import { removeQueryStringFromUrl } from '~/lib/utils';
+import { MetaFunction } from '@remix-run/node';
 import styles from './about.module.scss';
 
-export const loader = async ({ request }: LoaderFunctionArgs) => {
-    return { canonicalUrl: removeQueryStringFromUrl(request.url) };
-};
-
 export default function AboutPage() {
     return (
         <div className={styles.root}>
@@ -26,63 +21,16 @@ export default function AboutPage() {
     );
 }
 
-export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App - About';
-    const description = 'Welcome to the E-Commerce App - About Page';
-    const imageUrl = 'https://e-commerce.com/image.png';
-
+export const meta: MetaFunction = () => {
     return [
-        { title },
+        { title: 'About Us' },
         {
             name: 'description',
-            content: description,
-        },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
+            content: 'Create your own e-commerce store',
         },
         {
             property: 'robots',
             content: 'index, follow',
         },
-        {
-            property: 'og:title',
-            content: title,
-        },
-        {
-            property: 'og:description',
-            content: description,
-        },
-        {
-            property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
-        },
     ];
 };

app/routes/category.$categorySlug/route.tsx

@@ -1,4 +1,4 @@
-import { LinksFunction, LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
+import { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { NavLink, useLoaderData, json, useRouteError, useNavigate, isRouteErrorResponse } from '@remix-run/react';
 import { GetStaticRoutes } from '@wixc3/define-remix-app';
 import classNames from 'classnames';
@@ -11,7 +11,7 @@ import {
 } from '~/lib/ecom';
 import { useAppliedProductFilters } from '~/lib/hooks';
 import { initializeEcomApi } from '~/lib/ecom/session';
-import { getErrorMessage, isOutOfStock, removeQueryStringFromUrl } from '~/lib/utils';
+import { getErrorMessage, isOutOfStock } from '~/lib/utils';
 import { ProductCard } from '~/src/components/product-card/product-card';
 import { ErrorComponent } from '~/src/components/error-component/error-component';
 import { ProductFilters } from '~/src/components/product-filters/product-filters';
@@ -58,7 +58,6 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
         categoryProducts: categoryProductsResponse.body,
         allCategories: allCategoriesResponse.body,
         productPriceBounds: productPriceBoundsResponse.body,
-        canonicalUrl: removeQueryStringFromUrl(request.url),
     };
 };
 
@@ -185,62 +184,15 @@ export function ErrorBoundary() {
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    const title = 'E-Commerce App - Projects';
-    const description = 'Welcome to the E-Commerce App - Projects Page';
-    const imageUrl = 'https://e-commerce.com/image.png';
-
     return [
-        { title },
+        { title: data?.category.name ?? 'Products' },
         {
             name: 'description',
-            content: description,
-        },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data?.canonicalUrl,
+            content: data?.category.description,
         },
         {
             property: 'robots',
             content: 'index, follow',
         },
-        {
-            property: 'og:title',
-            content: title,
-        },
-        {
-            property: 'og:description',
-            content: description,
-        },
-        {
-            property: 'og:image',
-            content: imageUrl,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: imageUrl,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
-        },
     ];
 };

app/routes/products.$productSlug/route.tsx

@@ -1,4 +1,4 @@
-import type { LinksFunction, LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
+import type { LoaderFunctionArgs, MetaFunction } from '@remix-run/node';
 import { isRouteErrorResponse, json, useLoaderData, useNavigate, useRouteError } from '@remix-run/react';
 import type { products } from '@wix/stores';
 import { GetStaticRoutes } from '@wixc3/define-remix-app';
@@ -14,7 +14,6 @@ import {
     getSelectedVariant,
     getSKU,
     isOutOfStock,
-    removeQueryStringFromUrl,
     selectedChoicesToVariantChoices,
 } from '~/lib/utils';
 import { useCartOpen } from '~/lib/cart-open-context';
@@ -40,7 +39,7 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
         throw json(productResponse.error);
     }
 
-    return json({ product: productResponse.body, canonicalUrl: removeQueryStringFromUrl(request.url) });
+    return json({ product: productResponse.body });
 };
 
 export const getStaticRoutes: GetStaticRoutes = async () => {
@@ -201,25 +200,15 @@ export function ErrorBoundary() {
 }
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
-    if (!data) {
-        return [];
-    }
-
-    const title = data.product.name ?? 'Product Details';
-    const description = data.product.description ?? 'Product Description';
-    const coverImage = data.product.media?.mainMedia?.image?.url ?? 'https://e-commerce.com/image.png';
+    const title = data?.product.name ?? 'Product Details';
+    const description = data?.product.description;
 
     return [
-        { title: title },
+        { title },
         {
             name: 'description',
             content: description,
         },
-        {
-            tagName: 'link',
-            rel: 'canonical',
-            href: data.canonicalUrl,
-        },
         {
             property: 'robots',
             content: 'index, follow',
@@ -234,33 +223,7 @@ export const meta: MetaFunction<typeof loader> = ({ data }) => {
         },
         {
             property: 'og:image',
-            content: coverImage,
-        },
-        {
-            name: 'twitter:card',
-            content: 'summary_large_image',
-        },
-        {
-            name: 'twitter:title',
-            content: title,
-        },
-        {
-            name: 'twitter:description',
-            content: description,
-        },
-        {
-            name: 'twitter:image',
-            content: coverImage,
-        },
-    ];
-};
-
-export const links: LinksFunction = () => {
-    return [
-        {
-            rel: 'icon',
-            href: '/favicon.ico',
-            type: 'image/ico',
+            content: '/social-media-image.jpg',
         },
     ];
 };