Skip to content

Commit

Permalink
Merge pull request #15 from AntonioNarcilio/dev
Browse files Browse the repository at this point in the history
🧣 style(metatags/SEO): multiple language checking
  • Loading branch information
AntonioNarcilio committed Aug 21, 2021
2 parents f5aead5 + fffece9 commit 550d570
Showing 1 changed file with 43 additions and 17 deletions.
60 changes: 43 additions & 17 deletions src/pages/_document.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,24 @@
/* eslint-disable camelcase */
/* eslint-disable react/jsx-props-no-spreading */
import Document, {
Html, Head, Main, NextScript, DocumentContext,
} from 'next/document';
import { ServerStyleSheet } from 'styled-components';

const TITLE_PAGE = 'HLS video player';
const DESCRIPTION = 'Watch streaming videos in M3U8 format super easy';
const URL_SITE = 'https://';
const URI_IMAGE = '/assets/preview.png';
const META_TAGS_I18N = {
en_US: {
title_page: 'HLS video player',
description: 'Watch streaming videos in M3U8 format super easy!',
url_site: 'https://video-player-hls.vercel.app',
uri_image: 'https://video-player-hls.vercel.app/assets/preview.png',
},
pt_BR: {
title_page: 'HLS video player',
description: 'Visualize videos no formato M3U8 de forma super fácil!',
url_site: 'https://video-player-hls.vercel.app',
uri_image: 'https://video-player-hls.vercel.app/assets/preview.png',
},
};

export default class MyDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
Expand Down Expand Up @@ -44,30 +55,45 @@ export default class MyDocument extends Document {

render() {
return (
<Html lang="en">
<Html>
<Head>
<meta name="author" content="Antonio Narcilio" />

<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta property="og:locale" content="en_US" />
<meta name="title" content={TITLE_PAGE} key="title" />
<meta name="description" content={DESCRIPTION} key="desc" />
<meta lang="en_US" name="title" content={META_TAGS_I18N.en_US.title_page} key="title" />
<meta lang="en_US" name="description" content={META_TAGS_I18N.en_US.description} key="desc" />

<meta lang="pt_BR" name="title" content={META_TAGS_I18N.pt_BR.title_page} key="title" />
<meta lang="pt_BR" name="description" content={META_TAGS_I18N.pt_BR.description} key="desc" />

{/* Open Graph / Facebook */}
<meta property="og:type" content="website" />
<meta property="og:site_name" content={TITLE_PAGE} key="ogsitename" />
<meta property="og:url" content={URL_SITE} key="ogurl" />
<meta property="og:title" content={TITLE_PAGE} key="ogtitle" />
<meta property="og:description" content={DESCRIPTION} key="ogdesc" />
<meta property="og:image" content={URI_IMAGE} key="ogimg" />
<meta property="og:image:type" content="image/jpeg" />
<meta lang="en_US" property="og:site_name" content={META_TAGS_I18N.en_US.title_page} key="ogsitename" />
<meta lang="en_US" property="og:url" content={META_TAGS_I18N.en_US.url_site} key="ogurl" />
<meta lang="en_US" property="og:title" content={META_TAGS_I18N.en_US.title_page} key="ogtitle" />
<meta lang="en_US" property="og:description" content={META_TAGS_I18N.en_US.description} key="ogdesc" />
<meta lang="en_US" property="og:image" content={META_TAGS_I18N.en_US.uri_image} key="ogimg" />
<meta lang="en_US" property="og:image:type" content="image/jpeg" />

<meta lang="pt_BR" property="og:site_name" content={META_TAGS_I18N.en_US.title_page} key="ogsitename" />
<meta lang="pt_BR" property="og:url" content={META_TAGS_I18N.en_US.url_site} key="ogurl" />
<meta lang="pt_BR" property="og:title" content={META_TAGS_I18N.en_US.title_page} key="ogtitle" />
<meta lang="pt_BR" property="og:description" content={META_TAGS_I18N.en_US.description} key="ogdesc" />
<meta lang="pt_BR" property="og:image" content={META_TAGS_I18N.en_US.uri_image} key="ogimg" />
<meta lang="pt_BR" property="og:image:type" content="image/jpeg" />

{/* Twitter */}
<meta property="twitter:card" content="summary_large_image" key="tw" />
<meta property="twitter:url" content={URL_SITE} key="twurl" />
<meta property="twitter:title" content={TITLE_PAGE} key="twtitle" />
<meta property="twitter:description" content={DESCRIPTION} key="twdesc" />
<meta property="twitter:image" content={URI_IMAGE} key="twimg" />
<meta lang="en_US" property="twitter:url" content={META_TAGS_I18N.en_US.url_site} key="twurl" />
<meta lang="en_US" property="twitter:title" content={META_TAGS_I18N.en_US.title_page} key="twtitle" />
<meta lang="en_US" property="twitter:description" content={META_TAGS_I18N.en_US.description} key="twdesc" />
<meta lang="en_US" property="twitter:image" content={META_TAGS_I18N.en_US.uri_image} key="twimg" />

<meta lang="pt_BR" property="twitter:url" content={META_TAGS_I18N.en_US.url_site} key="twurl" />
<meta lang="pt_BR" property="twitter:title" content={META_TAGS_I18N.en_US.title_page} key="twtitle" />
<meta lang="pt_BR" property="twitter:description" content={META_TAGS_I18N.en_US.description} key="twdesc" />
<meta lang="pt_BR" property="twitter:image" content={META_TAGS_I18N.en_US.uri_image} key="twimg" />

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap" rel="stylesheet" />
Expand Down

1 comment on commit 550d570

@vercel
Copy link

@vercel vercel bot commented on 550d570 Aug 21, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.