AMP ওয়েবসাইট কি? কীভাবে কাজ করে? কীভাবে একটি AMP ওয়েবসাইট তৈরি করবেন?




AMP কি?
AMP এর পূর্ণরূপ হচ্ছে Accelerated Mobile Page. AMP হলো স্থায়ী সামগ্রীগুলির জন্য ওয়েব পৃষ্ঠাগুলি তৈরির একটি উপায় যা দ্রুত রেন্ডার করে। AMP JS Library, AMP ওয়েব পৃষ্ঠাগুলির দ্রুত উপস্থাপনা নিশ্চিত করে। গুগল AMP টি এমন দৃষ্টিভঙ্গির সাথে প্রবর্তন করেছিল যে প্রকাশকরা একবার মোবাইল অপ্টিমাইজড সামগ্রী তৈরি করতে পারে এবং তা তাৎক্ষণিকভাবে সর্বত্র লোড করা যায়।

Google AMP Cache কি?
গুগল AMP Cache কেবলমাত্র একটি প্রক্সি ভিত্তিক সামগ্রী বিতরণ নেটওয়ার্ক যা সমস্ত বৈধ AMP নথি সরবরাহ করে। এটি AMP এইচটিএমএল পৃষ্ঠাগুলি আনে, সেগুলি Cache করে এবং স্বয়ংক্রিয়ভাবে পৃষ্ঠার কার্যকারিতা উন্নত করে। গুগল AMP Cache নথিটি, সমস্ত উৎস এবং JS ফাইল একই উৎস থেকে লোড করে যা সর্বোচ্চ কার্যকারিতা সরবরাহ করতে HTTP 2.0 ব্যবহার করে .

কেন AMP ব্লগার নেই?
যদিও AMP একটি গুগল-সমর্থিত প্রকল্প এবং ব্লগস্পট গুগলের ব্লগিং প্ল্যাটফর্ম, কিন্তু গুগল বলছে "ব্লগার বর্তমানে AMP এইচটিএমএল সমর্থন করে না।" কিন্তু আমরা এটি সেভাবে করতে পারি না? পারি। নিচের এই পদক্ষেপগুলি অনুসরণ করুন এবং আপনার ব্র্যান্ডের জন্য নতুন একটি AMP ব্লগ তৈরি করুন :

ধাপ-১:
নিম্নলিখিত কোডটি <html> কোডের সাথে প্রতিস্থাপন করুন:

<html amp='amp'>

ধাপ-২:
Charset এবং Viewport মেটা ট্যাগগুলির জন্য খুজুন। উপস্থিত না থাকলে <head> এর পরে নিম্নলিখিত কোডটি প্রতিস্থাপন করুন।

<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

ধাপ-৩:
মেটা ট্যাগের পরে নিচের কোডগুলো লিখুন।

<link expr:href='data:blog.url' rel='canonical'/>

ধাপ-৪:
নিম্নলিখিত কোডের সাথে </head> কোডটি প্রতিস্থাপন করুন।

<style amp-boilerplate='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='amp-boilerplate'>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async='async' src='https://cdn.ampproject.org/v0.js'></script>
</head>

ধাপ-৫:
ইমেজ ট্যাগগুলিকে নিম্নলিখিত উদাহরণের মতো amp-img ট্যাগগুলিতে পরিবর্তন করুন:

<amp-img src="AmpImage.jpg" alt="amp-img" height="500" width="500"></amp-img>


কীভাবে AMP পৃষ্ঠাগুলি যাচাই করবেন?
পদ্ধতি-১:

আপনার AMP পৃষ্ঠাটি ক্রোম ব্রাউজারে খুলুন, উদাহরণস্বরূপ -
https://example.blogspot.in/p/amp-page.html

Right ক্লিক করুন এবং Chrome DevTools কনসোল খুলুন এবং বৈধতা ত্রুটি পরীক্ষা করুন।

পদ্ধতি-২:
validator.ampproject.org ওয়েব ইন্টারফেসটি খুলুন। এরপর URL ফিল্ডে url-টি লিখুন, যেমন:- https://example.blogspot.in/p/amp-page.html

ধন্যবাদ

Popular posts from this blog

তারিম মমির ইতিহাস

True Story About Titanic - টাইটানিকের সত্য ঘটনা