LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@knx34

Google AdSense審査に通るための Next.jsサイト改修ガイド

Posted at

Google AdSense審査に通るための

Next.jsサイト改修ガイド

はじめに

Google AdSenseの審査に通過するため
には、サイトが一定の基準を満たして
いる必要があります。この記事では、
Next.jsで構築されたサイトを対象に
、AdSense審査に通るための改修ポイ
ントとその実装方法を解説します。

実際に作成したブログサイトがこちらです。まだまだ作成中ですが参考に見てみてください
https://hotspotnews.jp/

目次

  1. 必要な法的ページの実装 #1-必要な法的ページの実装
    • プライバシーポリシー #プライバシーポリシー
    • 利用規約 #利用規約
    • お問い合わせページ #お問い合わせページ
  2. サイト情報の充実 #2-サイト情報の充実
    • About Usページ #about-usページ
  3. SEO対策の強化 #3-seo対策の強化
    • サイトマップの実装 #サイトマップの実装
    • robots.txtの最適化 #robotstxtの最適化
  4. 実装のポイント #4-実装のポイント
    • Next.js App Routerの活用 #nextjs-app-routerの活用
    • Chakra UIによるデザイン #chakra-uiによるデザイン
  5. まとめ #まとめ

1. 必要な法的ページの実装

プライバシーポリシー

プライバシーポリシーは、サイトがユ
ーザーの個人情報をどのように収集・
利用するかを説明するページです。
AdSense審査では必須とされています
。

実装ポイント:
• 個人情報の収集・利用方法の明記
• Cookieの使用に関する説明
• 第三者サービス（Google Analytics
、AdSenseなど）の利用について
• ユーザーの権利と選択肢の説明

tsx

// src/app/privacy-policy/page.tsx
export default function PrivacyPolicyPage() {
  return (
    <Container maxW="container.md" py={8}>
      <Heading as="h1" size="2xl" mb={6}>プライバシーポリシー</Heading>
      
      <Box mb={8}>
        <Heading as="h2" size="lg" mb={4}>1. 個人情報の収集について</Heading>
        <Text mb={4}>
          当サイトでは、お問い合わせやコメント投稿の際に、お名前・メールアドレスなどの個人情報をご入力いただく場合があります。
          これらの情報は、質問に対する回答や必要な情報を提供するために利用させていただきます。
        </Text>
        {/* 以下、詳細な内容 */}
      </Box>
      
      {/* 他のセクション */}
    </Container>
  );
}

利用規約

利用規約は、サイトの利用条件や禁止
事項を明記するページです。

実装ポイント:
• サイト利用の条件
• 禁止行為の明記
• 知的財産権に関する情報
• 免責事項

tsx

// src/app/terms/page.tsx
export default function TermsPage() {
  return (
    <Container maxW="container.md" py={8}>
      <Heading as="h1" size="2xl" mb={6}>利用規約</Heading>
      
      <Box mb={8}>
        <Heading as="h2" size="lg" mb={4}>1. 利用条件</Heading>
        <Text mb={4}>
          本サイトを利用することにより、利用者は本規約に同意したものとみなされます。
          本規約に同意いただけない場合は、本サイトの利用をお控えください。
        </Text>
        {/* 以下、詳細な内容 */}
      </Box>
      
      {/* 他のセクション */}
    </Container>
  );
}

お問い合わせページ

ユーザーがサイト運営者に連絡できる
手段を提供するページです。

実装ポイント:
• 名前、メールアドレス、件名、メッ
セージの入力フォーム
• フォームバリデーション
• 送信後のフィードバック

tsx
// src/app/contact/page.tsx
"use client";

import { useState } from "react";
import { Box, Container, Heading, FormControl, FormLabel, Input, Textarea, Button, Alert, AlertIcon } from "@chakra-ui/react";

export default function ContactPage() {
  const [formData, setFormData] = useState({
    name: "",
    email: "",
    subject: "",
    message: ""
  });
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [isSubmitted, setIsSubmitted] = useState(false);
  const [error, setError] = useState("");

  const handleChange = (e) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value
    });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setIsSubmitting(true);
    setError("");
    
    try {
      const response = await fetch("/api/contact", {
        method: "POST",
        headers: {
          "Content-Type": "application/json",
        },
        body: JSON.stringify(formData),
      });
      
      if (!response.ok) {
        throw new Error("送信に失敗しました");
      }
      
      setIsSubmitted(true);
      setFormData({ name: "", email: "", subject: "", message: "" });
    } catch (err) {
      setError("エラーが発生しました。後ほど再度お試しください。");
    } finally {
      setIsSubmitting(false);
    }
  };

  return (
    <Container maxW="container.md" py={8}>
      <Heading as="h1" size="2xl" mb={6}>お問い合わせ</Heading>
      
      {isSubmitted ? (
        <Alert status="success">
          <AlertIcon />
          お問い合わせを受け付けました。内容を確認の上、回答いたします。
        </Alert>
      ) : (
        <Box as="form" onSubmit={handleSubmit}>
          {/* フォームフィールド */}
          <FormControl mb={4} isRequired>
            <FormLabel>お名前</FormLabel>
            <Input name="name" value={formData.name} onChange={handleChange} required />
          </FormControl>
          
          {/* 他のフォームフィールド */}
          
          <Button type="submit" colorScheme="blue" isLoading={isSubmitting}>
            送信する
          </Button>
          
          {error && (
            <Alert status="error" mt={4}>
              <AlertIcon />
              {error}
            </Alert>
          )}
        </Box>
      )}
    </Container>
  );
}

