Skip to content

Instantly share code, notes, and snippets.

@rhostem

rhostem/_document.js

Last active January 2, 2022 07:40
Show Gist options
  • Save rhostem/d4ef93900ada28992ab8011f66ce3525 to your computer and use it in GitHub Desktop.
Save rhostem/d4ef93900ada28992ab8011f66ce3525 to your computer and use it in GitHub Desktop.
Download ZIP
[react, next.js] tags in head for SEO
Raw
_document.js
import Head from 'next/head'
import SEO from '../constants/seo'
export default ({
title = SEO.title,
description = SEO.description,
pageUrl = SEO.siteUrl,
mainImage = SEO.mainImage,
iosApplink = SEO.quizBuzzHomeUrl,
androidAppLink = SEO.quizBuzzHomeUrl,
}) => {
return (
<Head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta
name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no"
/>
<base href={process.env.WEBAPP_URL} />
<meta name="description" content={description} />
<meta name="author" content={SEO.author} />
<title>{title}</title>
<meta name="robots" content="index,follow" />
{/* Google Search Console */}
<meta name="google-site-verification" content="verification_token" />
{/* naver 웹마스터 도구 인증 */}
<meta name="naver-site-verification" content="" />
{/* 쿼리스트링에 따라 다른 페이지가 표시되므로 현재 페이지의 full URL을 넣어준다 */}
<link rel="canonical" href={pageUrl} />
<link rel="manifest" href="manifest.json" />
<meta property="fb:app_id" content={SEO.fbAppId} />
<meta property="og:url" content={pageUrl} />
<meta property="og:type" content="website" />
<meta property="og:title" content={title} />
<meta property="og:image" content={mainImage} />
<meta property="og:description" content={description || ''} />
<meta property="og:site_name" content={title} />
<meta property="og:locale" content="ko_KR" />
<meta property="article:author" content={SEO.author} />
<meta property="al:ios:url" content={iosApplink} />
<meta property="al:ios:app_store_id" content={SEO.appstoreId} />
<meta property="al:ios:app_name" content={SEO.appName} />
<meta property="al:android:url" content={androidAppLink} />
<meta property="al:android:app_name" content={SEO.appName} />
<meta property="al:android:package" content={SEO.androidPackageId} />
<meta property="al:web:url" content={SEO.quizBuzzHomeUrl} />
{/* created from https://www.favicon-generator.org/ */}
<link
rel="apple-touch-icon"
sizes="57x57"
href="/static/images/app-icon/apple-icon-57x57.png"
/>
<link
rel="apple-touch-icon"
sizes="60x60"
href="/static/images/app-icon/apple-icon-60x60.png"
/>
<link
rel="apple-touch-icon"
sizes="72x72"
href="/static/images/app-icon/apple-icon-72x72.png"
/>
<link
rel="apple-touch-icon"
sizes="76x76"
href="/static/images/app-icon/apple-icon-76x76.png"
/>
<link
rel="apple-touch-icon"
sizes="114x114"
href="/static/images/app-icon/apple-icon-114x114.png"
/>
<link
rel="apple-touch-icon"
sizes="120x120"
href="/static/images/app-icon/apple-icon-120x120.png"
/>
<link
rel="apple-touch-icon"
sizes="144x144"
href="/static/images/app-icon/apple-icon-144x144.png"
/>
<link
rel="apple-touch-icon"
sizes="152x152"
href="/static/images/app-icon/apple-icon-152x152.png"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/static/images/app-icon/apple-icon-180x180.png"
/>
<link
rel="icon"
type="image/png"
sizes="192x192"
href="/static/images/app-icon/android-icon-192x192.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/static/images/app-icon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="96x96"
href="/static/images/app-icon/favicon-96x96.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/static/images/app-icon/favicon-16x16.png"
/>
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png" />
<meta name="theme-color" content="#ffffff" />
</Head>
)
}
@w3debugger
Copy link

how about ?

import Head from 'next/head'
import SEO from '../constants/seo'

export default ({ title, pageUrl, mainImage, iosApplink, description, androidAppLink }) => {
  const metaName = {
    'author': SEO.author,
    'robots': 'index,follow',
    'viewport': 'width=device-width, initial-scale=1, shrink-to-fit=no',
    'description': description || SEO.description,
    'theme-color': '#ffffff',
    'naver-site-verification': '',
    'msapplication-TileColor': '#ffffff',
    'msapplication-TileImage': '/ms-icon-144x144.png',
    'google-site-verification': 'verification_token',
  };

  const metaProperty = {
    'fb:app_id': SEO.fbAppId,
    'article:author': SEO.author,
    'al:web:url': SEO.quizBuzzHomeUrl,
    'al:ios:url': iosApplink || SEO.quizBuzzHomeUrl,
    'al:ios:app_name': SEO.appName,
    'al:ios:app_store_id': SEO.appstoreId,
    'al:android:url': androidAppLink || SEO.quizBuzzHomeUrl,
    'al:android:package': SEO.androidPackageId,
    'al:android:app_name': SEO.appName,
    'og:url': pageUrl || SEO.siteUrl,
    'og:type': 'website',
    'og:title': title || SEO.title,
    'og:image': mainImage || SEO.mainImage,
    'og:locale': 'ko_KR',
    'og:site_name': title || SEO.title,
    'og:description': description || SEO.description || '',
  };

  const hrefFavIcon = size => `/static/images/app-icon/favicon-${size}x${size}.png`;
  const hrefAppleIcon = size => `/static/images/app-icon/apple-icon-${size}x${size}.png`;
  const sizesFavIcon = [16, 32, 96];
  const sizesAppleIcon = [57, 60, 72, 76, 114, 120, 144, 152, 180];

  return (
    <Head>
      <title>{title || SEO.title}</title>
      <meta charSet="utf-8" />
      <meta httpEquiv="x-ua-compatible" content="ie=edge" />

      <base href={process.env.WEBAPP_URL} />
      <link href={pageUrl || SEO.siteUrl} rel="canonical" />
      <link href="manifest.json" rel="manifest" />

      {Object.keys(metaName).map(name => (<meta name={name} content={metaName[name]} />))}
      {Object.keys(metaProperty).map(property => (<meta property={property} content={metaProperty[property]} />))}

      {/* created from https://www.favicon-generator.org */}
      {sizesFavIcon.map(size => (<link sizes={`${size}x${size}`} href={hrefFavIcon(size)} rel="icon" type="image/png" />))}
      {sizesAppleIcon.map(size => (<link sizes={`${size}x${size}`} href={hrefAppleIcon(size)} rel="apple-touch-icon" />))}

      <link rel="icon" type="image/png" sizes="192x192" href="/static/images/app-icon/android-icon-192x192.png" />
    </Head>
  )
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment