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

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

আপনি কি শিখবেন

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

আপনি কি প্রয়োজন হবে

• নমুনা কোড
• পাইথন (বিশেষত 2.7) বা Chrome 200 ওকে ওয়েব সার্ভার এক্সটেনশন
• ক্রোম (বা একটি সমতুল্য ব্রাউজার যা জাভাস্ক্রিপ্ট কনসোল পরিদর্শন করতে পারে)
• কোড এডিটর (উদাহরণস্বরূপ Atom, Sublime, Notepad++)

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

জিপ ডাউনলোড করুন

...অথবা কমান্ড লাইন থেকে GitHub সংগ্রহস্থল ক্লোন করুন:

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

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

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

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

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

দ্রষ্টব্য : এটি দৃঢ়ভাবে সুপারিশ করা হয় যে HTTPS উৎপাদন পরিবেশে ব্যবহার করা হবে। এসইও সহ শুধু নিরাপত্তার বাইরে HTTPS এর বেশ কিছু সুবিধা রয়েছে। আপনি এখানে এই বিষয় সম্পর্কে আরো পড়তে পারেন.

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

আপনি Chrome ওয়েব স্টোরের এই লিঙ্কে "ক্রোমের জন্য ওয়েব সার্ভার" অ্যাপটি খুঁজে পেতে পারেন৷

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

অতিরিক্তভাবে আপনাকে "স্বয়ংক্রিয়ভাবে index.html দেখান" বিকল্পে টিক দেওয়া উচিত এবং পোর্টটিকে "8000" এ সেট করা উচিত। এই পরিবর্তনগুলি কার্যকর করার জন্য আপনাকে ওয়েব সার্ভার পুনরায় চালু করতে হবে৷

এর মাধ্যমে এই URL অ্যাক্সেস করুন:

http://localhost:8000/article.html

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

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

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

ফায়ারবেস হোস্টিং হল একটি স্ট্যাটিক হোস্টিং প্রদানকারী যা আপনি একটি স্ট্যাটিক ওয়েবসাইট এবং এর সম্পদ দ্রুত স্থাপন ও হোস্ট করতে ব্যবহার করতে পারেন; HTML, CSS, এবং JavaScript ফাইল সহ। ব্যবহারকারীরা কম লেটেন্সি থেকে উপকৃত হন কারণ স্ট্যাটিক কন্টেন্ট একটি কন্টেন্ট ডেলিভারি নেটওয়ার্কে (CDN) ক্যাশে করা হয় যেখানে বিশ্বজুড়ে অবস্থানের পয়েন্ট (PoPs) রয়েছে।

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

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

আপনি যদি ক্রোম ব্যবহার না করেন বা আপনি ক্রোম এক্সটেনশন ইনস্টল করার জন্য লড়াই করছেন তবে আপনি একটি স্থানীয় ওয়েব সার্ভার ফায়ার করতে কমান্ড-লাইন থেকে পাইথন ব্যবহার করতে পারেন।

কমান্ড লাইন থেকে পাইথনের অন্তর্নির্মিত HTTP সার্ভার চালানোর জন্য কেবল নিম্নলিখিতগুলি চালান:

python -m SimpleHTTPServer

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

http://localhost:8000/article.html

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

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

দ্রষ্টব্য : আপনাকে আপনার AMP ফাইলগুলির নাম .amp.html হিসাবে রাখতে হবে না। প্রকৃতপক্ষে, এএমপি ফাইলগুলিতে আপনি চান এমন কোনো এক্সটেনশন থাকতে পারে। url-এ প্যারামিটার ব্যবহার করে প্রকাশকরা তাদের ক্যানোনিকাল সংস্করণ থেকে AMP পৃষ্ঠাগুলিকে আলাদা করতে দেখা সাধারণ। যেমন: http://publisher.com/article.html?amp

আপনার 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 লাইব্রেরি অন্তর্ভুক্ত করতে, <head> ট্যাগের নীচে এই লাইনটি যোগ করুন :

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

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

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

আপনি এই লগ প্রদর্শিত দেখতে হবে:

Powered by AMP ⚡ HTML

এখন এএমপি যাচাইকারী সক্ষম করতে আপনার URL-এ এই খণ্ড শনাক্তকারী যোগ করুন:

#development=1

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

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

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

আপনার বেশ কয়েকটি বৈধতা ত্রুটি পাওয়া উচিত:

যদিও AMP-এর অর্থ হল Accelerated Mobile Pages, তবুও এটি প্রতিক্রিয়াশীল পৃষ্ঠাগুলি তৈরি করতে ব্যবহার করা যেতে পারে যা সমস্ত স্ক্রীন আকারে ভালভাবে রেন্ডার করে৷ আরও তথ্যের জন্য, Google বিকাশকারী ওয়েবসাইটের প্রতিক্রিয়াশীল ওয়েব ডিজাইন বিভাগটি দেখুন।

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

