এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

অ্যাক্সিলারেটেড মোবাইল পেজ ফাউন্ডেশন

১. সংক্ষিপ্ত বিবরণ

এই কোডল্যাবে, আপনি অ্যাক্সিলারেটেড মোবাইল পেজ (Accelerated Mobile Pages) বা সংক্ষেপে এএমপি (AMP) তৈরি করতে শিখবেন। এটি করার জন্য, আপনাকে একটি সাধারণ সংবাদ নিবন্ধের ওয়েব পেজ তৈরি করতে হবে যা এএমপি স্পেসিফিকেশন মেনে চলে এবং মোবাইল নিউজ সাইটগুলিতে সাধারণত ব্যবহৃত কয়েকটি সাধারণ ওয়েব ফিচারও অন্তর্ভুক্ত করে।

আপনি যা শিখবেন

কীভাবে AMP মোবাইল ওয়েবের ব্যবহারকারীর অভিজ্ঞতা উন্নত করে।
একটি এএমপি সাইটের ভিত্তি।
এএমপি-এর সীমাবদ্ধতাসমূহ।
এএমপি-এর ওয়েব কম্পোনেন্টগুলো কীভাবে নিউজ সাইটের সাধারণ সমস্যাগুলো সমাধান করে।
আপনার AMP কীভাবে যাচাই করবেন।
গুগল সার্চের জন্য আপনার AMP কীভাবে প্রস্তুত করবেন।

আপনার যা যা লাগবে

নমুনা কোড
পাইথন (বিশেষত ২.৭) অথবা ক্রোম ২০০ ওকে ওয়েব সার্ভার এক্সটেনশন
ক্রোম (অথবা এর সমতুল্য কোনো ব্রাউজার যা জাভাস্ক্রিপ্ট কনসোল পরীক্ষা করতে পারে)
কোড এডিটর (যেমন অ্যাটম, সাবলাইম, নোটপ্যাড++)

২. নমুনা কোডটি নিন।

আপনি আপনার কম্পিউটারে সমস্ত নমুনা কোড ডাউনলোড করতে পারেন:

...অথবা কমান্ড লাইন থেকে গিটহাব রিপোজিটরিটি ক্লোন করুন:

$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git

আপনি একটি ZIP ফাইল ডাউনলোড করবেন, যেটিতে কয়েকটি উদাহরণ রিসোর্স ফাইল এবং শুরুর article.html পৃষ্ঠাটি থাকবে।

ফোল্ডারটি আনজিপ করুন এবং আপনার কম্পিউটারের কমান্ড লাইনের মাধ্যমে ডিরেক্টরিটিতে যান।

৩. নমুনা পৃষ্ঠাটি চালান

আমাদের নমুনা পৃষ্ঠাটি পরীক্ষা করার জন্য একটি ওয়েব সার্ভার থেকে ফাইলগুলো অ্যাক্সেস করতে হবে। পরীক্ষার উদ্দেশ্যে একটি অস্থায়ী স্থানীয় ওয়েব সার্ভার তৈরি করার বেশ কয়েকটি উপায় রয়েছে। এই কোড ল্যাবের জন্য আমরা উপলব্ধ ৩টি বিকল্পের নির্দেশাবলী প্রদান করব:

গুগল ক্রোম অ্যাপ "ওয়েব সার্ভার ফর ক্রোম" - এটিই প্রস্তাবিত পদ্ধতি, কারণ এটি সবচেয়ে সহজ এবং সর্ব-প্ল্যাটফর্ম সমাধান। দ্রষ্টব্য: এই পদ্ধতির জন্য গুগল ক্রোম ইনস্টল করা থাকা আবশ্যক।
ফায়ারবেস হোস্টিং - এটি একটি বিকল্প ব্যবস্থা, যদি আপনি আমাদের নতুন স্ট্যাটিক অ্যাসেট হোস্টিং প্ল্যাটফর্ম 'ফায়ারবেস হোস্টিং' সম্পর্কেও জানতে আগ্রহী হন। এটি ডিফল্টরূপে SSL-সক্ষম।
একটি স্থানীয় HTTP পাইথন সার্ভার - এর জন্য কমান্ড-লাইনে প্রবেশাধিকার প্রয়োজন।

বিকল্প #১: ক্রোমের জন্য ওয়েব সার্ভার

আপনি ক্রোম ওয়েব স্টোরের এই লিঙ্কে 'Web Server for Chrome' অ্যাপটি খুঁজে পেতে পারেন।

ক্রোম অ্যাপটি ইনস্টল করার পর আপনাকে 'Choose Folder' বোতামের মাধ্যমে অ্যাপটিকে একটি নির্দিষ্ট ফোল্ডারে নির্দেশ করতে হবে। এই কোড ল্যাবের জন্য, আপনাকে সেই ফোল্ডারটি নির্বাচন করতে হবে যেখানে আপনি কোড ল্যাবের উদাহরণ ফাইলগুলো আনজিপ করেছেন।

এছাড়াও আপনাকে 'Automatically show index.html' অপশনটি টিক দিতে হবে এবং পোর্টটি '8000'-এ সেট করতে হবে। এই পরিবর্তনগুলো কার্যকর হওয়ার জন্য আপনাকে ওয়েব সার্ভারটি রিস্টার্ট করতে হবে।

এই URL-টি অ্যাক্সেস করুন:

http://localhost:8000/article.html

উপরের ইউআরএলটি সফলভাবে লোড হলে আপনি পরবর্তী ধাপে যেতে পারেন।

বিকল্প #২: ফায়ারবেস হোস্টিং

আপনি যদি আমাদের নতুন ফায়ারবেস স্ট্যাটিক ওয়েব হোস্টিং সম্পর্কে জানতে আগ্রহী হন, তাহলে আপনার AMP সাইটটিকে একটি ফায়ারবেস হোস্টিং URL-এ স্থাপন করার জন্য এখানে দেওয়া নির্দেশাবলী অনুসরণ করতে পারেন।

ফায়ারবেস হোস্টিং হলো একটি স্ট্যাটিক হোস্টিং প্রোভাইডার, যা ব্যবহার করে আপনি দ্রুত একটি স্ট্যাটিক ওয়েবসাইট এবং এর অ্যাসেটসমূহ—যেমন HTML, CSS, ও জাভাস্ক্রিপ্ট ফাইল—ডেপ্লয় ও হোস্ট করতে পারেন। ব্যবহারকারীরা কম ল্যাটেন্সির সুবিধা পান, কারণ স্ট্যাটিক কন্টেন্ট বিশ্বজুড়ে অবস্থিত পয়েন্টস অফ প্রেজেন্স (PoP) সহ একটি কন্টেন্ট ডেলিভারি নেটওয়ার্ক (CDN)-এ ক্যাশ করা থাকে।

সবশেষে, Firebase Hosting সবসময় SSL-এর মাধ্যমে পরিবেশিত হয়, তাই এটি AMP এবং সাধারণভাবে ওয়েবের জন্য চমৎকার। আপনি যদি শুধুমাত্র AMP-এর উপর মনোযোগ দিতে বেশি আগ্রহী হন, তাহলে এই অপশনটি উপেক্ষা করুন।

বিকল্প #৩: HTTP পাইথন সার্ভার

যদি আপনি ক্রোম ব্যবহার না করেন অথবা ক্রোম এক্সটেনশনটি ইনস্টল করতে সমস্যায় পড়েন, তাহলে আপনি কমান্ড-লাইন থেকে পাইথন ব্যবহার করেও একটি লোকাল ওয়েব সার্ভার চালু করতে পারেন।

কমান্ড লাইন থেকে পাইথনের বিল্ট-ইন HTTP সার্ভার চালাতে হলে শুধু নিচের কমান্ডটি চালান:

python -m SimpleHTTPServer

এবং এই URL-টি অ্যাক্সেস করুন:

http://localhost:8000/article.html

৪. একটি সাধারণ HTML পৃষ্ঠা তৈরি করুন

ডাউনলোড করা জিপ ফাইলটির ভেতরে আপনি article.html নামের একটি ফাইল পাবেন। এই আর্টিকেলটির জন্যই আমরা একটি AMP সমতুল্য পেজ তৈরি করছি।

article.html নমুনা থেকে কোডটি কপি করে একটি নতুন ফাইলে পেস্ট করুন। ফাইলটি article.amp.html.

আপনার article.amp.html ফাইলটি এখন নিচের মতো দেখতে হবে:

<!doctype html>
<html lang="en">
  <head>

    <title>News Article</title>

    <link href="base.css" rel="stylesheet" />

    <script type="text/javascript" src="base.js"></script>
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
    </article>
    <img src="mountains.jpg">
  </body>
</html>

এটি ইচ্ছাকৃতভাবে একটি সরল পৃষ্ঠা, যেখানে সাধারণ স্ট্যাটিক সংবাদ নিবন্ধের উপাদানগুলো রয়েছে: CSS, JavaScript, এবং একটি ইমেজ ট্যাগ।

আমাদের আর্টিকেলটির AMP সংস্করণটি এখন মূল আর্টিকেলটিরই একটি অনুলিপি মাত্র। চলুন, এটিকে AMP-তে রূপান্তর করা যাক। শুরুতে, আমরা AMP জাভাস্ক্রিপ্ট লাইব্রেরি ফাইলটি যুক্ত করব এবং দেখব AMP ভ্যালিডেটর চালু করলে কী কী ত্রুটি দেখা দেয়।

AMP লাইব্রেরি অন্তর্ভুক্ত করতে, <head> ট্যাগের শেষে এই লাইনটি যোগ করুন :

<script async src="https://cdn.ampproject.org/v0.js"></script>

এখন নিচের লিঙ্কের মাধ্যমে আমাদের ব্রাউজারে নতুন article.amp.html পেজটি লোড করুন এবং Chrome-এর Menu > More Tools > Developer Tools এর মাধ্যমে Developer Console খুলুন:

এখন ডেভেলপার কনসোলে জাভাস্ক্রিপ্ট আউটপুটটি পরীক্ষা করুন। নিশ্চিত করুন যে আপনি কনসোল ট্যাবটি নির্বাচন করেছেন:

আপনার এই লগটি দেখতে পাওয়ার কথা:

Powered by AMP ⚡ HTML

এখন AMP ভ্যালিডেটর সক্রিয় করতে আপনার URL-এ এই ফ্র্যাগমেন্ট আইডেন্টিফায়ারটি যোগ করুন:

#development=1

উদাহরণস্বরূপ:

http://localhost:8000/article.amp.html#development=1

আপনার ব্রাউজারে পৃষ্ঠাটি ম্যানুয়ালি রিফ্রেশ করার প্রয়োজন হতে পারে। এই বোতামটি চেপে আপনি আপনার ব্রাউজারে একটি পৃষ্ঠা ম্যানুয়ালি রিফ্রেশ করতে পারেন:

আপনি বেশ কয়েকটি যাচাইকরণ ত্রুটি পাবেন:

Screen Shot 2016-05-03 at 10.09.51 AM.png

যদিও AMP-এর পূর্ণরূপ হলো Accelerated Mobile Pages, এটি ব্যবহার করে এমন রেসপন্সিভ পেজ তৈরি করা যায় যা সব স্ক্রিন সাইজে ভালোভাবে প্রদর্শিত হয়। আরও তথ্যের জন্য, গুগল ডেভেলপারস ওয়েবসাইটের রেসপন্সিভ ওয়েব ডিজাইন বিভাগটি দেখুন।

ক্রোম ডেভেলপার টুলসে মোবাইল ডিভাইসের অভিজ্ঞতা অনুকরণ করতে, এখানে মোবাইল ফোন ডিভাইসের আইকনে ক্লিক করুন:

এখন এই মেনু থেকে একটি মোবাইল ডিভাইস (যেমন 'পিক্সেল ২') বেছে নিন:

আপনার ব্রাউজারে এইরকম একটি মোবাইল সিমুলেটেড রেজোলিউশন দেখতে পাবেন:

এখন আমরা কাজ শুরু করার জন্য প্রস্তুত! চলুন, ভ্যালিডেশন ত্রুটিগুলো এক এক করে পর্যালোচনা করি এবং AMP-এর সাথে সেগুলোর সম্পর্ক আলোচনা করি।

৫. যাচাইকরণ ত্রুটি সমাধান করুন

অক্ষর সেট প্রয়োজন

আমরা নিম্নলিখিত ত্রুটিটি সংশোধন করার মাধ্যমে শুরু করব:

The mandatory tag 'meta charset=utf-8' is missing or incorrect.

টেক্সট সঠিকভাবে প্রদর্শনের জন্য, AMP-এর প্রয়োজন হয় যে পেজের ক্যারেক্টার সেট (charset) সেট করা থাকুক। এটি অবশ্যই হেড ট্যাগের প্রথম চাইল্ড হতে হবে। এর কারণ হলো মেটা ক্যারেক্টার সেট ট্যাগের আগে যোগ করা কন্টেন্টের পুনঃব্যাখ্যা এড়ানো।

নিম্নলিখিত কোডটি head ট্যাগের প্রথম লাইন হিসেবে যোগ করুন :

<meta charset="utf-8" />

ফাইলটি সেভ করুন , পেজটি রিলোড করুন এবং পরীক্ষা করে দেখুন যে এই ত্রুটিটি আর দেখা যাচ্ছে না।

AMP ফাইলগুলিতে অবশ্যই একটি `<link rel=canonical>` ট্যাগ থাকতে হবে।

প্রতিটি AMP ডকুমেন্টে ক্যানোনিকাল পেজের একটি লিঙ্ক থাকা আবশ্যক। তাই, চলুন আমাদের মূল আর্টিকেলের লিঙ্কটি যোগ করি।

<meta charset="utf-8" /> ট্যাগের নিচে নিম্নলিখিত কোডটি যোগ করুন:

<link rel="canonical" href="/article.html">

এখন, প্রয়োজনে আপনার ওয়েবসার্ভার রিস্টার্ট করুন এবং পেজটি রিলোড করুন। যদিও এখনও অনেক ত্রুটি সংশোধন করার বাকি আছে, "AMP ফাইলগুলিতে একটি <link rel=canonical> ট্যাগ থাকা আবশ্যক" এই ত্রুটিটি আর নেই।

AMP অ্যাট্রিবিউট প্রয়োজন

একটি পৃষ্ঠাকে AMP ডকুমেন্ট হিসেবে ঘোষণা করার জন্য, AMP-এর রুট HTML এলিমেন্টে একটি অ্যাট্রিবিউট থাকা আবশ্যক:

The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html'
The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.

<html> ট্যাগে ⚡ অ্যাট্রিবিউটটি যোগ করলেই এর খুব সহজে সমাধান হয়ে যায়, যেমনটা নিচে দেখানো হয়েছে:

<!doctype html>
<html ⚡ lang="en">
  <head>
...

এখন, পৃষ্ঠাটি রিলোড করুন এবং পরীক্ষা করে দেখুন যে দুটি ত্রুটিই চলে গেছে কিনা।

ভিউপোর্ট প্রয়োজন

এরপরে আমরা নিম্নলিখিত ত্রুটিটি সমাধান করব:

The mandatory tag 'meta name=viewport' is missing or incorrect.

AMP-এর জন্য ভিউপোর্টের একটি width এবং minimum-scale নির্ধারণ করা প্রয়োজন। এই মান দুটিকে যথাক্রমে device-width এবং 1 হিসেবে নির্ধারণ করতে হবে। ভিউপোর্ট হলো একটি সাধারণ ট্যাগ যা একটি HTML পৃষ্ঠার <head> মধ্যে অন্তর্ভুক্ত থাকে।

<head> ট্যাগে নিম্নলিখিত HTML কোডটি যোগ করলে এটি সবচেয়ে ভালোভাবে সংশোধন করা যায়। নিম্নলিখিত meta ট্যাগটি যোগ করুন :

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />

    <link rel="canonical" href="/article.html">

    <!-- The following is the meta tag and viewport information we must add to the page: -->
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

...

AMP-তে width এবং minimum-scale এর জন্য শুধুমাত্র এই মানগুলোই বৈধ। initial-scale নির্ধারণ করা বাধ্যতামূলক নয়, তবে মোবাইল ওয়েব ডেভেলপমেন্টে এটি একটি সাধারণ সংযোজন এবং সুপারিশকৃত। আপনি এখানে ভিউপোর্ট এবং রেসপন্সিভ ডিজাইন সম্পর্কে আরও পড়তে পারেন।

আগের মতোই, পৃষ্ঠাটি পুনরায় লোড করুন এবং ত্রুটিটি দূর হয়েছে কিনা তা পরীক্ষা করুন।

বাহ্যিক স্টাইলশিট

নিম্নলিখিত ত্রুটিটি আমাদের স্টাইলশীট ব্যবহারের সাথে সম্পর্কিত:

The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.

বিশেষভাবে এটি আমাদের <head> ট্যাগের মধ্যে থাকা নিম্নলিখিত স্টাইলশীট লিঙ্ক ট্যাগটি নিয়ে অভিযোগ করছে:

<link href="base.css" rel="stylesheet" />

সমস্যাটি হলো, এটি একটি এক্সটার্নাল স্টাইলশিট রেফারেন্স। AMP-তে, ডকুমেন্টের লোড টাইম যথাসম্ভব দ্রুত রাখার জন্য ডেভেলপারদের এক্সটার্নাল স্টাইলশিট অন্তর্ভুক্ত করার অনুমতি নেই। এর পরিবর্তে, সমস্ত স্টাইলশিট রুল অবশ্যই AMP ডকুমেন্টে ইনলাইন হিসেবে অন্তর্ভুক্ত করতে হবে।

সুতরাং, <head> এর ভেতরের লিঙ্ক ট্যাগটি সরিয়ে দিন এবং এর পরিবর্তে নিচের মতো একটি ইনলাইন ট্যাগ ব্যবহার করুন:

<style amp-custom>

body {
  width: auto;
  margin: 0;
  padding: 0;
}

...

</style>

স্টাইল ট্যাগের বিষয়বস্তু আপনার প্রজেক্ট ডিরেক্টরিতে থাকা base.css ফাইল থেকে সরাসরি কপি করতে হবে। স্টাইল ট্যাগে amp-custom অ্যাট্রিবিউটটি থাকা বাধ্যতামূলক ।

পৃষ্ঠাটি পুনরায় লোড করুন এবং পরীক্ষা করে দেখুন স্টাইলশিটের ত্রুটিটি দূর হয়েছে কি না।

গুরুত্বপূর্ণ : আপনার সম্পূর্ণ AMP ডকুমেন্টে শুধুমাত্র একটি স্টাইল ট্যাগ থাকতে পারে। যদি আপনার আর্টিকেলগুলোতে একাধিক এক্সটার্নাল স্টাইলশিট রেফারেন্স করা থাকে, তবে আপনাকে এই স্টাইলশিটগুলোকে একটিমাত্র নিয়মের সেটে একত্রিত করতে হবে। AMP ডকুমেন্টে কোন CSS নিয়মগুলো বৈধ, সে সম্পর্কে আরও তথ্যের জন্য এই ডকুমেন্টেশন পৃষ্ঠাটি পড়ুন ।

তৃতীয় পক্ষের জাভাস্ক্রিপ্ট

এএমপি (AMP)-তে ইনলাইনিংয়ের মাধ্যমে স্টাইলশীট তুলনামূলকভাবে সহজে পরিবর্তন করা গেলেও, জাভাস্ক্রিপ্টের ক্ষেত্রে বিষয়টি তেমন নয়।

The tag 'script' is disallowed except in specific forms.

