Desain SEO untuk NOUI

Reza Noprial Lubis

Desember 27, 2025

Responsive Header Logo (Pagespeed Issue)

Temukan sumber kode, dengan mencari ini: notranslate inline-flex flex-row items-center justify-center, lalu tempel kode ini:

<a class='notranslate inline-flex flex-row items-center justify-center text-colorHeaderText dark:text-colorDarkText' expr:href='data:blog.homepageUrl' expr:title='data:blog.title'>
  <b:if cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"}'>
    <img class='max-h-9 w-auto shrink-0 grow-0 overflow-hidden -indent-96 text-transparent dark:text-transparent ltr:mr-2 rtl:ml-2'
         expr:alt='data:title'
         expr:src='resizeImage(data:image, 36, "1:1")'
         width='36'
         height='36'
         loading='eager'
         decoding='async'>
      <!-- Srcset untuk responsive: mobile 63w, desktop 36w -->
      <b:attr name='srcset' expr:value='resizeImage(data:image, 63, "1:1") + " 63w, " + resizeImage(data:image, 36, "1:1") + " 36w"'/>
      <!-- Sizes: mobile ≤768px gunakan 63px, desktop gunakan 36px -->
      <b:attr name='sizes' value='(max-width: 768px) 63px, 36px'/>
      <b:class cond='data:imagePlacement in {"REPLACE", "BEFORE_DESCRIPTION"} and data:skin.vars.optionFeatureColorMode != "1px"' name='opacity-0 transition-opacity'/>
    </img>
  </b:if>
  <b:tag class='flex flex-col items-start justify-center leading-6' cond='data:this.description != "" and data:skin.vars.optionHeaderTagline == "2px"' name='div'>
    <b:tag expr:class='data:imagePlacement in {"REPLACE"} ? "sr-only" : data:imagePlacement in {"BEFORE_DESCRIPTION"} ? "relative line-clamp-1 text-ellipsis text-lg font-semibold" : "relative line-clamp-1 text-ellipsis text-lg font-semibold"' expr:name='data:view.isMultipleItems ? "h1" : "div"'>
      <b:class cond='data:this.description != ""' name='leading-6'/>
      <data:title/>
    </b:tag>
    <b:if cond='data:this.description != "" and data:skin.vars.optionHeaderTagline == "2px"'>
      <h2 class='relative line-clamp-1 text-ellipsis text-xs text-colorHeaderMeta dark:text-colorDarkMeta'>
        <b:class cond='data:imagePlacement in {"REPLACE"}' name='sr-only'/>
        <b:eval expr='data:this.description snippet {length: 80}'/>
      </h2>
    </b:if>
  </b:tag>
</a>

Temukan baris kode ini:


<b:if cond='!data:view.isPage'>&lt;textarea id=&quot;temp_js&quot; class=&quot;hidden&quot; disabled readonly hidden&gt;</b:if>

Lalu tempel di atasnya:

