title: How to handle IF statement in AMP and .NET
body: <pre class="lang-html prettyprint-override"><code>@using App
  @using Helpers
  @model App.Model.Cache
  @{
      ViewBag.Title = @Model.Title;
      Layout = null;
  }
  &lt;!doctype html&gt;
  &lt;html ⚡&gt;
    &lt;head&gt;
        &lt;meta charset="utf-8"&gt;
        &lt;meta name="viewport" content="width=device-width,minimum-scale=1"&gt;
        &lt;style amp-boilerplate&gt;body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}&lt;/style&gt;&lt;noscript&gt;&lt;style amp-boilerplate&gt;body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}&lt;/style&gt;&lt;/noscript&gt;
        &lt;script async src="https://cdn.ampproject.org/v0.js"&gt;&lt;/script&gt;
        &lt;script async custom-element="amp-social-share" src="https://cdn.ampproject.org/v0/amp-social-share-0.1.js"&gt;&lt;/script&gt;
        &lt;script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"&gt;&lt;/script&gt;
        &lt;script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.1.js"&gt;&lt;/script&gt;
        &lt;script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"&gt;&lt;/script&gt;
        &lt;script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"&gt;&lt;/script&gt;
        &lt;link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato"/&gt;
  
  
        @if (!Model.IsBookmark)
        {
            &lt;link rel="canonical" href="@(Model.CanonicalUrl())"/&gt;
        }
        else
        {
            &lt;link rel="canonical" href="@Model.BookmarkURL"/&gt;
        }
      &lt;style amp-custom&gt;
          body {font-family:Lato, Arial;}
          .related {
              background-color: #f5f5f5;
              display: block;
              clear: both;
              height: 64px;
              margin-bottom: 14px;
          }
  
              .related &gt; span {
                  font-size: 16px;
                  font-weight: 400;
                  vertical-align: middle;
                  margin: 8px;
                  line-height: 1.2em;
                  height: 64px;
              }
  
              .related:hover {
                  background-color: #ccc;
              }
  
          .related-recipes a {
              text-decoration: none;
              color: #444;
          }
  
          .related-image {
              width: 64px;
              height: 64px;
              float: left;
          }
  
          .related-text {
              display: inline;
              vertical-align: middle;
              color: #111;
              position: relative;
              top: 1.2em;
              left: .9em;
              text-overflow: clip;
              word-break: break-all;
              word-wrap: break-word;
          }
           amp-carousel amp-img &gt; img {
               object-fit: contain;
           }
  
          amp-carousel figcaption {
              position: absolute;
              bottom: 0;
              left: 0;
              right: 0;
              padding: 8px;
              background: rgba(0, 0, 0, 0.6); /* translucent black */
              color: #ddd;
              font-size: smaller;
              max-height: 30%;
          }
  
          amp-carousel .review {
              width: 25em;
              vertical-align: top;
              overflow: auto;
              margin: 0;
              padding: 16px;
              height: 80%; /* TODO easy way to ensure the bottom shadow is visible */
              white-space: normal; /* the enclosing div generated by amp-carousel sets it to nowrap */
          }
  
          amp-carousel .review:nth-child(even) {
              background: #FFFFFF
          }
  
          amp-carousel .review:nth-child(odd) {
              background: #94C2F9
          }
  
          amp-carousel .review h1 {
              font-size: larger;
              padding: 0;
          }
  
          amp-carousel .review p {
              padding: 0;
          }
  
          amp-carousel .review address:before {
              content: '-- ';
          }
  
          ul, ol {
              padding: 0 16px;
          }
  
          /* Unicode-based stars and half-star credit: amoniker, https://coderwall.com/p/iml9ka/star-ratings-in-css-utf8 */
          .star-icon {
              color: #ddd;
              font-size: 34px;
              position: relative;
          }
  
          .star-icon.full:before {
              color: #FDE16D;
              content: '\2605'; /* Full star in UTF8 */
              position: absolute;
              left: 0;
              text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
          }
  
          .star-icon.half:before {
              color: #FDE16D;
              content: '\2605'; /* Full star in UTF8 */
              position: absolute;
              left: 0;
              width: 50%;
              overflow: hidden;
              text-shadow: 0 0 2px rgba(0, 0, 0, 0.7);
          }
  
          .logo {
              background-position: left 16px center;
              background-repeat: no-repeat;
              background-image: url(https://www.bigoven.com/assets/images/icons/bigoven-recipes.png);
              background-color: #fefefe;
              height: 38px;
              text-align: left;
              padding: 16px;
              padding-left: 72px;
              box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);
          }
  
          .logo &gt; a {
              text-decoration: none;
          }
  
          .heading {
              text-align: center;
              padding-bottom: 8px;
          }
  
          .heading &gt; #summary {
              font-weight: 500;
          }
  
          .heading &gt; small {
              color: #656565;
          }
  
          .lower-wrapper {
              margin: 0em 1em 0em 1em;
          }
          .title-description {
              max-width: 310px;
              margin: 0 auto;
          }
      &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
        ...
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm having a problem with writing correct 'IF' statement in .NET and AMP. Statment look like this and it placed in a head section where suppose to be. AMP Validator throws me three errors: </p>
  
  <ol>
  <li>Tag outside the body section</li>
  <li>and two of 'link rel=cannonical' is 'body', but it can only be 'head'</li>
  </ol>
  
  <p>Here is a code snippet of my if statement from my cshtml template: </p>
  
  <pre><code>    @if (!Model.IsBookmark)
      {
          &lt;link rel="canonical" href="@(Model.CanonicalUrl())"/&gt;
      }
      else
      {
          &lt;link rel="canonical" href="@Model.BookmarkURL"/&gt;
  </code></pre>
  
  <p>What is the correct way to handle if statement in AMP?</p>