Add og-image.png

Update Open Graph meta tags
This commit is contained in:
Adam Iannazzone 2024-10-30 10:07:59 -04:00
parent 1ddc9544d8
commit 6a6f90ce86
2 changed files with 40 additions and 29 deletions

BIN
assets/og-image.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 105 KiB

View file

@ -5,17 +5,24 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>RetroDECK</title> <title>RetroDECK</title>
<meta name="description"
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<meta property="og:title" content="RetroDECK" /> <!-- Facebook Meta Tags -->
<meta property="og:type" content="website" /> <meta property="og:url" content="https://retrodeck.github.io/RetroDECK-Website/">
<meta property="og:url" content="https://retrodeck.net" /> <meta property="og:title" content="RetroDECK">
<meta property="og:image" content="https://retrodeck.net/assets/screens/screen03.png" /> <meta property="og:description"
<meta name="og:description" content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app." /> <meta property="og:image" content="https://retrodeck.net/assets/og-image.png">
<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="retrodeck.github.io">
<meta property="twitter:url" content="https://retrodeck.github.io/RetroDECK-Website/">
<meta name="twitter:title" content="RetroDECK"> <meta name="twitter:title" content="RetroDECK">
<meta name="twitter:card" content="summary"> <meta name="twitter:description"
<meta name="twitter:image" content=""> content="RetroDECK is a polished and beginner-friendly environment for playing your retro games on Steam Deck, available with just one click from the Discover app.">
<meta name="twitter:image" content="https://retrodeck.net/assets/og-image.png">
<link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/rd-icons/icon_circle_2_180x180.png"> <link rel="apple-touch-icon" type="image/png" sizes="180x180" href="assets/rd-icons/icon_circle_2_180x180.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/rd-icons/icon_circle_16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="assets/rd-icons/icon_circle_16x16.png">
@ -114,8 +121,8 @@
</a> </a>
<ul class="dropdown-menu"> <ul class="dropdown-menu">
<li> <li>
<a class="dropdown-item" href="https://github.com/RetroDECK/RetroDECK" <a class="dropdown-item" href="https://github.com/RetroDECK/RetroDECK" target="_blank"
target="_blank" rel="noopener noreferrer"> rel="noopener noreferrer">
<svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24" <svg role="img" height="1rem" class="pe-2" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"> xmlns="http://www.w3.org/2000/svg">
<title>GitHub</title> <title>GitHub</title>
@ -125,8 +132,8 @@
</a> </a>
</li> </li>
<li> <li>
<a class="dropdown-item" href="https://github.com/RetroDECK/Cooker" <a class="dropdown-item" href="https://github.com/RetroDECK/Cooker" target="_blank"
target="_blank" rel="noopener noreferrer"> rel="noopener noreferrer">
<svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg" <svg role="img" height="1rem" class="pe-2" xmlns="http://www.w3.org/2000/svg"
fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16"> fill="currentColor" class="bi bi-fire" viewBox="0 0 16 16">
<path <path
@ -149,9 +156,9 @@
</li> </li>
</ul> </ul>
<span class="navbar-text form-check form-switch"> <span class="navbar-text form-check form-switch">
<input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch" <input class="form-check-input" id="pixel-font-switch" type="checkbox" role="switch"
id="reduceMotionSwitch" checked onchange="pixelFontToggle()"> id="reduceMotionSwitch" checked onchange="pixelFontToggle()">
<label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label> <label class="form-check-label" for="reduceMotionSwitch">Retro Fonts</label>
</span> </span>
</div> </div>
</div> </div>
@ -164,10 +171,10 @@
<div class="container mb-4"> <div class="container mb-4">
<div class="row"> <div class="row">
<div class="col-12"> <div class="col-12">
<img class="img-fluid" src="assets/screens/logo-on-steamdeck.png"/> <img class="img-fluid" src="assets/screens/logo-on-steamdeck.png" />
</div> </div>
</div> </div>
</div> </div>
<!-- Stop Killing Games --> <!-- Stop Killing Games -->
<div class="container px-2"> <div class="container px-2">
@ -376,33 +383,35 @@
<div class="col-9"> <div class="col-9">
<p>Enable cheats in all supported emulators.</p> <p>Enable cheats in all supported emulators.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="row py-0 align-items-center"> <div class="row py-0 align-items-center">
<div class="col-3 text-center"> <div class="col-3 text-center">
<img class="img-fluid" src="assets/feature-icons/card_place.png"> <img class="img-fluid" src="assets/feature-icons/card_place.png">
</div> </div>
<div class="col-9"> <div class="col-9">
<p>Use the ES-DE frontend to easily import screenshots and metadata for your library.</p> <p>Use the ES-DE frontend to easily import screenshots and metadata for your
library.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="row py-0 align-items-center"> <div class="row py-0 align-items-center">
<div class="col-3 text-center"> <div class="col-3 text-center">
<img class="img-fluid" src="assets/feature-icons/award.png"> <img class="img-fluid" src="assets/feature-icons/award.png">
</div> </div>
<div class="col-9"> <div class="col-9">
<p>Connect with RetroAchievements and get credit for all of your amazing accomplishments.</p> <p>Connect with RetroAchievements and get credit for all of your amazing
accomplishments.</p>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- End Extra Features Row 1 --> <!-- End Extra Features Row 1 -->
<hr class="d-none d-md-block"/> <hr class="d-none d-md-block" />
<!-- Extra Features Row 2 --> <!-- Extra Features Row 2 -->
<div class="row py-0 align-items-center"> <div class="row py-0 align-items-center">
<div class="col-md-4"> <div class="col-md-4">
@ -413,20 +422,21 @@
<div class="col-9"> <div class="col-9">
<p>Easily install on other Linux distributions.</p> <p>Easily install on other Linux distributions.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="row py-0 align-items-center"> <div class="row py-0 align-items-center">
<div class="col-3 text-center"> <div class="col-3 text-center">
<img class="img-fluid" src="assets/feature-icons/spinner.png"> <img class="img-fluid" src="assets/feature-icons/spinner.png">
</div> </div>
<div class="col-9"> <div class="col-9">
<p>Use the custom controller template for quick access to emulator settings with the touchpad.</p> <p>Use the custom controller template for quick access to emulator settings with
the touchpad.</p>
</div> </div>
</div> </div>
</div> </div>
<div class="col-md-4"> <div class="col-md-4">
<div class="row py-0 align-items-center"> <div class="row py-0 align-items-center">
<div class="col-3 text-center"> <div class="col-3 text-center">
@ -506,7 +516,8 @@
<div class="row justify-content-between"> <div class="row justify-content-between">
<div class="col"> <div class="col">
<div class="text-center"> <div class="text-center">
Some icons courtesy of <a target="_blank" rel="noopener noreferrer" href="https://kenney.nl/">Kenney.nl</a>. Some icons courtesy of <a target="_blank" rel="noopener noreferrer"
href="https://kenney.nl/">Kenney.nl</a>.
</div> </div>
</div> </div>
</div> </div>