Merge pull request #1458 from homarr-labs/feat/improve-general-seo

web/package.json

@@ -77,7 +77,7 @@
 		"typescript": "^5.8.3",
 		"wrangler": "^4.12.0"
 	},
-	"packageManager": "pnpm@10.8.0",
+	"packageManager": "pnpm@10.11.0",
 	"pnpm": {
 		"onlyBuiltDependencies": [
 			"@biomejs/biome",

web/src/app/icons/[icon]/page.tsx

@@ -1,9 +1,7 @@
 import { IconDetails } from "@/components/icon-details"
 import { BASE_URL, WEB_URL } from "@/constants"
 import { getAllIcons, getAuthorData } from "@/lib/api"
-import { formatIconName } from "@/lib/utils"
 import type { Metadata, ResolvingMetadata } from "next"
-import { default as dynamicImport } from "next/dynamic"
 import { notFound } from "next/navigation"
 export const dynamicParams = false
 
@@ -67,17 +65,32 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 		icons: {
 			icon: `${BASE_URL}/webp/${icon}.webp`,
 		},
+		robots: {
+			index: true,
+			follow: true,
+			nocache: false,
+			googleBot: {
+				index: true,
+				follow: true,
+				noimageindex: false,
+				"max-video-preview": -1,
+				"max-image-preview": "large",
+			},
+		},
 		abstract: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		openGraph: {
 			title: `${formattedIconName} Icon | Dashboard Icons`,
 			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
-			type: "article",
+			type: "website",
 			url: pageUrl,
-			authors: [authorName],
-			publishedTime: updateDate.toISOString(),
-			modifiedTime: updateDate.toISOString(),
-			section: "Icons",
-			tags: [formattedIconName, "dashboard icon", "service icon", "application icon", "tool icon", "web dashboard", "app directory"],
+			siteName: "Dashboard Icons",
+			  images: [{
+    url: `${BASE_URL}/webp/${icon}.webp`,
+    width: 512,
+    height: 512,
+    alt: `${formattedIconName} icon`,
+  }]
+
 		},
 		twitter: {
 			card: "summary_large_image",
@@ -85,6 +98,7 @@ export async function generateMetadata({ params, searchParams }: Props, parent:
 			description: `Download the ${formattedIconName} icon in SVG, PNG, and WEBP formats for FREE. Part of a collection of ${totalIcons} curated icons for services, applications and tools, designed specifically for dashboards and app directories.`,
 		},
 		alternates: {
+			canonical: `${WEB_URL}/icons/${icon}`,
 			media: {
 				png: `${BASE_URL}/png/${icon}.png`,
 				svg: `${BASE_URL}/svg/${icon}.svg`,
@@ -105,5 +119,26 @@ export default async function IconPage({ params }: { params: Promise<{ icon: str
 
 	const authorData = await getAuthorData(originalIconData.update.author.id)
 
-	return <IconDetails icon={icon} iconData={originalIconData} authorData={authorData} allIcons={iconsData} />
+	return (
+		<>
+			<script
+				type="application/ld+json"
+				// biome-ignore lint/security/noDangerouslySetInnerHtml: Needs to be done
+				dangerouslySetInnerHTML={{
+					__html: JSON.stringify({
+						"@context": "https://schema.org",
+						"@type": "ImageObject",
+						contentUrl: `${BASE_URL}/png/${icon}.png`,
+						license: "https://creativecommons.org/licenses/by/4.0/",
+						acquireLicensePage: `${WEB_URL}/license`,
+						creator: {
+							"@type": "Person",
+							name: authorData.name || authorData.login,
+						},
+					}),
+				}}
+			/>
+			<IconDetails icon={icon} iconData={originalIconData} authorData={authorData} allIcons={iconsData} />
+		</>
+	)
 }

web/src/components/icon-details.tsx

@@ -193,6 +193,7 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 										alt={`${iconName} in ${format} format${theme ? ` (${theme} theme)` : ""}`}
 										fill
 										loading="eager"
+										priority
 										className="object-contain p-4"
 									/>
 								</motion.div>
@@ -276,6 +277,7 @@ export function IconDetails({ icon, iconData, authorData, allIcons }: IconDetail
 								<div className="relative w-32 h-32 rounded-xl overflow-hidden border flex items-center justify-center p-3">
 									<Image
 										src={`${BASE_URL}/${iconData.base}/${icon}.${iconData.base}`}
+										priority
 										width={96}
 										height={96}
 										placeholder="empty"