AMP-তে ব্যবহারকারী-সৃষ্ট স্ক্রিপ্ট অনুমোদিত নয়। AMP-তে স্ক্রিপ্ট শুধুমাত্র তখনই অনুমোদিত হয়, যদি সেগুলি দুটি প্রধান শর্ত পূরণ করে:

সমস্ত জাভাস্ক্রিপ্ট অবশ্যই অ্যাসিঙ্ক্রোনাস হতে হবে, অর্থাৎ স্ক্রিপ্ট ট্যাগে async অ্যাট্রিবিউটটি অন্তর্ভুক্ত করতে হবে।
শুধুমাত্র AMP লাইব্রেরি এবং AMP কম্পোনেন্টগুলো অন্তর্ভুক্ত করা যাবে।

এর ফলে কার্যত সব ধরনের থার্ড-পার্টি জাভাস্ক্রিপ্ট ব্যবহার করা যায় না। তবে একটি ব্যতিক্রম রয়েছে – আইফ্রেমের (iframe) মধ্যে থার্ড-পার্টি জাভাস্ক্রিপ্ট ব্যবহার করা যেতে পারে।

এক্সটার্নাল base.js ফাইলটি খোলার চেষ্টা করুন। আপনি কী দেখতে পাচ্ছেন? ফাইলটিতে কোনো জাভাস্ক্রিপ্ট কোড থাকার কথা নয় এবং এতে শুধু এই ধরনের তথ্যের একটি কমেন্ট থাকবে:

/*

This external JavaScript file is intentionally empty.

Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files.

*/

যেহেতু এই বাহ্যিক জাভাস্ক্রিপ্ট ফাইলটি আমাদের ওয়েবসাইটের কোনো কার্যকরী অংশ নয়, তাই আমরা নিরাপদে এর রেফারেন্সটি সম্পূর্ণরূপে মুছে ফেলতে পারি।

আপনার ডকুমেন্ট থেকে নিম্নলিখিত বাহ্যিক জাভাস্ক্রিপ্ট রেফারেন্সটি সরিয়ে ফেলুন :

<script type="text/javascript" src="base.js"></script>

এখন পৃষ্ঠাটি পুনরায় লোড করুন এবং পরীক্ষা করে দেখুন যে স্ক্রিপ্ট ত্রুটিটি দূর হয়ে গেছে কিনা।

এএমপি সিএসএস বয়লারপ্লেট

The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect.
The mandatory tag 'head > style : boilerplate' is missing or incorrect.
The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.

পরবর্তী ত্রুটিগুলো <head> ট্যাগে দুটি ট্যাগের অনুপস্থিতি নির্দেশ করে। প্রতিটি AMP ডকুমেন্টে এই ট্যাগগুলো অন্তর্ভুক্ত থাকা আবশ্যক:

<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>

আপনার ডকুমেন্টের <head> ট্যাগের শেষে উপরের কোড স্নিপেটটি যোগ করুন ।

প্রথম ট্যাগটি পেজের বিষয়বস্তুকে অদৃশ্য করে রাখে, যতক্ষণ না AMP জাভাস্ক্রিপ্ট লাইব্রেরি 'body' ট্যাগটিকে আপডেট করে পেজের বিষয়বস্তু রেন্ডার হওয়ার জন্য প্রস্তুত হলে সেটিকে আবার দৃশ্যমান করে তোলে। AMP এটি করে পেজের এমন কোনো বিষয়বস্তুকে প্রদর্শিত হওয়া থেকে বিরত রাখতে, যা এখনও স্টাইল করা হয়নি। এটি নিশ্চিত করে যে ব্যবহারকারীর অভিজ্ঞতা যেন সত্যিই তাৎক্ষণিক মনে হয়, কারণ পেজের সমস্ত বিষয়বস্তু একবারে প্রদর্শিত হয় এবং 'above the fold'-এর সবকিছু একসাথে রেন্ডার হয়ে যায়। ব্রাউজারে জাভাস্ক্রিপ্ট নিষ্ক্রিয় করা থাকলে দ্বিতীয় ট্যাগটি এই লজিকটিকে পূর্বাবস্থায় ফিরিয়ে আনে।

amp-img ট্যাগ

The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?

ইমেজ ট্যাগ প্রতিস্থাপন করার জন্য বিশেষভাবে ডিজাইন করা AMP-এর একটি ওয়েব কম্পোনেন্ট রয়েছে, যার নাম amp-img ।

<amp-img src="mountains.jpg"></amp-img>

উপরের amp-img ট্যাগটি অন্তর্ভুক্ত করে ভ্যালিডেটরটি আবার চালান। আপনি কয়েকটি নতুন এরর পাবেন:

AMP-IMG# Layout not supported for: container
The implied layout 'CONTAINER' is not supported by tag 'amp-img'.

amp-img কেন আরেকটি ত্রুটি দেখালো? কারণ amp-img প্রচলিত HTML img ট্যাগের সরাসরি বিকল্প নয়। amp-img ব্যবহার করার ক্ষেত্রে কিছু অতিরিক্ত শর্ত রয়েছে।

