Create MetaTags component

2 files changed, 30 insertions, 1 deletions

diff --git a/packages/website/ts/components/meta_tags.tsx b/packages/website/ts/components/meta_tags.tsx
new file mode 100644
index 000000000..f6c43d23f
--- /dev/null
+++ b/packages/website/ts/components/meta_tags.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Helmet } from 'react-helmet';
+
+export interface MetaTagsProps {
+    title: string;
+    description: string;
+    imgSrc?: string;
+}
+
+export const MetaTags: React.StatelessComponent<MetaTagsProps> = ({ title, description, imgSrc }) => (
+    <Helmet>
+        <title>{title}</title>
+        <meta name="description" content={description} />
+        <meta property="og:title" content={title} />
+        <meta property="og:description" content={description} />
+        <meta property="og:type" content="website" />
+        <meta property="og:image" content={imgSrc} />
+        <meta name="twitter:site" content="@0xproject" />
+        <meta name="twitter:image" content={imgSrc} />
+    </Helmet>
+);
+
+MetaTags.defaultProps = {
+    imgSrc: '/images/og_image.png',
+};
diff --git a/packages/website/ts/components/portal/portal.tsx b/packages/website/ts/components/portal/portal.tsx
index c61d04906..ff11880e3 100644
--- a/packages/website/ts/components/portal/portal.tsx
+++ b/packages/website/ts/components/portal/portal.tsx
@@ -12,6 +12,7 @@ import { PortalDisclaimerDialog } from 'ts/components/dialogs/portal_disclaimer_
 import { EthWrappers } from 'ts/components/eth_wrappers';
 import { FillOrder } from 'ts/components/fill_order';
 import { AssetPicker } from 'ts/components/generate_order/asset_picker';
+import { MetaTags } from 'ts/components/meta_tags';
 import { BackButton } from 'ts/components/portal/back_button';
 import { Loading } from 'ts/components/portal/loading';
 import { Menu, MenuTheme } from 'ts/components/portal/menu';
@@ -108,6 +109,8 @@ const LEFT_COLUMN_WIDTH = 346;
 const MENU_PADDING_LEFT = 185;
 const LARGE_LAYOUT_MAX_WIDTH = 1200;
 const SIDE_PADDING = 20;
+const DOCUMENT_TITLE = '0x Portal';
+const DOCUMENT_DESCRIPTION = 'Learn about and trade on 0x Relayers';
 
 export class Portal extends React.Component<PortalProps, PortalState> {
     private _blockchain: Blockchain;
@@ -226,7 +229,8 @@ export class Portal extends React.Component<PortalProps, PortalState> {
                 : TokenVisibility.TRACKED;
         return (
             <Container>
-                <DocumentTitle title="0x Portal" />
+                <MetaTags title={DOCUMENT_TITLE} description={DOCUMENT_DESCRIPTION} />
+                <DocumentTitle title={DOCUMENT_TITLE} />
                 <TopBar
                     userAddress={this.props.userAddress}
                     networkId={this.props.networkId}