add meta tags to student signup page to prevent search indexing

src/views/studentregistration/student-registration-meta.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Helmet from 'react-helmet';
+
+// tag comments:
+// * robots: important to set to "noindex", instructing crawlers to NOT include
+// these secret pages in their indexes
+// * description/og:description: other content values for these tags have
+// already been provided elsewhere, so the page ends up with two of each; one
+// very generic to Scratch, and then this more specific version.
+// We anticipate that some renderers and browsers may use one, some the other.
+// * link: consider all these signup pages to be one, in the hopes of further
+// discouraging search engines from listing multiple secret links
+const StudentRegistrationMeta = () => (
+    <Helmet>
+        <title>Class Registration</title>
+        <meta
+            name="robots"
+            content="noindex"
+        />
+        <meta
+            content="Scratch registration page for a particular class"
+            name="description"
+        />
+        <meta
+            content="Scratch registration page for a particular class"
+            name="og:description"
+        />
+        <link
+            rel="canonical"
+            href="https://scratch.mit.edu/signup"
+        />
+    </Helmet>
+);
+
+StudentRegistrationMeta.propTypes = {};
+
+export default StudentRegistrationMeta;

src/views/studentregistration/studentregistration.jsx

@@ -11,6 +11,7 @@ const route = require('../../lib/route');
 const Deck = require('../../components/deck/deck.jsx');
 const Progression = require('../../components/progression/progression.jsx');
 const Steps = require('../../components/registration/steps.jsx');
+import StudentRegistrationMeta from './student-registration-meta.jsx';
 
 const render = require('../../lib/render.jsx');
 
@@ -106,48 +107,52 @@ class StudentRegistration extends React.Component {
         const usernameDescription = this.props.intl.formatMessage({id: 'registration.studentUsernameStepDescription'});
         const usernameHelp = this.props.intl.formatMessage({id: 'registration.studentUsernameStepHelpText'});
         return (
-            <Deck className="student-registration">
-                {this.state.registrationError ?
-                    <Steps.RegistrationError>
-                        {this.state.registrationError}
-                    </Steps.RegistrationError> :
-                    <Progression step={this.state.step}>
-                        <Steps.ClassInviteNewStudentStep
-                            classroom={this.state.classroom}
-                            waiting={this.state.waiting || !this.state.classroom}
-                            onNextStep={this.handleAdvanceStep}
-                        />
-                        <Steps.UsernameStep
-                            description={`${usernameDescription} ${usernameHelp}`}
-                            title={this.props.intl.formatMessage({
-                                id: 'registration.usernameStepTitleScratcher'
-                            })}
-                            tooltip={this.props.intl.formatMessage({
-                                id: 'registration.studentUsernameStepTooltip'
-                            })}
-                            usernameHelp={this.props.intl.formatMessage({
-                                id: 'registration.studentUsernameSuggestion'
-                            })}
-                            waiting={this.state.waiting}
-                            onNextStep={this.handleAdvanceStep}
-                        />
-                        <Steps.DemographicsStep
-                            countryName={this.state.classroom && this.state.classroom.educator &&
-                                this.state.classroom.educator.profile && this.state.classroom.educator.profile.country}
-                            description={this.props.intl.formatMessage({
-                                id: 'registration.studentPersonalStepDescription'
-                            })}
-                            waiting={this.state.waiting}
-                            onNextStep={this.handleRegister}
-                        />
-                        <Steps.ClassWelcomeStep
-                            classroom={this.state.classroom}
-                            waiting={this.state.waiting || !this.state.classroom}
-                            onNextStep={this.handleGoToClass}
-                        />
-                    </Progression>
-                }
-            </Deck>
+            <div className="student-registration-shell">
+                <StudentRegistrationMeta />
+                <Deck className="student-registration">
+                    {this.state.registrationError ?
+                        <Steps.RegistrationError>
+                            {this.state.registrationError}
+                        </Steps.RegistrationError> :
+                        <Progression step={this.state.step}>
+                            <Steps.ClassInviteNewStudentStep
+                                classroom={this.state.classroom}
+                                waiting={this.state.waiting || !this.state.classroom}
+                                onNextStep={this.handleAdvanceStep}
+                            />
+                            <Steps.UsernameStep
+                                description={`${usernameDescription} ${usernameHelp}`}
+                                title={this.props.intl.formatMessage({
+                                    id: 'registration.usernameStepTitleScratcher'
+                                })}
+                                tooltip={this.props.intl.formatMessage({
+                                    id: 'registration.studentUsernameStepTooltip'
+                                })}
+                                usernameHelp={this.props.intl.formatMessage({
+                                    id: 'registration.studentUsernameSuggestion'
+                                })}
+                                waiting={this.state.waiting}
+                                onNextStep={this.handleAdvanceStep}
+                            />
+                            <Steps.DemographicsStep
+                                countryName={this.state.classroom && this.state.classroom.educator &&
+                                    this.state.classroom.educator.profile &&
+                                    this.state.classroom.educator.profile.country}
+                                description={this.props.intl.formatMessage({
+                                    id: 'registration.studentPersonalStepDescription'
+                                })}
+                                waiting={this.state.waiting}
+                                onNextStep={this.handleRegister}
+                            />
+                            <Steps.ClassWelcomeStep
+                                classroom={this.state.classroom}
+                                waiting={this.state.waiting || !this.state.classroom}
+                                onNextStep={this.handleGoToClass}
+                            />
+                        </Progression>
+                    }
+                </Deck>
+            </div>
         );
     }
 }