Optimasi Meta Tag untuk SEO Dasar: Panduan Lengkap Agar Website Cepat Terindeks dan Naik Peringkat

<b:with value='{favicon: {case: 0, url: data:blog.blogspotFaviconUrl, alt: "https://resources.blogblog.com/img/blank.gif"}, defaultImage: "https://resources.blogblog.com/img/blank.gif"}' var='additional'>

  <!-- title -->
  <b:switch var='data:view.type'>
    <b:case value='item'/>
    <b:comment>case for posts/static pages.</b:comment>
    <b:if cond='data:view.isPost'>
      <b:comment>Display blog name if post title length is less than 57.</b:comment>
      <b:with value='data:view.isPost and ((data:blog.pageName.length + data:blog.title.length) lt 57)' var='dash'>
        <title><b:eval expr='data:blog.pageName'/><b:if cond='data:dash'> | <b:eval expr='data:blog.title'/></b:if></title>
      </b:with>
      <b:else/>
      <title><b:eval expr='data:blog.pageName'/></title>
    </b:if>
    <b:case value='feed'/>
    <b:comment>case for index/search pages.</b:comment>
    <b:if cond='data:view.isHomepage'>
      <b:comment>homepage</b:comment>
      <title><b:eval expr='data:blog.title'/></title>
      <b:elseif cond='data:view.search.label'/>
      <b:comment>labels</b:comment>
      <title><b:eval expr='data:blog.pageName'/> | <b:eval expr='data:blog.title'/></title>
      <b:elseif cond='data:view.search.query'/>
      <b:comment>search</b:comment>
      <title>Search results for: "<b:eval expr='data:view.search.query'/>"</title>
      <b:else/>
      <b:comment>blog (..com/search)</b:comment>
      <title>Discover | <b:eval expr='data:blog.title'/></title>
    </b:if>
    <b:case value='error'/>
    <b:comment>case for error page.</b:comment>
    <title>404 Not Found.</title>
  </b:switch>

  <!-- meta -->
  <meta charset='UTF-8'/>
  <meta content='width=device-width, initial-scale=1, user-scalable=1, minimum-scale=1, maximum-scale=5' name='viewport'/>

  <b:comment>
    default value for empty description>: {
        noDescription: the value used when no search description is specified.
        errorDescription: description for the 404 error page (optional).
    }
  </b:comment>
  <b:with value='{link: data:blog.url.canonical, description: data:blog.metaDescription.escaped, noDescription: "Undefined meta description.", errorDescription: "The page you requested is missing or unavailable.", img: resizeImage(data:blog.postImageUrl, 0)}' var='og'>

    <meta expr:content='data:blog.metaDescription ? data:og.description : (!data:view.isError ? data:og.noDescription : data:og.errorDescription)' name='description'/>
    <b:if cond='!data:view.isError'>
      <meta content='max-image-preview:large' name='robots'/>

      <b:comment>open-graph and twitter-card.</b:comment>
      <meta expr:content='data:view.isMultipleItems ? "website" : "article"' property='og:type'/>
      <meta expr:content='your_organization_or_blog_title' property='og:site_name'/>
      <b:with value='data:blog.pageName.escaped ? data:blog.pageName.escaped : data:blog.title.escaped' var='name'>
        <b:with value='data:blog.metaDescription ? data:og.description : data:og.noDescription' var='summary'>
          <b:comment>default/blank image for homePage.</b:comment>
          <b:with value='data:blog.postImageUrl ? data:og.img : data:additional.defaultImage' var='image'>
            <meta expr:content='data:name' property='og:title'/>
            <meta expr:content='data:summary' property='og:description'/>
            <meta expr:content='data:og.link' property='og:url'/>
            <meta expr:content='data:image' property='og:image'/>
            <meta expr:content='data:name' name='twitter:title'/>
            <meta expr:content='data:summary' name='twitter:description'/>
            <meta expr:content='data:og.link' name='twitter:url'/>
            <meta expr:content='data:image' name='twitter:image'/>
            <meta content='summary_large_image' name='twitter:card'/>
          </b:with>
        </b:with>
      </b:with>

      <b:comment>theme-color.</b:comment>
      <b:with value='{light: "#fffffe", dark: "#1e1e1e"}' var='color'>
        <meta expr:content='data:color.light' expr:data-content='data:color.dark' name='theme-color'/>
        <meta expr:content='data:color.light' expr:data-content='data:color.dark' name='msapplication-navbutton-color'/>
        <meta expr:content='data:color.light' expr:data-content='data:color.dark' name='apple-mobile-web-app-status-bar-style'/>
        <meta expr:content='true' name='apple-mobile-web-app-capable'/>
      </b:with>
    </b:if>
  </b:with>

  <!-- link -->
  <link expr:href='data:blog.url.canonical' rel='canonical'/>
  <link expr:href='data:blog.url.canonical' hreflang='x-default' rel='alternate'/>
  <b:comment>Marker to tell robots that ?m=1 is an alternative link for mobile.</b:comment>
  <link expr:href='data:blog.url.canonical params {m: "1"}' media='only screen and (max-width:640px)' rel='alternate'/>
  <b:if cond='!data:view.isError'>
    <b:with value='{link: path(data:blog.homepageUrl, "feeds/posts/default")}' var='atom'>
      <b:tag expr:href='data:atom.link' name='link' rel='alternate' type='application/atom+xml'/>
      <b:tag expr:href='data:atom.link + "?alt=rss"' name='link' rel='alternate' type='application/rss+xml'/>
      <b:tag cond='data:view.isPost' expr:href='data:blog.postImageUrl ? resizeImage(data:blog.postImageUrl, 0) : data:additional.defaultImage' name='link' rel='image_src'/>
    </b:with>
  </b:if>

  <b:comment>Reduced first render delay when loading external assets (font, image, dll.).</b:comment>
  <b:with value='["https://fonts.gstatic.com", "https://blogger.googleusercontent.com"]' var='preconnect'>
    <b:loop values='data:preconnect' var='url'>
      <b:tag expr:href='data:url' name='link' rel='preconnect'>
        <b:attr cond='data:url contains "gstatic"' name='crossorigin' value='crossorigin'/>
        <b:attr name='b:whitespace' value='remove'/>
      </b:tag>
    </b:loop>
  </b:with>

  <!--[ favicon ]-->
  <link expr:href='data:additional.favicon.use eq 0 ? data:additional.favicon.url : data:additional.favicon.alt' expr:type='"image/" + (data:additional.favicon.use eq 0 ? "x-icon" : "png")' rel='apple-touch-icon'/>
  <link expr:href='data:additional.favicon.use eq 0 ? data:additional.favicon.url : data:additional.favicon.alt' expr:type='"image/" + (data:additional.favicon.use eq 0 ? "x-icon" : "png")' rel='icon'/>
</b:with>

<!-- site-verification --> //optional
<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>

<b:with value='{favicon: {case: 0, url: data:blog.blogspotFaviconUrl, alt: "https://resources.blogblog.com/img/blank.gif"}, defaultImage: "https://resources.blogblog.com/img/blank.gif"}' var='additional'>

<b:with value='{link: data:blog.url.canonical, description: data:blog.metaDescription.escaped, noDescription: "Undefined meta description.", errorDescription: "The page you requested is missing or unavailable.", img: resizeImage(data:blog.postImageUrl, 0)}' var='og'>

<meta expr:content='your_organization_or_blog_title' property='og:site_name'/>

<b:with value='{light: "#fffffe", dark: "#1e1e1e"}' var='color'>

<meta content='xxxxxxxxxxxxxxxxx_g' name='google-site-verification'/>
<meta content='xxxxxxxxxxxxxxxxx' name='msvalidate.01'/>
<meta content='xxxxxxxxxxxxxxxxx' name='p:domain_verify'/>
<meta content='xxxx_xxxxx-xxxxxxx' name='majestic-site-verification'/>