<b:comment>Custom Script</b:comment>
<b:if cond='data:view.isPost or data:view.isPage'>
  <script type='text/javascript'>
    //<![CDATA[
    (function(){'use strict';function init(){var n=document.querySelector('[data-breadcrumb]'),c=document.querySelector('.breadcrumb-container')||document.querySelector('nav[class*="mb-4"]');if(!c)return;var items=[],schema=[],base=location.origin,url=location.href,title=document.title.split(' - ')[0].trim(),sep='<span class="mx-2 shrink-0 grow-0 text-colorItemMeta dark:text-colorDarkMeta"> / </span>',linkClass='line-clamp-1 select-none font-medium text-colorItemMeta hover:text-colorItemLinkHover dark:text-colorDarkMeta dark:hover:text-colorDarkKey';if(n){var l=n.querySelectorAll('a');if(l.length>0){l.forEach(function(el,i){if(i>0)items.push(sep);items.push('<a href="'+el.href+'" class="'+linkClass+'">'+el.textContent+'</a>');schema.push({'@type':'ListItem',position:i+1,name:el.textContent,item:el.href})});schema.push({'@type':'ListItem',position:l.length+1,name:title,item:url});c.innerHTML='<nav class="mb-4 flex flex-row items-center justify-start last:mb-0">'+items.join('')+'</nav>';n.remove()}}else{var nav=c.querySelector('nav');if(nav){var links=nav.querySelectorAll('a');links.forEach(function(el,i){schema.push({'@type':'ListItem',position:i+1,name:el.textContent.trim(),item:el.href})});schema.push({'@type':'ListItem',position:links.length+1,name:title,item:url})}}if(schema.length>0){var s=document.createElement('script');s.type='application/ld+json';s.textContent=JSON.stringify({'@context':'https://schema.org','@type':'BreadcrumbList',itemListElement:schema});document.head.appendChild(s)}}if(document.readyState==='loading'){document.addEventListener('DOMContentLoaded',init)}else{init()}})();
    //]]>
  </script>