লেআউট সিস্টেম

এই ত্রুটিটি আমাদের জানাচ্ছে যে, amp-img 'container' লেআউট টাইপটি সমর্থন করে না। AMP-এর ডিজাইনের অন্যতম গুরুত্বপূর্ণ একটি ধারণা হলো এর ওয়েব পেজগুলো রেন্ডার করার জন্য প্রয়োজনীয় DOM রিফ্লো-এর পরিমাণ কমানোর উপর মনোযোগ দেওয়া।

DOM রিফ্লো কমানোর জন্য, AMP একটি লেআউট সিস্টেম অন্তর্ভুক্ত করেছে যা পেজ ডাউনলোড এবং রেন্ডারিং-এর লাইফসাইকেলের একেবারে শুরুতেই পেজের লেআউটকে যথাসম্ভব অনমনীয় রাখা নিশ্চিত করে।

লেআউট সিস্টেমের মাধ্যমে একটি পৃষ্ঠার উপাদানগুলোকে বিভিন্ন উপায়ে স্থাপন ও আকার পরিবর্তন করা যায় – যেমন নির্দিষ্ট মাপ, রেসপন্সিভ ডিজাইন, নির্দিষ্ট উচ্চতা এবং আরও অনেক কিছু।

আমাদের ক্ষেত্রে, লেআউট সিস্টেমটি amp-img ট্যাগটির জন্য container টাইপ হিসেবে লেআউট টাইপটি অনুমান করে নিয়েছিল। কিন্তু, কন্টেইনার টাইপটি এমন এলিমেন্টের জন্য ব্যবহৃত হয় যেগুলোর মধ্যে চাইল্ড এলিমেন্ট থাকে এবং এটি amp-img ট্যাগের সাথে সামঞ্জস্যপূর্ণ নয়, আর একারণেই এই ত্রুটিটি ঘটেছে।

কন্টেইনার টাইপটি কেন অনুমান করা হয়েছিল? কারণ আমরা amp-img ট্যাগের জন্য কোনো height অ্যাট্রিবিউট নির্দিষ্ট করিনি। HTML-এ, একটি পৃষ্ঠার এলিমেন্টগুলোর জন্য সর্বদা একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা উল্লেখ করার মাধ্যমে রিফ্লো কমানো যায়। AMP-তে, amp-img এলিমেন্টগুলোর জন্য প্রস্থ এবং উচ্চতা নির্ধারণ করার পরামর্শ দেওয়া হয়, কারণ এটি AMP-কে এলিমেন্টটির অ্যাস্পেক্ট রেশিও বুঝতে সাহায্য করে।

প্রস্থ এবং উচ্চতা নিম্নরূপভাবে নির্ধারণ করুন:

<amp-img src="mountains.jpg" width="266" height="150"></amp-img>

পৃষ্ঠাটি রিফ্রেশ করুন এবং ভ্যালিডেটরটি পরীক্ষা করুন - আপনি আর কোনো ত্রুটি দেখতে পাবেন না! তবে, ছবিটি দেখতে খুব একটা ভালো লাগছে না কারণ এটি পৃষ্ঠায় অদ্ভুতভাবে স্থাপন করা হয়েছে। খুব ভালো হতো যদি আমরা স্ক্রিনের আকার নির্বিশেষে ছবিটিকে রেসপন্সিভভাবে প্রসারিত করে পৃষ্ঠার সাথে মানানসই করতে পারতাম।

আশ্চর্যজনকভাবে, প্রস্থ এবং উচ্চতা নির্ধারণ করা হলেও এলিমেন্টটি একটি সম্পূর্ণ নির্দিষ্ট আকারে সীমাবদ্ধ থাকে না। AMP লেআউট সিস্টেম এলিমেন্টটির অ্যাসপেক্ট রেশিও জেনে সেটিকে বিভিন্ন উপায়ে অবস্থান ও স্কেল করতে পারে — লেআউট অ্যাট্রিবিউটটি AMP-কে জানিয়ে দেয় যে আপনি এলিমেন্টটিকে কীভাবে অবস্থান ও স্কেল করতে চান।

লেআউট অ্যাট্রিবিউটকে responsive সেট করার মাধ্যমে আমরা এটি অর্জন করতে পারি:

<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>

এই তো! আমাদের ছবিটি সঠিক অ্যাস্পেক্ট রেশিওতে আছে এবং স্ক্রিনের প্রস্থ জুড়ে রেসপন্সিভভাবে দেখাচ্ছে।

সফল!

