From e576f5aaa38da85031ef79b032c16e728831d7fb Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Fri, 2 Jul 2021 14:51:54 +0800
Subject: [PATCH 1/2] p added seo for Deriv X pages

---
 src/components/custom/_dtrading.js    |  4 +++-
 src/pages/derivx/_hero.js             |  4 ++--
 src/pages/derivx/_start-derivx.js     |  6 +++---
 src/pages/derivx/_why-trade-derivx.js | 11 ++++++-----
 src/pages/derivx/index.js             |  9 +++++++--
 5 files changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/components/custom/_dtrading.js b/src/components/custom/_dtrading.js
index 38f3950c12b..115a1892fb7 100644
--- a/src/components/custom/_dtrading.js
+++ b/src/components/custom/_dtrading.js
@@ -131,7 +131,9 @@ const DTrading = ({ trading, reverse, two_title }) => {
                     return (
                         <Row flex_direction={!is_even ? 'row' : 'row-reverse'} key={index}>
                             <Content margin_right={!is_even ? '2.4rem' : '0'}>
-                                <StyledHeader type="page-title">{item.title}</StyledHeader>
+                                <StyledHeader type="page-title" as="h2">
+                                    {item.title}
+                                </StyledHeader>
                                 <Text>{item.subtitle}</Text>
                                 {two_title && (
                                     <>
diff --git a/src/pages/derivx/_hero.js b/src/pages/derivx/_hero.js
index ceaab9eea27..4ce30b770e7 100644
--- a/src/pages/derivx/_hero.js
+++ b/src/pages/derivx/_hero.js
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useCallback } from 'react'
-import { Localize } from 'components/localization'
+import { Localize, localize } from 'components/localization'
 import DHero from 'components/custom/_dhero-2'
 import { size } from 'themes/device'
 import DerivXBG from 'images/svg/deriv-x/triangle-up.svg'
@@ -33,7 +33,7 @@ const Hero = () => {
             is_mobile={is_mobile}
             background_svg={DerivXBG2}
             background_svg2={DerivXBG}
-            background_alt={<Localize translate_text="DerivX" />}
+            background_alt={localize('Deriv X online trading platform')}
             d_height="56.7rem"
             laptopM_height="49.9rem"
             laptop_height="53.8rem"
diff --git a/src/pages/derivx/_start-derivx.js b/src/pages/derivx/_start-derivx.js
index 85f145bf503..f21f44baab2 100644
--- a/src/pages/derivx/_start-derivx.js
+++ b/src/pages/derivx/_start-derivx.js
@@ -62,19 +62,19 @@ const demo = [
             <Localize translate_text="Sign in to your Deriv account. If you don’t have one, sign up for free." />
         ),
         image_data: 'demo_step1',
-        image_alt: 'demo_step1',
+        image_alt: localize('Deriv X demo account signup page'),
     },
     {
         description: <Localize translate_text="Add a Deriv X demo account." />,
         image_data: 'demo_step2',
-        image_alt: 'demo_step2',
+        image_alt: localize('Deriv X dashboard showing demo account comparison'),
     },
     {
         description: (
             <Localize translate_text="Start trading on the mobile app or through your web browser." />
         ),
         image_data: 'demo_step3',
-        image_alt: 'demo_step3',
+        image_alt: localize('Deriv X trading dashboard'),
     },
 ]
 
diff --git a/src/pages/derivx/_why-trade-derivx.js b/src/pages/derivx/_why-trade-derivx.js
index 593e3eb6bd1..33567323b76 100644
--- a/src/pages/derivx/_why-trade-derivx.js
+++ b/src/pages/derivx/_why-trade-derivx.js
@@ -47,7 +47,7 @@ const trading = [
             <Localize translate_text="Easily customise your trading environment. Drag and drop widgets, create your own layouts, and get the info you need, when you need it." />
         ),
         image_name: 'bespoke',
-        image_alt: 'Bespoke trading experience',
+        image_alt: localize('Deriv X widgets to customise your CFD trading'),
     },
     {
         title: <Localize translate_text="Intuitive tools" />,
@@ -55,7 +55,7 @@ const trading = [
             <Localize translate_text="Keep track of your progress with the dashboard, learn from historical trades with the journal, and create custom watchlists for your favourite assets." />
         ),
         image_name: 'intuitive',
-        image_alt: 'Intuitive tools',
+        image_alt: localize('Deriv X dashboard with tools to track your online trading'),
     },
     {
         title: <Localize translate_text="Know your margin" />,
@@ -63,7 +63,7 @@ const trading = [
             <Localize translate_text="You'll always be informed of the margin impact on your account before every trade." />
         ),
         image_name: 'margin',
-        image_alt: 'Know your margin',
+        image_alt: localize('Know the margin impact on your CFD trading'),
     },
     {
         title: <Localize translate_text="Feature-rich charts" />,
@@ -71,7 +71,7 @@ const trading = [
             <Localize translate_text="Enjoy multiple chart views, 90+ indicators, and 13 drawing tools." />
         ),
         image_name: 'feature_rich',
-        image_alt: 'Feature-rich charts',
+        image_alt: localize('Multiple charts to view your online trading'),
     },
 ]
 
