Please Enable JavaScript
TrickBuzz
Amp ওয়েবসাইট

AMP ওয়েবসাইট কি? কীভাবে AMP ওয়েবসাইট বানাবেন? [2020]

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 ব্যবহার করে।

http://www.trickbuzz.design/%e0%a6%95%e0%a7%80%e0%a6%ad%e0%a6%be%e0%a6%ac%e0%a7%87-%e0%a6%86%e0%a6%aa%e0%a6%a8%e0%a6%be%e0%a6%b0-%e0%a6%ac%e0%a7%8d%e0%a6%b2%e0%a6%97%e0%a7%87%e0%a6%b0-%e0%a6%85%e0%a7%8d%e0%a6%af%e0%a6%be/

কেন ব্লগারে 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

আমাদের সাইটের আর্টিকেলগুলো ভালো লাগলে অবশ্যই আপনার বন্ধুদের সাথে শেয়ার করতে ভুলবেন না। লেটেস্ট আর্টিকেলগুলো ইমেইলে পেতে আমাদের নিউজলেটারে সাবস্ক্রাইব করুন।

RONiB

This author may not interested to share anything with others!

Add comment

Most popular

Most discussed