এখন আপনার AMP ডকুমেন্টটি দেখতে অনেকটা এইরকম হবে:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">    

    <link rel="canonical" href="/article.html">
    <link rel="shortcut icon" href="amp_favicon.png">

    <title>News Article</title>

    <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>
    <style amp-custom>
      body {
        width: auto;
        margin: 0;
        padding: 0;
      }

      header {
        background: Tomato;
        color: white;
        font-size: 2em;
        text-align: center;
      }

      h1 {
        margin: 0;
        padding: 0.5em;
        background: white;
        box-shadow: 0px 3px 5px grey;
      }

      p {
        padding: 0.5em;
        margin: 0.5em;
      }
    </style>
    <script async src="https://cdn.ampproject.org/v0.js"></script>  
  </head>
  <body>
    <header>
      News Site
    </header>
    <article>
      <h1>Article Name</h1>

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>

      <amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
    </article>
  </body>
</html>

পৃষ্ঠাটি রিফ্রেশ করুন এবং কনসোল আউটপুট দেখুন। আপনি নিম্নলিখিত বার্তাটি দেখতে পাবেন:

AMP validation successful.

প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী

৬. ক্যানোনিকাল ইউআরএল, মেটাডেটা ও সার্চ

নতুন AMP উদ্যোগের একটি অংশ হলো একটি নতুন ক্যারোসেল ইন্টারফেসের অংশ হিসেবে গুগল সার্চ রেজাল্ট ইন্টারফেসে বৈধ AMP ডকুমেন্টগুলোকে হাইলাইট করা। এই ইন্টারফেসটি ওয়েবে আর্টিকেল অনুসন্ধানকারী ব্যবহারকারীদের আরও ভালো অভিজ্ঞতা প্রদান করে। এই অভিজ্ঞতাকে সর্বোত্তম করার জন্য, অন্তর্ভুক্ত পেজগুলোকে AMP ভ্যালিডেটর পাস করার পাশাপাশি আরও কিছু নির্দিষ্ট মানদণ্ড পূরণ করতে হয়।

এই ধাপে সম্পূর্ণ প্রয়োজনীয়তাগুলোর একটি সংক্ষিপ্ত বিবরণ দেওয়া হয়েছে।

ক্যানোনিকাল পেজ এবং এএমপি ডকুমেন্ট লিঙ্ক করা

AMP-এর লক্ষ্য হলো ওয়েবকে আরও দ্রুততর করা এবং যদিও প্রকল্পটি শুরুর দিকে স্ট্যাটিক কন্টেন্টের উপর বেশি মনোযোগ দিয়েছিল, amp-bind-এর মতো কম্পোনেন্ট যুক্ত হওয়ার ফলে এটি এখন সংবাদ প্রকাশক, ই-কমার্স, ভ্রমণ ওয়েবসাইট, ব্লগ এবং অন্যান্য বিভিন্ন ধরনের সাইটের জন্য উপযুক্ত হয়ে উঠেছে।

তবে, একটি ওয়েবসাইটের কাঠামোর মধ্যে AMP কীভাবে কাজ করবে, তার পূর্ণাঙ্গ পরিধি বোঝাটা জরুরি। যদিও AMP ব্যবহার করে সম্পূর্ণ ওয়েবসাইট তৈরি করা যায়, অনেক প্রকাশক এটিকে যুগল পদ্ধতিতে ব্যবহার করতে পছন্দ করেন, যেখানে প্রকাশকের ওয়েবসাইটে হোস্ট করা সাধারণ HTML আর্টিকেলগুলোর পরিপূরক হিসেবে AMP ডকুমেন্ট তৈরি করা হয়।

সাধারণ HTML পেজগুলিতে ক্যানোনিকাল লিঙ্কিং একটি প্রচলিত কৌশল, যার মাধ্যমে নির্ধারণ করা হয় যে একাধিক পেজে একই কন্টেন্ট থাকলে কোন পেজটিকে অগ্রাধিকার দেওয়া হবে। যেহেতু একটি ওয়েবসাইটের প্রচলিত আর্টিকেল পেজগুলোর পাশাপাশি AMP ডকুমেন্ট তৈরি করা যায়, তাই আমাদের প্রচলিত HTML পেজগুলোকেই "ক্যানোনিকাল" পেজ হিসেবে গণ্য করা উচিত।

আমাদের AMP ডকুমেন্টে <head> এর মধ্যে মূল পৃষ্ঠায় ফিরে যাওয়ার জন্য একটি লিঙ্ক ট্যাগ যুক্ত করে আমরা এটি অর্জনের প্রথম পদক্ষেপটি ইতিমধ্যেই নিয়েছি:

<link rel="canonical" href="/article.html">

পরবর্তী ধাপ হলো ক্যানোনিকাল আর্টিকেলটিকে এএমপি পেজের সাথে লিঙ্ক করা। এটি করার জন্য ক্যানোনিকাল আর্টিকেলের <head> সেকশনে একটি <link rel="amphtml"> ট্যাগ যুক্ত করতে হয়।

article.html ফাইলের <head> সেকশনে নিম্নলিখিত কোডটি যোগ করুন:

<link rel="amphtml" href="/article.amp.html">

নিম্নলিখিত চিত্রটি লিঙ্ক ট্যাগগুলির দিকনির্দেশনা তুলে ধরে:

আমাদের সাধারণ HTML ক্যানোনিকাল ডকুমেন্ট এবং AMP ডকুমেন্টের মধ্যে সম্পর্ক যাতে গুগল সার্চ ক্রলার বুঝতে পারে, তার জন্য এই দ্বিমুখী লিঙ্কিং স্থাপন করা আবশ্যক। যদি কোনো লিঙ্ক প্রদান করা না হতো, তাহলে কোন আর্টিকেলগুলো সাধারণ HTML ডকুমেন্টের "AMP সংস্করণ" তা ক্রলারের কাছে অগত্যা স্পষ্ট হতো না। এই লিঙ্কগুলো স্পষ্টভাবে প্রদান করার মাধ্যমে আমরা নিশ্চিত করি যেন কোনো অস্পষ্টতা না থাকে!

Schema.org সার্চ ইঞ্জিন মেটাডেটা

নতুন ক্যারোসেল ইন্টারফেসে AMP ডকুমেন্ট প্রদর্শিত হওয়ার জন্য আরেকটি আবশ্যিক শর্ত হলো Schema.org-এর সার্চ ইঞ্জিন মেটাডেটা স্পেসিফিকেশন মেনে চলা। এই মেটাডেটা আপনার ডকুমেন্টের <head> ট্যাগে application/ld+json ধরনের একটি স্ক্রিপ্ট ট্যাগের মাধ্যমে অন্তর্ভুক্ত করা হয়।

আপনার AMP ডকুমেন্টের <head> সেকশনের শেষে নিম্নলিখিত কোডটি যোগ করুন:

<script type="application/ld+json">
{
 "@context": "http://schema.org",
 "@type": "NewsArticle",
 "mainEntityOfPage":{
   "@type":"WebPage",
   "@id":"https://example.com/my-article.html"
 },
 "headline": "My First AMP Article",
 "image": {
   "@type": "ImageObject",
   "url": "https://example.com/article_thumbnail1.jpg",
   "height": 800,
   "width": 800
 },
 "datePublished": "2015-02-05T08:00:00+08:00",
 "dateModified": "2015-02-05T09:20:00+08:00",
 "author": {
   "@type": "Person",
   "name": "John Doe"
 },
 "publisher": {
   "@type": "Organization",
   "name": "⚡ AMP Times",
   "logo": {
     "@type": "ImageObject",
     "url": "https://example.com/amptimes_logo.jpg",
     "width": 600,
     "height": 60
   }
 },
 "description": "My first experience in an AMPlified world"
}
</script>

ব্রাউজারে পৃষ্ঠাটি পুনরায় লোড করুন এবং পুনরায় পরীক্ষা করে দেখুন যে কোনও AMP ভ্যালিডেশন ত্রুটি যুক্ত হয়নি।

এখন, একটি নতুন ব্রাউজার উইন্ডোতে স্ট্রাকচার্ড ডেটা ভ্যালিডেশন টুলটি খুলুন এবং "টেস্ট মাই মার্কআপ"-এ ক্লিক করুন। তারপর "কোড স্নিপেট" ট্যাবটি নির্বাচন করুন, আপনার AMP পেজ থেকে সম্পূর্ণ সোর্স কোডটি কপি করে ভ্যালিডেশন টুলের টেক্সট এডিটর প্যানেলে পেস্ট করুন এবং "রান টেস্ট"-এ ক্লিক করুন :

পৃষ্ঠাটিতে আপনি এইরকম কিছু দেখতে পাবেন:

এএমপি চালিত সংবাদ নিবন্ধগুলির জন্য নতুন গুগল সার্চ ক্যারোসেলে প্রদর্শিত হওয়ার মূল শর্তগুলি হলো নিম্নরূপ:

আপনার AMP ডকুমেন্টটি বৈধ কিনা তা নিশ্চিত করুন।
আপনার প্রচলিত HTML পৃষ্ঠা থেকে <link> ট্যাগের মাধ্যমে আপনার AMP ডকুমেন্টকে রেফারেন্স করুন এবং এর বিপরীতটিও করুন।
উপরে সার্চ ইঞ্জিন মেটাডেটা ট্যাগটি অন্তর্ভুক্ত করুন।

পৃষ্ঠা আবিষ্কার সম্পর্কে আরও তথ্য পড়ুন।

৭. অভিনন্দন!

আপনি কোড ল্যাবটি শেষ করেছেন এবং এএমপি ডকুমেন্টের অনেক মৌলিক ধারণা সফলভাবে অন্বেষণ করেছেন।

আশা করি, এই ধারণা ও বৈশিষ্ট্যগুলো একটি AMP ডকুমেন্টে কীভাবে প্রয়োগ করা যায়, তা আপনি শুধু বুঝতেই পারেননি, বরং AMP-কে কেন এভাবে ডিজাইন করা হয়েছে, তাও বুঝতে পেরেছেন।

আপনার দক্ষতা আরও বাড়ানোর জন্য নিচে কিছু অতিরিক্ত বিষয় এবং লিঙ্ক দেওয়া হলো, যা আপনি খতিয়ে দেখতে পারেন!