</b:if>
<b:tag name='script' type='application/ld+json'>{&quot;@context&quot;:&quot;https://schema.org&quot;,&quot;@type&quot;:&quot;Person&quot;,&quot;name&quot;:&quot;<data:blog.title.jsonEscaped/>&quot;,&quot;url&quot;:&quot;<data:blog.homepageUrl.jsonEscaped/>&quot;,&quot;image&quot;:&quot;https://yourblog.com/author-photo.jpg&quot;,&quot;sameAs&quot;:[&quot;https://twitter.com/yourhandle&quot;,&quot;https://www.instagram.com/yourhandle&quot;,&quot;https://www.facebook.com/yourprofile&quot;]}</b:tag>
<!-- Google Analytics Preconnect -->
<b:if cond='data:skin.vars.optionGAPreconnect == &quot;2px&quot; and data:skin.vars.optionGAStatus == &quot;2px&quot;'>
  <link href='https://www.googletagmanager.com' rel='preconnect'/>
  <link href='https://www.googletagmanager.com' rel='dns-prefetch'/>
  <link href='https://www.google-analytics.com' rel='preconnect'/>
  <link href='https://www.google-analytics.com' rel='dns-prefetch'/>
</b:if>
<!-- Google Analytics -->
<b:with value='{   status: (data:skin.vars.optionGAStatus == &quot;2px&quot;),   trackingId: (data:skin.vars.analytics_accountNumber ? data:skin.vars.analytics_accountNumber : data:blog.analyticsAccountNumber),   loadType: (data:skin.vars.optionGALoadType == &quot;1px&quot;),   loadStrategy: data:skin.vars.optionGALoadStrategy }' var='analytics'>
  <b:if cond='!data:view.isPreview and !data:view.isError and data:analytics.status and data:analytics.trackingId'>

    <!-- Immediate Load -->
    <b:if cond='data:analytics.loadStrategy == &quot;1px&quot;'>
      <b:if cond='data:analytics.loadType'>
        <script async='async' crossorigin='anonymous' expr:src='&quot;https://www.googletagmanager.com/gtag/js?id=&quot; + data:analytics.trackingId'/>
            <script>
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag(&#39;js&#39;, new Date());
              gtag(&#39;config&#39;, &#39;<data:analytics.trackingId/>&#39;);
        </script>
      <b:else/>
      <script>
        (function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){
          (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
          m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                                })(window,document,&#39;script&#39;,&#39;https://www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);
                                   ga(&#39;create&#39;, &#39;<data:analytics.trackingId/>&#39;, &#39;auto&#39;);
        ga(&#39;send&#39;, &#39;pageview&#39;);
      </script>
    </b:if>
  </b:if>

  <!-- Lazy Load -->
  <b:if cond='data:analytics.loadStrategy == &quot;2px&quot;'>
    <b:if cond='data:analytics.loadType'>
      <!-- Lazy Load - gtag.js -->
      <script>
        (function() {
          var gaLoaded = false;
          var trackingId = &#39;<data:analytics.trackingId/>&#39;;

          function loadGA() {
            if (gaLoaded) return;
            gaLoaded = true;

            var script = document.createElement(&#39;script&#39;);
            script.async = true;
            script.src = &#39;https://www.googletagmanager.com/gtag/js?id=&#39; + trackingId;
            document.head.appendChild(script);

            script.onload = function() {
              window.dataLayer = window.dataLayer || [];
              function gtag(){dataLayer.push(arguments);}
              gtag(&#39;js&#39;, new Date());
              gtag(&#39;config&#39;, trackingId);
            };
          }

          var events = [&#39;mousedown&#39;, &#39;touchstart&#39;, &#39;keydown&#39;, &#39;scroll&#39;, &#39;mousemove&#39;];
          var loaded = false;

          function triggerLoad() {
            if (!loaded) {
              loaded = true;
              loadGA();
              events.forEach(function(event) {
                window.removeEventListener(event, triggerLoad);
              });
            }
          }

          events.forEach(function(event) {
            window.addEventListener(event, triggerLoad, { passive: true, once: true });
          });

          setTimeout(loadGA, 5000);
        })();
      </script>
      <b:else/>
      <!-- Lazy Load - analytics.js -->
      <script>
        (function() {
          var gaLoaded = false;
          var trackingId = &#39;<data:analytics.trackingId/>&#39;;

          function loadGA() {
            if (gaLoaded) return;
            gaLoaded = true;

            (function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){
              (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
              m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                                    })(window,document,&#39;script&#39;,&#39;https://www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);
                                       ga(&#39;create&#39;, trackingId, &#39;auto&#39;);
            ga(&#39;send&#39;, &#39;pageview&#39;);
          }

          var events = [&#39;mousedown&#39;, &#39;touchstart&#39;, &#39;keydown&#39;, &#39;scroll&#39;, &#39;mousemove&#39;];
          var loaded = false;

          function triggerLoad() {
            if (!loaded) {
              loaded = true;
              loadGA();
              events.forEach(function(event) {
                window.removeEventListener(event, triggerLoad);
              });
            }
          }

          events.forEach(function(event) {
            window.addEventListener(event, triggerLoad, { passive: true, once: true });
          });

          setTimeout(loadGA, 5000);
        })();
      </script>
    </b:if>
  </b:if>

  <!-- Delayed Load -->
  <b:if cond='data:analytics.loadStrategy == &quot;3px&quot;'>
    <b:if cond='data:analytics.loadType'>
      <!-- Delayed Load - gtag.js -->
      <script>
        setTimeout(function() {
          var trackingId = &#39;<data:analytics.trackingId/>&#39;;
          var script = document.createElement(&#39;script&#39;);
          script.async = true;
          script.src = &#39;https://www.googletagmanager.com/gtag/js?id=&#39; + trackingId;
          document.head.appendChild(script);

          script.onload = function() {
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag(&#39;js&#39;, new Date());
            gtag(&#39;config&#39;, trackingId);
          };
        }, 3000);
      </script>
      <b:else/>
      <!-- Delayed Load - analytics.js -->
      <script>
        setTimeout(function() {
          var trackingId = &#39;<data:analytics.trackingId/>&#39;;
          (function(i,s,o,g,r,a,m){i[&#39;GoogleAnalyticsObject&#39;]=r;i[r]=i[r]||function(){
            (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
                                  })(window,document,&#39;script&#39;,&#39;https://www.google-analytics.com/analytics.js&#39;,&#39;ga&#39;);
                                     ga(&#39;create&#39;, trackingId, &#39;auto&#39;);
          ga(&#39;send&#39;, &#39;pageview&#39;);
        }, 3000);
      </script>
    </b:if>
  </b:if>

  </b:if>
</b:with>