এখন এই মেনু থেকে একটি মোবাইল ডিভাইস (উদাহরণস্বরূপ একটি "পিক্সেল 2") নির্বাচন করুন:

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

এখন আমরা কাজ পেতে প্রস্তুত! আসুন একের পর এক যাচাইকরণের ত্রুটির মধ্য দিয়ে ধাপে ধাপে যাই এবং সেগুলি এএমপি-এর সাথে কীভাবে সম্পর্কযুক্ত তা সম্বোধন করি।

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

আমরা নিম্নলিখিত ত্রুটিটি ঠিক করে শুরু করব:

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

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

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

<meta charset="utf-8" />  

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

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

প্রতিটি AMP ডকুমেন্টে ক্যানোনিকাল পৃষ্ঠার উল্লেখ করে একটি লিঙ্ক থাকা প্রয়োজন। সুতরাং, আমাদের মূল নিবন্ধের লিঙ্ক যোগ করা যাক.

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

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

গুরুত্বপূর্ণ : একটি স্বতন্ত্র AMP পৃষ্ঠা তৈরি করা সম্ভব, যেটি এমন একটি পৃষ্ঠা যার কোনো আদর্শ নেই৷ এই পরিস্থিতিতে, ক্যানোনিকাল লিঙ্কটি এখনও প্রয়োজন, কিন্তু AMP নিবন্ধটি নিজেই নির্দেশ করা উচিত:

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

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

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

পৃষ্ঠাটিকে একটি এএমপি ডকুমেন্ট হিসাবে ঘোষণা করার জন্য 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>
...

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

দ্রষ্টব্য : যদিও ⚡ প্রস্তাবিত পদ্ধতি, তবে ⚡ বৈশিষ্ট্যের জায়গায় amp বৈশিষ্ট্য ব্যবহার করাও সম্ভব। সুতরাং, মার্কআপ হয়ে যায়:

<!doctype html>

<html amp lang="en">

<head>

...

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

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

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

এএমপি ভিউপোর্টের জন্য 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">

...

এএমপি-তে 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-তে, যত দ্রুত সম্ভব ডকুমেন্ট লোড করার সময় ডেভেলপারদের বহিরাগত স্টাইলশীট অন্তর্ভুক্ত করার অনুমতি দেওয়া হয় না। পরিবর্তে সমস্ত স্টাইলশীট নিয়ম অবশ্যই এএমপি নথিতে ইনলাইন অন্তর্ভুক্ত করতে হবে।

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

<style amp-custom>

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

...

</style>

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

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

দ্রষ্টব্য : শুধুমাত্র ইনলাইন স্টাইলিং প্রয়োজন নয়, সমস্ত স্টাইলিং তথ্যের জন্য 50 কিলোবাইটের একটি ফাইল সাইজ সীমা রয়েছে৷ SASS- এর মতো CSS প্রিপ্রসেসর ব্যবহার করা এবং আপনার পেজে ইনলাইন করার আগে আপনার CSS-কে ছোট করার পরামর্শ দেওয়া হয়।

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

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

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

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

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

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

এটি কার্যকরভাবে সমস্ত তৃতীয় পক্ষের জাভাস্ক্রিপ্ট ব্যবহার বাতিল করে। একটি ব্যতিক্রম আছে -- থার্ড-পার্টি জাভাস্ক্রিপ্ট আইফ্রেমে ব্যবহার করা যেতে পারে।

এক্সটার্নাল 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>

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

গুরুত্বপূর্ণ : একটি আইফ্রেমের মাধ্যমে জাভাস্ক্রিপ্ট সহ শেষ অবলম্বনের একটি পরিমাপ বিবেচনা করা উচিত। যেখানেই সম্ভব জাভাস্ক্রিপ্ট কার্যকারিতা বিল্ট-ইন এএমপি উপাদান ব্যবহারের মাধ্যমে প্রতিস্থাপন করা উচিত। আমরা পরবর্তী বিভাগে আমাদের প্রথম এএমপি উপাদানটি অন্বেষণ করব।

দ্রষ্টব্য : ব্যবহারকারীর তৈরি স্ক্রিপ্টগুলির জন্য শুধুমাত্র ব্যতিক্রমগুলি হল যখন টাইপ অ্যাট্রিবিউট হল application/ld+json বা application/json , যা পৃষ্ঠায় মেটা-ডেটা যোগ করতে এবং AMP উপাদানগুলি কনফিগার করতে ব্যবহৃত হয়। অন্যান্য অ-নির্বাহযোগ্য স্ক্রিপ্ট ভবিষ্যতে যোগ করা হতে পারে.

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

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> ট্যাগের নীচে উপরের কোড স্নিপেট যোগ করুন।

এএমপি জাভাস্ক্রিপ্ট লাইব্রেরি পৃষ্ঠার বিষয়বস্তু রেন্ডার করার জন্য প্রস্তুত হওয়ার পরে আবার দৃশ্যমান হওয়ার জন্য বডি ট্যাগ আপডেট না করা পর্যন্ত প্রথম ট্যাগটি পৃষ্ঠার বিষয়বস্তুগুলিকে অদৃশ্য করে। এএমপি পৃষ্ঠার কন্টেন্ট যাতে এখনও স্টাইল করা হয়নি তা দেখাতে না দেওয়ার জন্য এটি করে। এটি নিশ্চিত করে যে ব্যবহারকারীর অভিজ্ঞতা সত্যিই তাৎক্ষণিক অনুভব করে কারণ পৃষ্ঠার বিষয়বস্তু একবারে প্রদর্শিত হয় এবং ভাঁজের উপরের সবকিছু একসাথে রেন্ডার করা হয়। ব্রাউজারে JavaScript নিষ্ক্রিয় থাকলে দ্বিতীয় ট্যাগ এই যুক্তিটিকে ফিরিয়ে দেয়।

amp-img ট্যাগ

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

এএমপি-তে একটি ওয়েব উপাদান রয়েছে যা বিশেষভাবে চিত্র ট্যাগ প্রতিস্থাপন করার জন্য ডিজাইন করা হয়েছে, যাকে বলা হয় 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 লেআউট টাইপ 'কন্টেইনার' সমর্থন করে না। AMP এর ডিজাইনের সবচেয়ে গুরুত্বপূর্ণ ধারণাগুলির মধ্যে একটি হল এটির ওয়েব পৃষ্ঠাগুলিকে রেন্ডার করার জন্য প্রয়োজনীয় DOM রিফ্লো পরিমাণ হ্রাস করার উপর ফোকাস করা৷

DOM রিফ্লো কমাতে এএমপি একটি লেআউট সিস্টেম অন্তর্ভুক্ত করে যাতে পৃষ্ঠাটির বিন্যাস যত তাড়াতাড়ি সম্ভব পৃষ্ঠা ডাউনলোড এবং রেন্ডার করার জীবনচক্রে যত তাড়াতাড়ি সম্ভব কঠোর হয়।

লেআউট সিস্টেম একটি পৃষ্ঠার উপাদানগুলিকে বিভিন্ন উপায়ে অবস্থান এবং স্কেল করার অনুমতি দেয় -- নির্দিষ্ট মাত্রা, প্রতিক্রিয়াশীল নকশা, নির্দিষ্ট উচ্চতা এবং আরও অনেক কিছু।

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

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

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

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

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

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

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

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

ভয়লা ! আমাদের ছবিটি সঠিক আকৃতির অনুপাতের মধ্যে রয়েছে এবং প্রতিক্রিয়াশীলভাবে পর্দার প্রস্থ পূরণ করে।

সফলতার !

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

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

F ঘন ঘন জিজ্ঞাসিত প্রশ্ন

• DOM রিফ্লো কি?
• লেআউট বৈশিষ্ট্য সংজ্ঞায়িত না হলে কি হবে?
• যদি প্রস্থ এবং উচ্চতা অনির্ধারিত হয়?

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

এই ধাপটি সম্পূর্ণ প্রয়োজনীয়তার একটি ওভারভিউ প্রদান করে।

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

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

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

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

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

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

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

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

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

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

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

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

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

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

আপনার 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 পৃষ্ঠাগুলি এই বৈধতা পাস করেছে সেগুলি AMP ক্যারোজেলে দেখাবে।

দ্রষ্টব্য : বিষয়বস্তু সবসময় একই হতে হবে. সংবাদ নিবন্ধের জন্য "NewsArticle" টাইপ ব্যবহার করুন। শিরোনামটি আপনার নিবন্ধের শিরোনামের সাথে মেলে। চিত্রটি নিবন্ধের নায়ক চিত্রকে বোঝায়।

এএমপি চালিত সংবাদ নিবন্ধগুলির জন্য নতুন Google অনুসন্ধান ক্যারাউজেলে উপস্থিত হওয়ার প্রধান প্রয়োজনীয়তাগুলি হল:

1. নিশ্চিত করুন যে আপনার AMP ডকুমেন্ট যাচাই করা হয়েছে।
2. আপনার ঐতিহ্যবাহী HTML পৃষ্ঠা থেকে <link> ট্যাগের মাধ্যমে আপনার AMP নথি উল্লেখ করুন এবং এর বিপরীতে।
3. উপরের সার্চ ইঞ্জিন মেটাডেটা ট্যাগ অন্তর্ভুক্ত করুন।

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

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

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

নিম্নলিখিত কিছু অতিরিক্ত বিষয় এবং লিঙ্কগুলি যা আপনি আপনার দক্ষতাকে আরও প্রসারিত করতে অন্বেষণ করতে চাইতে পারেন!

• পৃষ্ঠা আবিষ্কার সম্পর্কে সব
• অননুমোদিত HTML ট্যাগ
• সীমাবদ্ধ CSS নিয়ম এবং অ্যানিমেশন
• iFrames এ আরো
• এএমপি সিডিএন
• উপলব্ধ এএমপি উপাদানগুলির তালিকা