@@ -107,7 +107,7 @@ const WhyTradeDerivX = () => {
         <div>
             <SectionContainer>
                 <Container fd="column">
-                    <StyledHeader type="page-title" align="center">
+                    <StyledHeader type="page-title" align="center" as="h2">
                         {localize('Why trade with Deriv X')}
                     </StyledHeader>
                     <Flex tablet_direction="column" tablet_ai="center" mt="40px">
@@ -122,6 +122,7 @@ const WhyTradeDerivX = () => {
                                         type="sub-section-title"
                                         mt="7px"
                                         mb="8px"
+                                        as="h3"
                                     >
                                         {index.title}
                                     </Header>
diff --git a/src/pages/derivx/index.js b/src/pages/derivx/index.js
index ce668243c96..ce2c2d4749c 100644
--- a/src/pages/derivx/index.js
+++ b/src/pages/derivx/index.js
@@ -9,7 +9,7 @@ import StartDerivX from './_start-derivx'
 import Accounts from './_accounts'
 import { SEO } from 'components/containers'
 import Layout from 'components/layout/layout'
-import { WithIntl, Localize } from 'components/localization'
+import { WithIntl, Localize, localize } from 'components/localization'
 import { size } from 'themes/device'
 import { isBrowser } from 'common/utility'
 import BackgroundPatternDerivX from 'images/svg/deriv-x/derivx-footer.svg'
@@ -40,7 +40,12 @@ const DerivX = () => {
 
     return (
         <Layout>
-            <SEO title="Deriv X | Deriv" />
+            <SEO
+                title={localize('Deriv X - a multi-asset CFD trading platform available on Deriv')}
+                description={localize(
+                    'Deriv X is a fully customisable, easy-to-use online trading platform offering CFDs on forex, commodities cryptocurrencies, and synthetic indices.',
+                )}
+            />
             <Hero />
             <SellingPoints />
             <WhatIsDeriv />

From 8d86c34a3fe45eea9834e5f6337e0280c0bb1a4d Mon Sep 17 00:00:00 2001
From: njazuli <78890281+njazuli-deriv@users.noreply.github.com>
Date: Fri, 9 Jul 2021 14:07:36 +0800
Subject: [PATCH 2/2] added back h2 to what is deriv x text

---
 src/pages/derivx/_what-is-derivx.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/derivx/_what-is-derivx.js b/src/pages/derivx/_what-is-derivx.js
index 0ab3a1cd564..41b2d6039c0 100644
--- a/src/pages/derivx/_what-is-derivx.js
+++ b/src/pages/derivx/_what-is-derivx.js
@@ -24,7 +24,7 @@ const WhatIsDeriv = () => {
         <StyledSectionContainer>
             <Container>
                 <Flex width="792px" fd="column" ai="center" jc="center">
-                    <StyledHeader type="page-title" align="center">
+                    <StyledHeader type="page-title" align="center" as="h2">
                         <Localize translate_text="What is Deriv X" />
                     </StyledHeader>
                     <Text size="16px" align="center" mt="12px">