2. サイト情報の充実

About Usページ

サイトの目的や運営者情報を提供する
ページです。サイトの信頼性を高める
ために重要です。

実装ポイント:
• サイトの目的と概要
• 運営者情報
• サイトのビジョンや価値観
• 読者にとっての価値

tsx
// src/app/about/page.tsx
import { Metadata } from "next";
import { Box, Container, Heading, Text, Flex, Stack, HStack } from "@chakra-ui/react";
import * as Avatar from "@chakra-ui/avatar";
import NextLink from "next/link";
import { Link } from "@chakra-ui/react";

export const metadata: Metadata = {
  title: "サイトについて | HotspotNews",
  description: "HotspotNewsの目的、ビジョン、運営者情報についてご紹介します。",
};

export default function AboutPage() {
  return (
    <Container maxW="container.md" py={8}>
      <Heading as="h1" size="2xl" mb={6} textAlign="center">
        サイトについて
      </Heading>
      
      {/* サイトの目的と概要セクション */}
      <Box mb={10}>
        <Heading as="h2" size="xl" mb={4} color="blue.600">
          HotspotNewsについて
        </Heading>
        <Text fontSize="lg" mb={4}>
          最新のトレンドや時事ネタをわかりやすく伝えることを目的としたニュースブログです。
          情報過多の現代社会において、本当に価値のある情報を厳選し、読者の皆様に提供しています。
        </Text>
        {/* 以下、詳細な内容 */}
      </Box>
      
      {/* 運営者情報セクション */}
      <Box mb={10}>
        <Heading as="h2" size="xl" mb={4} color="blue.600">
          運営者情報
        </Heading>
        <Text fontSize="lg" mb={6}>
          多様なバックグラウンドを持つ編集チームによって運営されています。
          各分野の専門知識と経験を活かし、質の高いコンテンツを提供することを心がけています。
        </Text>
        
        {/* 運営者プロフィール */}
        <Stack gap="8">
          {/* プロフィールカード */}
        </Stack>
      </Box>
      
      {/* ビジョンと価値観セクション */}
      {/* 読者にとっての価値セクション */}
    </Container>
  );
}

3. SEO対策の強化

サイトマップの実装

サイトマップは検索エンジンがサイト
の構造を理解するのに役立ちます。

実装手順:

  1. next-sitemapのインストール
    bash
    npm install next-sitemap

  2. 設定ファイルの作成
    javascript

// next-sitemap.config.js
/** @type {import('next-sitemap').IConfig} */
module.exports = {
  siteUrl: process.env.SITE_URL || 'https://hotspot-news.com',
  generateRobotsTxt: true,
  robotsTxtOptions: {
    policies: [
      {
        userAgent: '*',
        allow: '/',
      },
    ],
  },
  exclude: ['/server-sitemap.xml'],
  changefreq: 'daily',
  priority: 0.7,
};
  1. package.jsonの更新
json
"scripts": {
  "build": "next build",
  "postbuild": "next-sitemap"
}

robots.txtの最適化

robots.txtファイルは、クローラーに
サイトのどの部分をクロールしてよい
かを指示します。

実装ポイント:
• 適切なUser-agentの設定
• クロール許可・不許可の指定
• サイトマップへのリンク

next-sitemapを使用すると、
robots.txtも自動生成されます。

4. 実装のポイント

Next.js App Routerの活用

Next.js 13以降のApp Routerを使用す
ることで、ファイルベースのルーティ
ングが簡単になります。

メリット:
• ファイル構造がそのままURLパスに
なる
• レイアウトの共有が容易
• サーバーコンポーネントとクライア
ントコンポーネントの使い分け

Chakra UIによるデザイン

Chakra UIを使用することで、アクセ
シビリティに配慮したレスポンシブデ
ザインを簡単に実装できます。

実装例:

tsx
<Flex direction={{ base: "column", md: "row" }} gap={6}>
  <Box flex="1" bg="gray.50" p={5} borderRadius="md" borderLeft="4px solid" borderColor="blue.400">
    <Heading as="h3" size="md" mb={3}>
      時間の節約
    </Heading>
    <Text>
      膨大な情報の中から価値ある情報を厳選してお届けすることで、
      情報収集にかかる時間を大幅に削減できます。
    </Text>
  </Box>
  
  {/* 他のカード */}
</Flex>

まとめ

進めることが重要です：

  1. 法的ページの完備
    • プライバシーポリシー
    • 利用規約
    • お問い合わせページ

  2. サイト情報の充実
    • About Usページ
    • 運営者情報の透明性

  3. SEO対策
    • サイトマップの実装
    • robots.txtの最適化

  4. 技術的な実装
    • Next.js App Routerの活用
    • Chakra UIによるレスポンシブデ
    ザイン

これらの改修を行うことで、Google
AdSenseの審査基準を満たすだけでな
く、ユーザーにとっても信頼性の高い
サイトを構築することができます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

この記事が、Next.jsサイトのAdSense
審査対策の参考になれば幸いです。質
問やフィードバックがあれば、コメン
ト欄でお待ちしています！

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?