diff --git a/src/components/containers/seo.js b/src/components/containers/seo.js index 8c9e72d2795..2e81e515150 100644 --- a/src/components/containers/seo.js +++ b/src/components/containers/seo.js @@ -2,9 +2,9 @@ import React from 'react' import PropTypes from 'prop-types' import { Helmet } from 'react-helmet' import { useStaticQuery, graphql } from 'gatsby' -import { LocaleContext } from '../localization' +import { LocaleContext, localize } from '../localization' import language_config from '../../../i18n-config' -import TradingImage from 'images/common/practice.png' +import TradingImage from 'images/common/og_deriv.png' const non_localized_links = ['/careers', '/careers/'] @@ -31,7 +31,8 @@ const SEO = ({ description, meta, title, no_index, has_organization_schema, meta const site_url = queries.site.siteMetadata.siteUrl const { locale: lang, pathname } = React.useContext(LocaleContext) const locale_pathname = pathname.charAt(0) === '/' ? pathname : `/${pathname}` - + const default_og_title = localize('Online trading with Deriv | Simple. Flexible. Reliable.') + const default_og_description = localize('Trading platforms designed with you in mind.') let is_ach_page = false let current_page = '' let organization_schema = {} @@ -88,7 +89,7 @@ const SEO = ({ description, meta, title, no_index, has_organization_schema, meta }, { property: 'og:title', - content: meta_attributes?.og_title || title, + content: meta_attributes?.og_title || default_og_title, }, { property: 'og:site_name', @@ -96,7 +97,7 @@ const SEO = ({ description, meta, title, no_index, has_organization_schema, meta }, { property: 'og:description', - content: meta_attributes?.og_description || metaDescription, + content: meta_attributes?.og_description || default_og_description, }, { property: 'og:type', @@ -112,11 +113,11 @@ const SEO = ({ description, meta, title, no_index, has_organization_schema, meta }, { property: 'og:image:width', - content: meta_attributes?.og_img_width || '723', + content: meta_attributes?.og_img_width || '600', }, { property: 'og:image:height', - content: meta_attributes?.og_img_height || '423', + content: meta_attributes?.og_img_height || '315', }, { name: 'twitter:card', diff --git a/src/images/common/og_deriv.png b/src/images/common/og_deriv.png new file mode 100644 index 00000000000..16a69439f22 Binary files /dev/null and b/src/images/common/og_deriv.png differ diff --git a/src/pages/careers/index.js b/src/pages/careers/index.js index 2bcfcc2fe5c..4bea6c0b437 100644 --- a/src/pages/careers/index.js +++ b/src/pages/careers/index.js @@ -11,6 +11,13 @@ import { SEO } from 'components/containers' import Layout from 'components/layout/layout' import { localize, WithIntl } from 'components/localization' +const meta_attributes = { + og_title: localize('Careers | Join and grow with us | Deriv'), + og_description: localize( + 'Looking for a great place to work? Deriv is looking for smart, talented, and dedicated people who are up for a challenging and rewarding career.', + ), +} + const Careers = () => ( ( description={localize( 'Looking for a great place to work? Deriv is looking for smart, talented, and dedicated people who are up for a challenging and rewarding career.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/careers/locations/index.js b/src/pages/careers/locations/index.js index dd25ba0e45a..99694c37f8b 100644 --- a/src/pages/careers/locations/index.js +++ b/src/pages/careers/locations/index.js @@ -28,6 +28,13 @@ import RwandaFlagIcon from 'images/svg/flag_rwanda.svg' import BelarusFlagIcon from 'images/svg/flag_belarus.svg' import { ReactComponent as Chevron } from 'images/svg/carousel-chevron.svg' +const meta_attributes = { + og_title: localize('Explore our office locations | Deriv'), + og_description: localize( + 'Discover career opportunities at Deriv across our office locations around the globe.', + ), +} + const ChevronRight = styled(Chevron)` transform: rotate(180deg); width: 16px; @@ -158,6 +165,7 @@ const Locations = () => { description={localize( 'Discover career opportunities at Deriv across our office locations around the globe.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/dbot/index.js b/src/pages/dbot/index.js index dd97d6f9972..3b3a1adc2ba 100644 --- a/src/pages/dbot/index.js +++ b/src/pages/dbot/index.js @@ -19,6 +19,13 @@ const DTrading = Loadable(() => import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const OtherPlatform = Loadable(() => import('components/custom/other-platforms.js')) +const meta_attributes = { + og_title: localize('DBot Trading | Auto Trading Robot | Deriv'), + og_description: localize( + 'Deriv’s easy and free setup of DBot trader can automate your trading without writing codes. Create your own bot trader using our tutorials and guides!', + ), +} + const query = graphql` query { deriv_platform: file(relativePath: { eq: "dbot-banner.png" }) { @@ -109,6 +116,7 @@ class Dbot extends Component { description={localize( 'Deriv’s easy and free setup of DBot trader can automate your trading without writing codes. Create your own bot trader using our tutorials and guides!', )} + meta_attributes={meta_attributes} /> { description={localize( 'DMT5 is developed to give you the best CFD trading experience. You can access our MT5 trader through desktop and even mobile.', )} + meta_attributes={meta_attributes} /> import('components/custom/_dtrading.js')) const DBanner = Loadable(() => import('components/custom/_dbanner.js')) const DHowItWorks = Loadable(() => import('components/custom/_dhow-it-works.js')) +const meta_attributes = { + og_title: localize('DTrader | Online Trading Platform | Deriv.com'), + og_description: localize( + 'DTrader keeps online trading simple, allowing you to trade forex, indices, commodities and synthetic indices.', + ), +} + const query = graphql` query { deriv_platform: file(relativePath: { eq: "dtrader-banner.png" }) { @@ -83,6 +90,7 @@ const Dtrader = () => { description={localize( 'DTrader keeps online trading simple, allowing you to trade forex, indices, commodities and synthetic indices.', )} + meta_attributes={meta_attributes} /> import('./_more-reason.js')) const Faq = Loadable(() => import('./_faq')) const CTA = Loadable(() => import('./_partner-cta')) +const meta_attributes = { + og_title: localize('Affiliate and IB programme | Deriv'), + og_description: localize( + 'Join Deriv’s affiliate and IB programmes and get a chance to be a partner with a trusted online trading provider.', + ), +} + const StyledHeader = styled(Header)` width: 100%; max-width: 70rem; @@ -148,6 +155,7 @@ const AffiliateIb = () => { description={localize( 'Join Deriv’s affiliate and IB programmes and get a chance to be a partner with a trusted online trading provider.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/partners/index.js b/src/pages/partners/index.js index fcc4ac81bce..1add9681012 100644 --- a/src/pages/partners/index.js +++ b/src/pages/partners/index.js @@ -9,6 +9,13 @@ const DerivNumber = Loadable(() => import('./_deriv-numbers')) const WhyChooseUs = Loadable(() => import('./_why-choose-us')) const PartnershipOpportunities = Loadable(() => import('./_partnership-opportunities')) +const meta_attributes = { + og_title: localize('Partnership Programme | Deriv'), + og_description: localize( + 'Explore Deriv’s partnership programme and get a chance to be a partner with a trusted pioneer. All our programmes are free of charge with no hidden fees.', + ), +} + const Partner = () => { return ( @@ -17,6 +24,7 @@ const Partner = () => { description={localize( 'Explore Deriv’s partnership programme and get a chance to be a partner with a trusted pioneer. All our programmes are free of charge with no hidden fees.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/partners/payment-agent/index.js b/src/pages/partners/payment-agent/index.js index 940b936b7a1..ea08a600c4f 100644 --- a/src/pages/partners/payment-agent/index.js +++ b/src/pages/partners/payment-agent/index.js @@ -11,6 +11,13 @@ const YourControl = Loadable(() => import('./_your-control')) const WhoCanApply = Loadable(() => import('./_who-can-apply')) const Faq = Loadable(() => import('./_faq')) +const meta_attributes = { + og_title: localize('Payment agents | Partners | Deriv'), + og_description: localize( + 'Know all the details about how you can become the payment agent on Deriv. Send us an email to apply!', + ), +} + const PaymentAgent = () => { return ( @@ -19,9 +26,10 @@ const PaymentAgent = () => { description={localize( 'Know all the details about how you can become the payment agent on Deriv. Send us an email to apply!', )} + meta_attributes={meta_attributes} /> - + diff --git a/src/pages/payment-methods/index.js b/src/pages/payment-methods/index.js index 526167b5535..78bdbbfde29 100644 --- a/src/pages/payment-methods/index.js +++ b/src/pages/payment-methods/index.js @@ -10,6 +10,11 @@ import { SEO, SectionContainer, Container } from 'components/containers' import { localize, WithIntl, Localize } from 'components/localization' import { DerivStore } from 'store' +const meta_attributes = { + og_title: localize('Payment Methods | Deposits and withdrawals | Deriv'), + og_description: localize('We offer various payment methods - Bank wires, debit/credit cards, e-wallets and cryptocurrencies to make your transactions more convenient!'), +} + const AccordionContainer = styled.div` width: 100%; ` @@ -225,6 +230,7 @@ const PaymentMethods = (locale) => { description={localize( 'We offer various payment methods - Bank wires, debit/credit cards, e-wallets and cryptocurrencies to make your transactions more convenient!', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/trade-types/margin/index.js b/src/pages/trade-types/margin/index.js index 80042bb0942..364450d2b05 100644 --- a/src/pages/trade-types/margin/index.js +++ b/src/pages/trade-types/margin/index.js @@ -13,6 +13,13 @@ const StartTrading = Loadable(() => import('./_start-trading')) const RelationshipWithLeverge = Loadable(() => import('./_relationship-with-leverge')) const AvailableMarkets = Loadable(() => import('./_available-markets')) +const meta_attributes = { + og_title: localize('Margin trading | Trade types | Deriv'), + og_description: localize( + 'Learn about margin trading on Deriv MT5 (DMT5). Enjoy 24/7 trading, high leverage, and zero commissions on forex, synthetic indices, and other assets.', + ), +} + const Margin = () => { return ( @@ -21,6 +28,7 @@ const Margin = () => { description={localize( 'Learn about margin trading on Deriv MT5 (DMT5). Enjoy 24/7 trading, high leverage, and zero commissions on forex, synthetic indices, and other assets.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/trade-types/multiplier/index.js b/src/pages/trade-types/multiplier/index.js index 5e61cddbaec..006d0d0cff2 100644 --- a/src/pages/trade-types/multiplier/index.js +++ b/src/pages/trade-types/multiplier/index.js @@ -13,6 +13,13 @@ const ThingsInMind = Loadable(() => import('./_things-in-mind')) const StartTrading = Loadable(() => import('./_start-trading')) const MarketsAvailable = Loadable(() => import('./_markets-available')) +const meta_attributes = { + og_title: localize('Multipliers trading | Trade types | Deriv'), + og_description: localize( + 'Learn about multipliers trading on Deriv. Enjoy a new way to trade with leverage without risking more than your stake — more profit potential, no swap charges.', + ), +} + const StyledHeader = styled(Header)` @media ${device.tablet} { font-size: 30px; @@ -27,6 +34,7 @@ const Multipliers = () => { description={localize( 'Learn about multipliers trading on Deriv. Enjoy a new way to trade with leverage without risking more than your stake — more profit potential, no swap charges.', )} + meta_attributes={meta_attributes} /> diff --git a/src/pages/trade-types/options/index.js b/src/pages/trade-types/options/index.js index 74d1e608d08..98f3fe0231f 100644 --- a/src/pages/trade-types/options/index.js +++ b/src/pages/trade-types/options/index.js @@ -13,6 +13,13 @@ const OptionsToTrade = Loadable(() => import('./_options-to-trade')) const StartTrading = Loadable(() => import('./_start-trading')) const MarketsAvailable = Loadable(() => import('./_markets-available')) +const meta_attributes = { + og_title: localize('Options trading | Trading types | Deriv'), + og_description: localize( + 'Learn about options trading on Deriv. Earn payouts by correctly predicting price movements without needing to buy the underlying assets.', + ), +} + const Options = () => { const { is_eu_country } = React.useContext(DerivStore) @@ -23,6 +30,7 @@ const Options = () => { description={localize( 'Learn about options trading on Deriv. Earn payouts by correctly predicting price movements without needing to buy the underlying assets.', )} + meta_attributes={meta_attributes} />