Appease crawlers and embbeders

`<meta>` tags have been added to relay information for websites trying to pull information from the page (like discord) as well as web crawlers to index the page.
2024-11-24 13:47:59 +01:00 · 2022-01-30 17:46:59 +01:00 · 2022-01-30 17:46:59 +01:00 · 59f1c7db6e
commit 59f1c7db6e
parent afc7bbad01
6 changed files with 63 additions and 10 deletions
--- a/frontend/html/index.html
+++ b/frontend/html/index.html
@ -4,6 +4,19 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ TITLE }}</title>
+    
+    <meta name="description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+    
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”index,nofollow”>
+
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@ -18,7 +31,7 @@
 <body>
    <header>
        <h1>Poll.horse</h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
    </header>
    <main>
        <section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
--- a/frontend/html/poll.html
+++ b/frontend/html/poll.html
@ -4,6 +4,19 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ TITLE }}</title>
+    
+    <meta name="description" content="{{ POLL_META_DESCRIPTION }}">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="{{ POLL_META_DESCRIPTION }}" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”noindex,nofollow”>
+
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@ -27,7 +40,7 @@
 <body>
    <header>
        <h1><a href="/">Poll.horse</a></h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
    </header>
    <main>
        <section class="error {{ FORM_SUBMISSION_ERROR_SHOWN_CLASS }}">
@ -49,7 +62,7 @@
                    <a href="/{{ POLL_ID }}/r"><button type="button">Results</button></a>
                </section>
            </form>
-            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
+            <aside id="qrcode"><img alt="QR Code to voting page" src="{{ QR_CODE }}"></aside>
        </section>
    </main>
    <footer>
--- a/frontend/html/result.html
+++ b/frontend/html/result.html
@ -4,6 +4,19 @@
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ TITLE }}</title>
+
+    <meta name="description" content="{{ POLL_META_DESCRIPTION }}">
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="{{ TITLE }}" />
+    <meta property="og:description" content="{{ POLL_META_DESCRIPTION }}" />
+    <meta property="og:url" content="{{ CANONICAL_HOST }}" />
+    <meta property="og:image" content="" />
+    <meta property="og:site_name" content="Poll.Horse" />
+    <meta content="#FFD756" data-react-helmet="true" name="theme-color" />
+
+    <link rel="canonical" href="{{ CANONICAL_HOST }}" />
+    <meta name=”robots” content=”noindex,nofollow”>
+
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;700&display=swap" rel="stylesheet">
@ -21,7 +34,7 @@
 <body>
    <header>
        <h1><a href="/">Poll.horse</a></h1>
-        <h3>Make voting on things simpler</h3>
+        <h2>Make voting on things simpler</h2>
    </header>
    <main>
        <section class="poll-id">ID: {{ POLL_ID }}</section>
@ -37,7 +50,7 @@
                <a href="/{{ POLL_ID }}"><button type="button" id="submit-button">Vote</button></a>
            </section>
            <aside id="chart"></aside>
-            <aside id="qrcode"><img src="{{ QR_CODE }}"></aside>
+            <aside id="qrcode"><img alt="QR Code to voting page" src="{{ QR_CODE }}" crossorigin></aside>
        </section>
    </main>
    <footer>
--- a/frontend/static/css/main.css
+++ b/frontend/static/css/main.css
@ -21,6 +21,10 @@ body {
    font-family: 'Caveat', cursive;
 }

+h2 {
+    font-size: 1.17em;
+}
+
 input[type="text"] {
    width: 100%;
    height: 100%;
@ -197,7 +201,7 @@ main .notepad .poll-footer button {
    height: 50px;
    border-radius: 10px;
    border: none;
-    background-color: #a8a8a8;
+    background-color: #404040;
    cursor: pointer;
    font-size: 1.25em;
    transition: background-color 0.2s;
@ -206,7 +210,7 @@ main .notepad .poll-footer button {
 }
 main .notepad .poll-footer input[type="submit"]:hover,
 main .notepad .poll-footer button:hover {
-    background-color: #b6b6b6;
+    background-color: #707070;
 }

 #submit-button {
--- a/src/frontend.ts
+++ b/src/frontend.ts
@ -58,9 +58,9 @@ const defaultReplacements = {
    "DEVELOPER_CONTACT_INFO": "developer@poll.horse",
    "FOOTER_COPYRIGHT": `© ${ (new Date()).getFullYear() } Based Department`,
    "FOOTER_LINKS": `
-        <li><a href="https://github.com/Wolvan/poll.horse" target="_blank">Github Repo</a></li>
-        <li><a href="https://www.mppp.horse/" target="_blank">/mppp/ - Mass Production plushies</a></li>
-        <li><a href="https://www.pon3.stream/" target="_blank">Pon3.Stream</a></li>
+        <li><a href="https://github.com/Wolvan/poll.horse" target="_blank" rel="noreferrer">Github Repo</a></li>
+        <li><a href="https://www.mppp.horse/" target="_blank" rel="noreferrer">/mppp/ - Mass Production plushies</a></li>
+        <li><a href="https://www.pon3.stream/" target="_blank" rel="noreferrer">Pon3.Stream</a></li>
    `,
    "SYSTEM_VERSION": ((): string => {
        try {
@ -149,6 +149,8 @@ export default function init(router: Router): void {
                "BACKEND_BASE_PATH": (program.opts().backendBaseUrl || ""),
                "POLL_OPTION_VOTES": Buffer.from(JSON.stringify(Object.entries(poll.votes))).toString("base64"),
                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
+                "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || "") + "/" + id + "/r",
+                "POLL_META_DESCRIPTION": xss(poll.title || "Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!").substring(0, 150),
                "CORS_SCRIPT_NONCE": res.locals.cspNonce
            });
        } catch (error) {
@ -187,6 +189,8 @@ export default function init(router: Router): void {
                "FORM_SUBMISSION_ERROR": xss(req.query.error + ""),
                "FORM_SUBMISSION_ERROR_SHOWN_CLASS": req.query.error ? "error-visible" : "",
                "QR_CODE": `https://chart.googleapis.com/chart?cht=qr&chs=190x190&chld=L|1&chl=${ encodeURIComponent(`${ req.protocol }://${ req.headers.host }/${ id }`) }`,
+                "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || "") + "/" + id,
+                "POLL_META_DESCRIPTION": xss(poll.title || "Simple, free and open source way to host polls for people to vote on. Create your own polls and share them with others!").substring(0, 150),
                "CORS_SCRIPT_NONCE": res.locals.cspNonce
            });
        } catch (error) {
@ -221,6 +225,7 @@ export default function init(router: Router): void {
            "FORM_OPTION_DIVS": pollOptionDivs,
            "MAX_POLL_OPTIONS": MAX_POLL_OPTIONS,
            "MAX_CHARACTER_LENGTH": MAX_CHARACTER_LENGTH,
+            "CANONICAL_HOST": req.protocol + "://" + (req.headers.host || ""),
            "CORS_SCRIPT_NONCE": res.locals.cspNonce
        });
    });
--- a/src/main.ts
+++ b/src/main.ts
@ -78,6 +78,11 @@ async function main(): Promise<void> {
        await frontend.default(frontendRouter);

        app.use("/static", express.static(resolve(__dirname, "../frontend/static")));
+        app.get("/robots.txt", (req, res) => res.send(`
+            User-Agent: *
+            Allow: /$
+            Disallow: /
+        `));
        app.use("/", frontendRouter);
    }