Google AMP - ลิงก์

แท็กลิงก์ใน amp ใช้เพื่อบอกเครื่องมือค้นหาของ Google เกี่ยวกับหน้าแอมป์และหน้าที่ไม่มีแอมป์ ในบทนี้ให้เราพูดคุยโดยละเอียดเกี่ยวกับประเด็นที่เกี่ยวข้องกับแท็กลิงก์และวิธีที่ Google ตัดสินใจเกี่ยวกับ amp-page และ non amp-page

การค้นพบหน้า AMP

พิจารณาว่าคุณมีไซต์ชื่อ www.mypage.com บทความข่าวเชื่อมโยงไปยังหน้า - www.mypage.com/news/myfirstnews.html

เมื่อผู้ใช้ค้นหาในเสิร์ชเอ็นจิ้นของ Google และได้รับหน้าแอมป์ที่ไม่ใช่เพื่อที่จะได้รับการอ้างอิงไปยังหน้าแอมป์ด้วยเราจำเป็นต้องระบุ url แอมป์โดยใช้แท็กลิงก์ดังที่แสดงด้านล่าง

ตัวอย่าง

Page-url for Non amp-page

<link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

ที่นี่rel =” amphtml”ระบุไว้สำหรับเพจที่ไม่ใช่แอมป์ให้ชี้ไปที่เวอร์ชันแอมป์เพื่อให้ Google แสดงเพจที่ถูกต้องตามแพลตฟอร์ม

Page-url for amp-page

<link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html">

ที่นี่rel =” canonical”ระบุไว้ใน amp page เพื่อชี้ไปที่เวอร์ชันมาตรฐานของ html เพื่อให้ Google แสดงเวอร์ชันที่ถูกต้องตามแพลตฟอร์ม

ในกรณีที่ไซต์ของคุณมีเพียงหน้าเดียวซึ่งเป็นหน้าแอมป์คุณไม่ควรลืมใส่ rel =” canonical” ซึ่งจะชี้ไปที่ตัวเอง -

<link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html">

แผนภาพต่อไปนี้แสดงการอ้างอิงถึง rel =” amphtml” ที่ชี้ไปที่หน้า amp และ rel =” canonical” ที่ชี้ไปที่หน้า html มาตรฐาน

แบบอักษรโดยใช้ลิงก์

สามารถโหลดแบบอักษรจากภายนอกได้โดยใช้ลิงค์ที่แสดงด้านล่าง -

<link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">

โปรดทราบว่าอนุญาตเฉพาะต้นทางที่อนุญาตเท่านั้น รายการต้นทางที่อนุญาตพิเศษซึ่งเราสามารถรับแบบอักษรได้ดังที่แสดงไว้ที่นี่ -

Fonts.com - https://fast.fonts.net
Google Fonts - https://fonts.googleapis.com
Font Awesome - https://maxcdn.bootstrapcdn.com
Typekit - https://use.typekit.net/kitId.css (แทนที่ kitId ตาม)

ตัวอย่างการทำงานโดยใช้rel =” canonical”และrel =” stylesheet”แสดงอยู่ด้านล่าง -

ตัวอย่าง

<!doctype html>
<html amp>
   <head>
      <meta charset ="utf-8">
      <title>Amp Sample Page</title>
      <link rel = "canonical" href = "amppage.html">
      <meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1">
      <style amp-custom>
         h1 {color: red}
      </style>

      <style amp-boilerplate>
         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}}
      </style>

      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none
            }
         </style>
      </noscript>
       
      <script async src = "https://cdn.ampproject.org/v0.js"></script>

      <link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto">
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>
         <amp-img src = "images/christmas1.jpg" 
            width = "300" height = "250" 
            layout = "responsive">
         </amp-img>
      </p>

      <p style = "font-family: 'Roboto'; font-size:25px;">
         Welcome to Amp Page
      </p>
   </body>
</html>

เอาต์พุต

ผลลัพธ์ของโค้ดที่แสดงด้านบนเป็นดังที่แสดงด้านล่าง -