آموزش لینک در گوگل AMP

4 سال پیش

امتیاز دهید post

آموزش لینک در گوگل AMP

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش لینک در گوگل AMP خواهیم پرداخت.

از تگ Link در amp استفاده می شود تا به موتور جستجوی گوگل در مورد صفحه های آمپر و غیر آمپر موجود اشاره کند. در این درس، اجازه دهید جزئیات جنبه های مرتبط با تگ Link و نحوه تصمیم گیری گوگل در مورد صفحه amp و غیر amp را به تفصیل بحث کنیم.

کشف صفحه AMP

در نظر بگیرید سایتی به نام www.mypage.com دارید. مقاله به صفحه لینک دارد – www.mypage.com/news/myfirstnews.html.

هنگامی که یک کاربر در موتور جستجوی گوگل جستجو می کند و اتفاقاً صفحه غیر amp را دریافت می کند ، برای اینکه بتوانیم به صفحه آمپر نیز مراجعه کنیم ، باید url amp را با استفاده از تگ Link مشخص کنیم همانطور که در زیر نشان داده شده است –

Page-url برای Non amp-page

&lt;link rel = "amphtml" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html"&gt;

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

در اینجا rel = “amphtml” برای صفحه غیر amp مشخص شده است تا به نسخه amp اشاره کند ، بنابراین Google بر اساس پلتفرم صفحه مناسب را نشان می دهد

Page-url برای amp-page

&lt;link rel = "canonical" href = "https://www.mypage.com/news/myfirstnews.html"&gt;

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

در اینجا rel = ”canonical” در صفحه amp برای اشاره به نسخه استاندارد html مشخص شده است ، به طوری که Google نسخه مناسب را بر اساس پلتفرم نشان می دهد.

در صورتی که سایت شما فقط یک صفحه دارد، که یک صفحه amp است، شما هنوز نباید فراموش کنید که rel = “canonical” را که به خود نشان می دهد اضافه کنید –

&lt;link rel = "canonical" href = "https://www.mypage.com/news/amp/myfirstnews_amp.html"&gt;

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

نمودار زیر اشاره به rel = “amphtml” با اشاره به صفحه amp و rel = “canonical” با اشاره به صفحه html استاندارد را نشان می دهد.

فونت ها با استفاده از لینک

همانطور که در زیر نشان داده شده است ، می توان قلم ها را با استفاده از لینک بارگیری کرد –

&lt;link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto"&gt;

1	<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 (replace kitId accordingly)

یک مثال عملی با استفاده از rel = “canonical” و rel = “sheetheet” در زیر نشان داده شده است –

مثال

&lt;!doctype html&gt;
&lt;html amp&gt;
   &lt;head&gt;
      &lt;meta charset ="utf-8"&gt;
      &lt;title&gt;Amp Sample Page&lt;/title&gt;
      &lt;link rel = "canonical" href = "amppage.html"&gt;
      &lt;meta name = "viewport" content = "width = device-width,minimum-scale=1,initial-scale = 1"&gt;
      &lt;style amp-custom&gt;
         h1 {color: red}
      &lt;/style&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;link rel = "stylesheet" href = "https://fonts.googleapis.com/css?family=Roboto"&gt;
   &lt;/head&gt;
   &lt;body&gt;
      &lt;h1&gt;Amp Sample Page&lt;/h1&gt;
      &lt;p&gt;
         &lt;amp-img src = "images/christmas1.jpg" 
            width = "300" height = "250" 
            layout = "responsive"&gt;
         &lt;/amp-img&gt;
      &lt;/p&gt;

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

<!doctype html>

<head>

<title>Amp Sample Page</title>

h1 {color: red}

</style>

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>

body{

-webkit-animation:none;

-moz-animation:none;

-ms-animation:none;

animation:none

}

</style>

</noscript>

</head>

<body>

<h1>Amp Sample Page</h1>

<p>

<amp-img src = "images/christmas1.jpg"

width = "300" height = "250"

layout = "responsive">

</amp-img>

</p>

Welcome to Amp Page

</p>

</body>

</html>

خروجی

خروجی کد نشان داده شده در بالا به شرح زیر است –

منبع.

لیست جلسات قبل آموزش گوگل AMP

امتیاز دهید post

برچسب ها : آموزش برنامه نویسی موبایل آموزش گوگل AMP

نویسنده مطلب saber

آموزش لینک در گوگل AMP

آموزش لینک در گوگل AMP

کشف صفحه AMP

فونت ها با استفاده از لینک

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

بدون دیدگاه

آموزش لینک در گوگل AMP

کشف صفحه AMP

فونت ها با استفاده از لینک

مثال

خروجی

لیست جلسات قبل آموزش گوگل AMP

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه