SEO, AdSense, Analytics 종합 개선

madplay · madplay · commit b0fc960b52cd · 2026-03-24T00:04:38.000+09:00
- og:image, twitter:image 메타 태그 추가 (SNS 공유 이미지)
- favicon, apple-touch-icon, theme-color 태그 추가
- RSS discovery 링크 태그 추가
- JSON-LD: image, dateModified, BreadcrumbList, author url/sameAs 추가
- 페이지네이션 /page2+ noindex 처리
- AdSense 스크립트 전체 페이지 확대 (홈/카테고리 수익화)
- 광고 CLS 개선 (min-height 250px) + 빈 광고 8초 후 collapse
- 하단 광고 lazy loading (IntersectionObserver)
- 관련 포스트 섹션 추가 (동일 카테고리 5개)
- Mermaid.js 조건부 로딩 (DOM 감지)
- GA4 스크롤 깊이 + 외부 링크 클릭 추적
- sitemap 이미지 확장, feed.xml description 개선
- preconnect 보강, CSS preload 추가
- 레거시 UA ID 제거
diff --git a/_config.yml b/_config.yml
@@ -3,7 +3,6 @@ title: MadPlay🚀
 description: "Curiosity and Experience never get old."
 url: "https://madplay.github.io"
 baseurl: ""
-g-analytics: "UA-111002457-1"
 ga4_measurement_id: "G-YH3W70BTL1"
 
 # Language Settings
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -9,8 +9,15 @@
 
     <meta name="description"
           content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+    {% if paginator and paginator.page > 1 %}
+    <meta name="robots" content="noindex, follow">
+    {% endif %}
     <meta name="author" content="{{ site.title }}">
     <meta name="naver-site-verification" content="20a36484bff01ff10cf2e8ba576bd3a6724dabd6" />
+    <link rel="icon" type="image/x-icon" href="{{ site.baseurl }}/favicon.ico">
+    <link rel="apple-touch-icon" href="{{ site.baseurl }}/img/common/og_image.png">
+    <meta name="theme-color" content="#09090b">
+    <link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ site.url }}{{ site.baseurl }}/feed.xml">
 
     {% assign current_lang = page.lang | default: site.default_lang %}
     {% if page.url %}
@@ -38,11 +45,14 @@
         {% if page.author %}
         "author": {
         "@type": "Person",
-        "name": {{page.author | jsonify}}
+        "name": {{page.author | jsonify}},
+        "url": "{{ site.url }}{{ site.baseurl }}/about",
+        "sameAs": ["https://github.com/{{ page.author }}"]
         },
         {% endif %}
+        "image": "{{ site.url }}{{ site.baseurl }}{% if page.image %}{{ page.image }}{% else %}/img/common/og_image.png{% endif %}",
         "datePublished": "{{ page.date | date_to_xmlschema }}",
-        "dateModified": "{{ page.date | date_to_xmlschema }}",
+        "dateModified": "{{ page.last_modified_at | default: page.date | date_to_xmlschema }}",
         "mainEntityOfPage": {
         "@type": "WebPage",
         "@id": "{{ site.url }}{{ site.baseurl }}{{ page.url | replace:'index.html','' }}"
@@ -65,6 +75,36 @@
         "url": "{{ site.url }}{{ site.baseurl }}{{ page.url | replace:'index.html','' }}"
         }
     </script>
+    <script type="application/ld+json">
+        {
+            "@context": "https://schema.org",
+            "@type": "BreadcrumbList",
+            "itemListElement": [
+                {
+                    "@type": "ListItem",
+                    "position": 1,
+                    "name": "MadPlay",
+                    "item": "{{ site.url }}{{ site.baseurl }}/"
+                }{% if page.category %},
+                {
+                    "@type": "ListItem",
+                    "position": 2,
+                    "name": {{ page.category | jsonify }},
+                    "item": "{{ site.url }}{{ site.baseurl }}/category"
+                },
+                {
+                    "@type": "ListItem",
+                    "position": 3,
+                    "name": {{ page.title | jsonify }}
+                }{% else %},
+                {
+                    "@type": "ListItem",
+                    "position": 2,
+                    "name": {{ page.title | jsonify }}
+                }{% endif %}
+            ]
+        }
+    </script>
     {% endif %}
     {% endif %}
 
@@ -75,11 +115,21 @@
     {% if page.url %}
     <meta property="og:url" content="{{ site.url }}{{ site.baseurl }}{{ page.url | replace:'index.html','' }}">
     {% endif %}
+    {% if page.image %}
+    <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+    {% else %}
+    <meta property="og:image" content="{{ site.url }}{{ site.baseurl }}/img/common/og_image.png">
+    {% endif %}
 
     <meta name="twitter:card" content="summary">
     <meta name="twitter:title" content="{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}">
     <meta name="twitter:description"
           content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}">
+    {% if page.image %}
+    <meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}{{ page.image }}">
+    {% else %}
+    <meta name="twitter:image" content="{{ site.url }}{{ site.baseurl }}/img/common/og_image.png">
+    {% endif %}
     <style>
         html {
             background-color: rgb(9 9 11);
@@ -99,8 +149,8 @@
     <link rel="preconnect" href="https://www.googletagmanager.com">
     {% endif %}
 
+    <link rel="preconnect" href="https://pagead2.googlesyndication.com" crossorigin>
     {% if page.layout == 'post' %}
-    <link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
     <link rel="dns-prefetch" href="//utteranc.es">
     {% endif %}
 
@@ -114,12 +164,12 @@
     </script>
     {% endif %}
 
-    {% if page.layout == 'post' %}
     <script async
             src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-8036596086585080"
             crossorigin="anonymous"></script>
-    {% endif %}
 
+    <link rel="preload" href="{{ site.baseurl }}/css/custom/utilities.css" as="style">
+    <link rel="preload" href="{{ site.baseurl }}/css/custom/default.css" as="style">
     <link rel="stylesheet" href="{{ site.baseurl }}/css/custom/utilities.css">
     <link rel="stylesheet" href="{{ site.baseurl }}/css/custom/default.css">
     {% if page.layout == 'post' %}
diff --git a/_layouts/post.html b/_layouts/post.html
@@ -87,7 +87,6 @@ <h1 class="text-3xl md:text-5xl font-medium text-zinc-100 leading-tight mb-6 md:
                      data-ad-format="fluid"
                      data-ad-client="ca-pub-8036596086585080"
                      data-ad-slot="7241821159"></ins>
-                <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
             </div>
 
             {% assign current_lang = page.lang | default: site.default_lang %}
@@ -173,6 +172,32 @@ <h1 class="text-3xl md:text-5xl font-medium text-zinc-100 leading-tight mb-6 md:
                      data-label="comment"
                      data-theme="github-dark"></div>
             </div>
+
+            {% assign current_lang = page.lang | default: site.default_lang %}
+            {% assign related_posts = "" | split: "" %}
+            {% assign related_count = 0 %}
+            {% for p in site.posts %}
+            {% if related_count >= 5 %}{% break %}{% endif %}
+            {% if p.category == page.category and p.url != page.url %}
+            {% assign p_lang = p.lang | default: site.default_lang %}
+            {% if p_lang == current_lang %}
+            {% assign related_posts = related_posts | push: p %}
+            {% assign related_count = related_count | plus: 1 %}
+            {% endif %}
+            {% endif %}
+            {% endfor %}
+            {% if related_posts.size > 0 %}
+            <section class="related-posts mt-16 pt-8 border-t border-zinc-900">
+                <h3 class="text-lg font-medium text-zinc-300 mb-6">{% if current_lang == 'en' %}Related Posts{% else %}관련 포스트{% endif %}</h3>
+                <div class="space-y-3">
+                    {% for rpost in related_posts %}
+                    <a href="{{ site.baseurl }}{{ rpost.url }}" class="block py-3 px-4 bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 hover:border-zinc-700 rounded-lg text-zinc-300 hover:text-zinc-100 transition-all duration-200 text-sm">
+                        {{ rpost.title }}
+                    </a>
+                    {% endfor %}
+                </div>
+            </section>
+            {% endif %}
         </div>
 
         <aside class="post-toc" aria-label="{% if current_lang == 'en' %}Table of contents{% else %}목차{% endif %}">
@@ -184,5 +209,12 @@ <h1 class="text-3xl md:text-5xl font-medium text-zinc-100 leading-tight mb-6 md:
     </div>
 </article>
 
-<script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
-<script>mermaid.initialize({theme: 'dark', flowchart: {rankSpacing: 30}});</script>
+<script>
+(function() {
+    if (!document.querySelector('.language-mermaid, .mermaid, pre.mermaid')) return;
+    var s = document.createElement('script');
+    s.src = 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js';
+    s.onload = function() { mermaid.initialize({theme: 'dark', flowchart: {rankSpacing: 30}}); };
+    document.body.appendChild(s);
+})();
+</script>
diff --git a/category.html b/category.html
@@ -75,34 +75,6 @@ <h2 class="category-section-title">
 </div>
 
 <script>
-    function shuffleCategoryGroups() {
-        const tagsContainer = document.querySelector('.category-tags');
-        const sectionsContainer = document.querySelector('.category-sections');
-        if (!tagsContainer || !sectionsContainer) return;
-
-        const tags = Array.from(tagsContainer.querySelectorAll('.category-tag[href^="#"]'));
-        const sections = Array.from(sectionsContainer.querySelectorAll('.category-section[id]'));
-        if (tags.length === 0 || sections.length === 0) return;
-
-        const groups = tags.map(tag => {
-            const href = tag.getAttribute('href');
-            const section = href ? sectionsContainer.querySelector(href) : null;
-            return section ? { tag, section } : null;
-        }).filter(Boolean);
-
-        for (let i = groups.length - 1; i > 0; i--) {
-            const j = Math.floor(Math.random() * (i + 1));
-            [groups[i], groups[j]] = [groups[j], groups[i]];
-        }
-
-        groups.forEach(group => {
-            tagsContainer.appendChild(group.tag);
-            sectionsContainer.appendChild(group.section);
-        });
-    }
-
-    shuffleCategoryGroups();
-
     document.querySelectorAll('.category-tag[href^="#"]').forEach(anchor => {
         anchor.addEventListener('click', function (e) {
             e.preventDefault();
@@ -164,4 +136,31 @@ <h2 class="category-section-title">
     });
     
     updateActiveTag();
+
+    function shuffleCategoryGroups() {
+        var container = document.querySelector('.category-sections');
+        var tagContainer = document.querySelector('.category-tags');
+        if (!container || !tagContainer) return;
+
+        var sections = Array.from(container.querySelectorAll('.category-section'));
+        var tags = Array.from(tagContainer.querySelectorAll('.category-tag'));
+
+        var pairs = sections.map(function(section, i) {
+            return { section: section, tag: tags[i] };
+        });
+
+        for (var i = pairs.length - 1; i > 0; i--) {
+            var j = Math.floor(Math.random() * (i + 1));
+            var temp = pairs[i];
+            pairs[i] = pairs[j];
+            pairs[j] = temp;
+        }
+
+        pairs.forEach(function(pair) {
+            container.appendChild(pair.section);
+            tagContainer.appendChild(pair.tag);
+        });
+    }
+
+    shuffleCategoryGroups();
 </script>
diff --git a/css/custom/post.css b/css/custom/post.css
@@ -742,7 +742,7 @@
     max-width: 50rem;
     text-align: center;
     padding: 0.5rem 0;
-    min-height: 100px;
+    min-height: 250px;
 }
 
 .ad-container-top {
@@ -759,7 +759,7 @@
 
 @media (max-width: 768px) {
     .ad-container {
-        min-height: 80px;
+        min-height: 200px;
         margin: 1.5rem auto;
     }
 
diff --git a/feed.xml b/feed.xml
@@ -14,7 +14,7 @@ layout: null
     {% for post in site.posts limit:30 %}
       <item>
         <title>{{ post.title | xml_escape }}</title>
-        <description>{{ post.content | strip_html | xml_escape }}</description>
+        <description>{{ post.description | default: post.excerpt | strip_html | truncate: 300 | xml_escape }}</description>
         <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
         <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
         <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
diff --git a/js/post-performance.js b/js/post-performance.js
@@ -152,10 +152,73 @@
         runWhenIdle(loadCopyScript, 2600);
     }
 
+    function collapseEmptyAds() {
+        setTimeout(function() {
+            document.querySelectorAll('.ad-container').forEach(function(el) {
+                if (!el.querySelector('iframe')) el.style.minHeight = '0';
+            });
+        }, 8000);
+    }
+
+    function initLazyBottomAd() {
+        var bottomAd = document.querySelector('.ad-container-bottom ins.adsbygoogle');
+        if (!bottomAd || bottomAd.dataset.adsbygoogleStatus) return;
+
+        if (!('IntersectionObserver' in window)) {
+            (adsbygoogle = window.adsbygoogle || []).push({});
+            return;
+        }
+
+        var observer = new IntersectionObserver(function(entries) {
+            if (entries[0].isIntersecting) {
+                observer.disconnect();
+                (adsbygoogle = window.adsbygoogle || []).push({});
+            }
+        }, { rootMargin: '600px 0px' });
+        observer.observe(bottomAd);
+    }
+
+    function initScrollTracking() {
+        if (typeof gtag !== 'function') return;
+        var thresholds = [25, 50, 75, 100];
+        var fired = {};
+        window.addEventListener('scroll', function() {
+            var scrollPct = Math.round(
+                (window.scrollY + window.innerHeight) / document.body.scrollHeight * 100
+            );
+            thresholds.forEach(function(t) {
+                if (scrollPct >= t && !fired[t]) {
+                    fired[t] = true;
+                    gtag('event', 'scroll_depth', { percent: t });
+                }
+            });
+        }, { passive: true });
+    }
+
+    function initOutboundTracking() {
+        if (typeof gtag !== 'function') return;
+        document.addEventListener('click', function(e) {
+            var link = e.target.closest('a[href]');
+            if (!link) return;
+            var href = link.getAttribute('href');
+            if (href && href.startsWith('http') && href.indexOf('madplay.github.io') === -1) {
+                if (navigator.sendBeacon) {
+                    gtag('event', 'outbound_click', { url: href, transport_type: 'beacon' });
+                } else {
+                    gtag('event', 'outbound_click', { url: href });
+                }
+            }
+        });
+    }
+
     whenReady(function () {
         optimizePostImages();
         initLazyComments();
         initLazyToc();
         initLazyCopyButtons();
+        collapseEmptyAds();
+        initLazyBottomAd();
+        initScrollTracking();
+        initOutboundTracking();
     });
 })();
diff --git a/sitemap.xml b/sitemap.xml
@@ -2,7 +2,7 @@
 layout: null
 ---
 <?xml version="1.0" encoding="UTF-8"?>
-<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
+<urlset xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.sitemaps.org/schemas/sitemap/0.9 http://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd" xmlns="http://www.sitemaps.org/schemas/sitemap/0.9" xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
   {% assign latest_post = site.posts | first %}
   {% assign collections = site.collections | where_exp:'collection','collection.output != false' | sort: 'label' %}
   {% for collection in collections %}
@@ -13,6 +13,11 @@ layout: null
         {% if doc.last_modified_at or doc.date %}
           <lastmod>{{ doc.last_modified_at | default: doc.date | date_to_xmlschema }}</lastmod>
         {% endif %}
+        {% if doc.image %}
+        <image:image>
+          <image:loc>{{ doc.image | prepend: site.baseurl | prepend: site.url }}</image:loc>
+        </image:image>
+        {% endif %}
       </url>
     {% endfor %}
   {% endfor %}

Original file line number	Diff line number	Diff line change
`@@ -742,7 +742,7 @@`
`742`	`742`	`max-width: 50rem;`
`743`	`743`	`text-align: center;`
`744`	`744`	`padding: 0.5rem 0;`
`745`		`- min-height: 100px;`
	`745`	`+ min-height: 250px;`
`746`	`746`	`}`
`747`	`747`
`748`	`748`	`.ad-container-top {`
`@@ -759,7 +759,7 @@`
`759`	`759`
`760`	`760`	`@media (max-width: 768px) {`
`761`	`761`	`.ad-container {`
`762`		`- min-height: 80px;`
	`762`	`+ min-height: 200px;`
`763`	`763`	`margin: 1.5rem auto;`
`764`	`764`	`}`
`765`	`765`