Image SEO + added FAQ data

README.md

@@ -1,12 +1,12 @@
-<img alt="GitHub" src="https://img.shields.io/github/license/prozilla/Prozilla-OS?style=flat-square&color=ee5253&label=License"> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/prozilla/prozilla-os?style=flat-square&color=feca57&label=%E2%AD%90">  <img alt="GitHub forks" src="https://img.shields.io/github/forks/prozilla/prozilla-os?style=flat-square&color=54a0ff&label=Forks">
+<img alt="License" src="https://img.shields.io/github/license/prozilla/Prozilla-OS?style=flat-square&color=ee5253&label=License"> <img alt="Stars" src="https://img.shields.io/github/stars/prozilla/prozilla-os?style=flat-square&color=feca57&label=%E2%AD%90">  <img alt="Forks" src="https://img.shields.io/github/forks/prozilla/prozilla-os?style=flat-square&color=54a0ff&label=Forks">
 
-# <img src="public/media/logo.svg" align="left" width=40 height=40/> ProzillaOS
+# <img src="public/media/logo.svg" align="left" width=40 height=40 alt="Logo"/> ProzillaOS
 
 ProzillaOS is a web-based operating system inspired by Ubuntu Linux and Windows made with React by Prozilla.
 
 **Live demo: [os.prozilla.dev](https://os.prozilla.dev/)**
 
-<img src="public/media/banner.png"/>
+<img src="public/media/banner-logo-title.png" alt="Banner with ProzillaOS' name and logo"/>
 
 > Please note that ProzillaOS is a WIP and far from complete. Many additional features will be added in the near future.
 
@@ -29,7 +29,7 @@ ProzillaOS was designed in Figma by Prozilla. You can view the design file [here
 
 ### Preview
 
-<img src="public/media/screenshots/screenshot-1.png"/>
+<img src="public/media/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
 
 ## Support ProzillaOS
 

docs/design/README.md

@@ -6,7 +6,7 @@ ProzillaOS is designed in Figma by Prozilla. You can view the design file [here]
 
 ### Preview
 
-<img src="../../public/media/screenshots/screenshot-1.png"/>
+<img src="../../public/media/screenshots/screenshot-files-settings-taskbar-desktop.png" alt="Screenshot of ProzillaOS"/>
 
 ### Font
 

public/config/desktop.xml

@@ -1,4 +1,5 @@
 <?xml version="1.0"?>
+<!DOCTYPE xml>
 <options>
-	<wallpaper>/media/wallpapers/wallpaper-6.png</wallpaper>
+	<wallpaper>/media/wallpapers/mesh-gradient-wallpaper-red-purple.png</wallpaper>
 </options>

public/documents/info.md

@@ -1,4 +1,4 @@
-<img src="/media/banner.png" width="1440" height="700" style="aspect-ratio: 3 / 1; width: 100%; height: auto; object-fit: cover;" alt="Banner with ProzillaOS' name and logo"/>
+<img src="/media/banner-logo-title.png" width="1440" height="700" style="aspect-ratio: 3 / 1; width: 100%; height: auto; object-fit: cover;" alt="Banner with ProzillaOS' name and logo"/>
 
 # Info
 

public/index.html

@@ -6,20 +6,22 @@
 
 		<meta charset="utf-8" />
 		<meta name="viewport" content="width=device-width, initial-scale=1"/>
+		<link rel="canonical" href="https://os.prozilla.dev/">
 
 		<!-- Favicon -->
 		<link rel="manifest" href="%PUBLIC_URL%/manifest.json"/>
 		<link rel="shortcut icon" type="image/svg+xml" href="%PUBLIC_URL%/media/logo.svg"/>
 		<link rel="mask-icon" href="%PUBLIC_URL%/media/logo.svg" color="#1dd1a1"/>
 		<meta name="msapplication-TileColor" content="#222f3e"/>
-		<meta name="theme-color" content="#1dd1a1"/>
+		<meta name="theme-color" content="#54a0ff"/>
 
 		<!-- Open Graph -->
 		<meta property="og:title" content="ProzillaOS | Web-based Operating System"/>
 		<meta property="og:site_name" content="ProzillaOS"/>
 		<meta property="og:description" content="ProzillaOS is an open-source web-based operating system inspired by Ubuntu Linux and Windows made with React.js by Prozilla."/>
 		<meta property="og:type" content="website"/>
-		<meta property="og:image" content="%PUBLIC_URL%/media/banner.png"/>
+		<meta property="og:image" content="%PUBLIC_URL%/media/banner-logo-title.png"/>
+		<meta property="og:locale" content="en_US">
 
 		<!-- Fonts -->
 		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-Light.ttf" as="font" type="font/ttf" crossorigin>
@@ -27,6 +29,32 @@
 		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-SemiBold.ttf" as="font" type="font/ttf" crossorigin>
 		<link rel="preload" href="%PUBLIC_URL%/media/fonts/poppins/Poppins-Bold.ttf" as="font" type="font/ttf" crossorigin>
 		<link rel="preload" href="%PUBLIC_URL%/media/fonts/roboto-mono/RobotoMono-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
+
+		<!-- FAQ -->
+		<script type="application/ld+json">
+		{
+			"@context": "https://schema.org",
+			"@type": "FAQPage",
+			"mainEntity": [
+				{
+					"@type": "Question",
+					"name": "Is ProzillaOS open source?",
+					"acceptedAnswer": {
+						"@type": "Answer",
+						"text": "Yes, the source code for ProzillaOS is hosted on <a href=\"https://github.com/Prozilla/prozilla-os\">GitHub</a>."
+					}
+				},
+				{
+					"@type": "Question",
+					"name": "Is ProzillaOS a real operating system?",
+					"acceptedAnswer": {
+						"@type": "Answer",
+						"text": "No, ProzillaOS is a web-based operating system that runs entirely in your browser. It does not have the same capabilities as an operating system like Ubuntu Linux and runs completely virtually."
+					}
+				}
+			]
+		}
+		</script>
 	</head>
 	<body>
 		<noscript>You need to enable JavaScript to run ProzillaOS.</noscript>

public/robots.txt

@@ -1,3 +1,4 @@
 # https://www.robotstxt.org/robotstxt.html
 User-agent: *
 Disallow:
+Sitemap: https://os.prozilla.dev/sitemap.xml

public/sitemap.xml

@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE xml>
+<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
+	xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
+	<url>
+		<loc>https://os.prozilla.dev/</loc>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/banner-logo-title.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/screenshots/screenshot-files-settings-taskbar-desktop.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/abstract-mesh-gradient-orange-red-purple.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/colorful-abstract-wallpaper-blue-red-green.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/colorful-mesh-gradient-yellow-blue-green.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/mesh-gradient-wallpaper-red-purple.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/vibrant-wallpaper-blue-purple-red.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/vibrant-wallpaper-purple-yellow.png</image:loc>
+		</image:image>
+		<image:image>
+			<image:loc>https://os.prozilla.dev/media/wallpapers/wave-abstract-wallpaper-teal.png</image:loc>
+		</image:image>
+	</url>
+</urlset>

src/components/applications/file-explorer/FileExplorer.jsx

@@ -140,7 +140,7 @@ export function FileExplorer({ startPath }) {
 				</div>
 				<div className={styles.Main}>
 					{currentDirectory?.getFiles(showHidden)?.map((file, index) => 
-						<button key={index} title={file.id} tabIndex={0} className={styles["File-button"]}
+						<button key={index} tabIndex={0} className={styles["File-button"]}
 							onClick={(event) => {
 								event.preventDefault();
 								windowsManager.openFile(file);
@@ -151,7 +151,7 @@ export function FileExplorer({ startPath }) {
 						</button>
 					)}
 					{currentDirectory?.getSubFolders(showHidden)?.map(({ name }, index) => 
-						<button key={index} title={name} tabIndex={0} className={styles["Folder-button"]}
+						<button key={index} tabIndex={0} className={styles["Folder-button"]}
 							onClick={() => {
 								changeDirectory(name);
 							}}

src/components/task-bar/indicators/Network.jsx

@@ -3,7 +3,7 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export function Network() {
 	return (
-		<button title="Wifi" tabIndex={0}>
+		<button title="Network" tabIndex={0}>
 			<FontAwesomeIcon icon={faWifi}/>
 		</button>
 	);

src/components/task-bar/menus/HomeMenu.jsx

@@ -61,7 +61,7 @@ export function HomeMenu({ active, setActive, search }) {
 		<div className={classNames.join(" ")}>
 			<div className={styles["Container-inner"]}>
 				<div className={styles.Buttons}>
-					<button title="Power" tabIndex={tabIndex} onClick={() => { closeTab(); }}>
+					<button title="Shut Down" tabIndex={tabIndex} onClick={() => { closeTab(); }}>
 						<FontAwesomeIcon icon={faPowerOff}/>
 					</button>
 					<button title="Settings" tabIndex={tabIndex} onClick={() => {

src/components/task-bar/menus/SearchMenu.jsx

@@ -77,7 +77,6 @@ export function SearchMenu({ active, setActive, searchQuery, setSearchQuery, inp
 								setActive(false);
 								windowsManager.open(id);
 							}}
-							title={name}
 						>
 							<ReactSVG src={`${process.env.PUBLIC_URL}/media/applications/icons/${id}.svg`}/>
 							<p>{name}</p>

src/components/utils/DropdownButton.jsx

@@ -20,13 +20,13 @@ export function DropdownButton({ label, options, shortcuts }) {
 	return (
 		<OutsideClickListener onOutsideClick={() => { setOpen(false); }}>
 			<div className={styles.Container}>
-				<button title={label} className={styles.Button} tabIndex={0} onClick={() => { setOpen(!open); }}>
+				<button className={styles.Button} tabIndex={0} onClick={() => { setOpen(!open); }}>
 					{label}
 				</button>
 				{open && options
 					? (<div className={styles.Dropdown}>
 						{Object.entries(options).map(([label, callback]) =>
-							<button title={label} key={label} tabIndex={tabIndex} onClick={() => {
+							<button key={label} tabIndex={tabIndex} onClick={() => {
 								setOpen(false);
 								callback();
 							}}>

src/constants/desktop.js

@@ -0,0 +1,10 @@
+export const WALLPAPERS = [
+	"/media/wallpapers/abstract-mesh-gradient-orange-red-purple.png",
+	"/media/wallpapers/abstract-wallpaper-mesh-gradient-cyan.png",
+	"/media/wallpapers/colorful-abstract-wallpaper-blue-red-green.png",
+	"/media/wallpapers/colorful-mesh-gradient-yellow-blue-green.png",
+	"/media/wallpapers/mesh-gradient-wallpaper-red-purple.png",
+	"/media/wallpapers/vibrant-wallpaper-blue-purple-red.png",
+	"/media/wallpapers/vibrant-wallpaper-purple-yellow.png",
+	"/media/wallpapers/wave-abstract-wallpaper-teal.png",
+];

src/constants/virtualDrive.js

@@ -1 +0,0 @@
-export const WALLPAPER_COUNT = 8;

src/features/virtual-drive/virtualRoot.js

@@ -1,4 +1,4 @@
-import { WALLPAPER_COUNT } from "../../constants/virtualDrive.js";
+import { WALLPAPERS } from "../../constants/desktop.js";
 import { StorageManager } from "../storage/storageManager.js";
 import { VirtualFile } from "./virtualFile.js";
 import { VirtualFolder } from "./virtualFolder.js";
@@ -42,7 +42,6 @@ export class VirtualRoot extends VirtualFolder {
 			folder.createFolders(["bin", "sbin", "lib", "share"]);
 		});
 			
-
 		this.createFolder("home", (folder) => {
 			folder.createFolder("prozilla-os", (folder) => {
 				folder.setAlias("~")
@@ -52,9 +51,10 @@ export class VirtualRoot extends VirtualFolder {
 						});
 					})
 					.createFolder("Images", (folder) => {
-						for (let i = 0; i < WALLPAPER_COUNT; i++) {
+						for (let i = 0; i < WALLPAPERS.length; i++) {
+							const source = WALLPAPERS[i];
 							folder.createFile(`Wallpaper${i + 1}`, "png", (file) => {
-								file.setSource(`/media/wallpapers/wallpaper-${i + 1}.png`);
+								file.setSource(source);
 							});
 						}
 					})