AMP কি? কিভাবে ব্লগস্পট ব্লগে গুগল AMP যুক্ত করবেন?

AMP কি? কেন AMP ব্যবহার করবেন? কিভাবে AMP কাজ করে? কিভাবে ব্লগস্পট ব্লগে গুগল AMP যুক্ত করে ব্লগের স্পিড বৃদ্ধি করতে হয়? এই সকল বিষয়ে জানার জন্য আজকের পোস্টটি আপনার জন্য বেশ হেল্পফুল হবে। যারা ব্লগিং করেন তাদের ব্লগের মোবাইল ভার্সনের স্পিড বৃদ্ধি করার জন্য গুগল AMP খুব গুরুত্বপূর্ণ। তাছাড়া এএমপি গুগল সার্চ ইঞ্জিনের একটি বড় র‌্যাংকিং ফ্যাক্টর। যাদের ব্লগে মোবাইল থেকে বেশিরভাগ ট্রাফিক আসে তাদের ক্ষেত্রে গুগল AMP আরো বেশি গুরুত্বপূর্ণ।

গুগল AMP এর সুবিধা ও অসুবিধা নিয়ে আমরা ইতোপূর্বে একটি বিস্তারিত পোস্ট শেয়ার করেছি। আপনি যদি ‍গুগল এএমপি সম্পর্কে বিস্তারিত জানতে চান, তাহলে আমাদের ব্লগের পোস্টটি পড়ে নিবেন।

আজকের পোস্টে আমরা দেখাব, কিভাবে ব্লগস্পট ব্লগে গুগল AMP যুক্ত করতে হয়? তবে এই পোস্টে আমরা ব্লগার টেমপ্লেটে AMP যুক্ত করার পদ্ধতি শেয়ার করব না। কারণ ব্লগার টেমপ্লেটে AMP করার জন্য অনলাইনে হাজার হাজার টিউটোরিয়াল রয়েছে। আপনি গুগলে সার্চ করলে ব্লগার টেমপ্লেটে AMP যুক্ত করার ভালো ভালো টিপস পেয়ে যাবেন।

• আরো পড়ুন - AMP ব্লগার টেমপ্লেট এর সুবিধা এবং অসুবিধা কি?
• আরো পড়ুন - ব্লগস্পটের সেরা ৫ টি AMP থিম ফ্রি ডাউনলোড করুন

কিন্তু আমি অনলাইনে অনেক রিসার্চ করে ব্লগস্পট ব্লগের পোস্ট কিভাবে AMP করতে হয়, অর্থাৎ একটি নতুন পোস্ট করার পর সেই পোস্টকে কিভাবে এএমপি করতে হয়, সে বিষয়ে কোন ধরনের সঠিক নির্দেশনা পাইনি। অথচ একটি ব্লগের পোস্ট AMP করাটা সবচাইতে জরুরী। শুধুমাত্র এএমপি ব্লগার টেমপ্লেট থাকলেই আপনার ব্লগ এএমপি হবে না। গুগল এএমপি ব্লগের টেমপ্লেটে যুক্ত করার পর যে পোস্টকে এএমপি করতে চান, সেই পোস্টে সঠিকভাবে এএমপি কোড যুক্ত করতে হবে। ব্লগের পোস্ট AMP না করা পর্যন্ত আপনার ব্লগ থেকে এএমপি এর সুবিধা নিতে পারবেন না।

AMP কি?

এএমপি এর পূর্ণরূপ হচ্ছে Accelerated Mobile Pages. অর্থাৎ এএমপি মোবাইল থেকে ভিজিট করা ওয়েবসাইট বা ব্লগকে দ্রুততর (Accelerate) করে। একটি এএমপি যুক্ত ব্লগে মোবাইল ডিভাইস থেকে ভিজিট করার সময় AMP সেই ব্লগকে অপটিমাইজ করে স্পিড বৃদ্ধি করে। একটি এএমপি যুক্ত ব্লগ যেকোন নরমাল ব্লগের চাইতে ৭০-৯০ গুন বেশি দ্রুত গতি সম্পন্ন হয়। মোট কথা হচ্ছে একটি ওয়েবসাইটকে মোবাইলে দ্রুত লোড নেওয়াটা হচ্ছে AMP এর কাজ। তবে এএমপি মোবাইল ব্যাতীত অন্য কোন ডিভাইসে কাজ করে না।

AMP কিভাবে কাজ করে?

AMP সাধারণত AMP HTML, AMP Javascripts, AMP Web Cache এই তিনটি অংশের সমন্বয়ে কাজ করে। একটি এএমপি যুক্ত ওয়েবসাইটে যত ধরনের কোডিং করা থাকুক না কেন মোবাইল থেকে সেই ওয়েবসাইট ভিজিট করার সময় AMP পূরো ওয়েবসাইটের একটি AMP HTML ভার্সন তৈরি করে নেয়। এএমপি যে সমস্ত কোড সাপোর্ট করে না সেই কোডগুলোকে একটি ওয়েবসাইট থেকে সরাসরি বাদ দিয়ে শুধুমাত্র প্রয়োজনীয় অংশগুলো রেখে AMP Web Cache এর মাধ্যমে পুরো ওয়েবসাইটকে অনেক দ্রুত গতি সম্পন্ন করে তুলে।

উপরের চিত্রে দেখুন. একটি ব্লগ বা ওয়েবসাইটে গুগল এএমপি যুক্ত করার পর, সেই ব্লগের এএমপি পোস্ট যখন গুগল সার্চ ইঞ্জিনে ইনডেক্স হয়, তখন গুগল সার্চ ইঞ্জিন তাদের সার্চ রেজাল্টে সেই ব্লগ পোস্টে এএমপি আইকনে যুক্ত করে সেটিকে এএমপি হিসেবে আলাদাভাবে সনাক্ত করে। আপনি হয়ত আগেও এ ধরনের পোস্ট গুগল সার্চে দেখেছেন কিন্তু তখন সেটি বুঝতে পারেননি। এই আইকনযুক্ত পোস্টগুলো মোবাইলে খুব দ্রুত লোড নেয়।

AMP এর সুবিধা কি?

• মোবাইল ভার্সনের স্পিড কয়েকগুন বৃদ্ধি পাবে। যার ফলে ভিজিটররা সহজে ব্লগ ভিজিট করতে পছন্দ করবে।
• ব্লগের স্পিড এবং এএমপি দুটি যেহেতু গুগল র‌্যাংকিং ফ্যাক্টর সেহেতু এসইও এর ক্ষেত্রে এএমপি ব্লগ অনেকাংশে প্রাধান্য পাবে।
• ব্লগের গতি বৃদ্ধি হওয়ার কারনের ব্লগে অর্গানিক ট্রাফিক গ্রো হবে।
• ব্লগ/ওয়েবসাইটের ভাউন্স রেট হ্রাস পাবে। ওয়েবসাইটের ভাউন্স রেট কমার সাথে সাথে র‌্যাংকিং বৃদ্ধি হবে।
• যে কোন ব্রাউজারে এএমপি ব্লগ অটোমেটিক এডজাস্ট হয়ে যাবে।
• এএমপি ওয়েবসাইট পুরোপুরি মোবাইল ফ্রেন্ডলি হয় বিধায় মোবাইল অপটিমাইজ করার কোন প্রয়োজন হবে না।
• এএমপি নিউজ সাইটের পোস্ট গুগল সার্চ ইঞ্জিনে খুব দ্রুত Index হয়।
• অভীজ্ঞদের মতে, এএমপি ওয়েবসাইটে নাকি High CPC এডসেন্স বিজ্ঞাপন শো হয়। যার ফলে এডসেন্স এর আয় বৃদ্ধি পায়। (নোটঃ তবে আমার কাছে মনে হয়নি)

কিভাবে ব্লগস্পট ব্লগে গুগল AMP যুক্ত করবেন?

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

কিভাবে ব্লগ পোস্টে AMP যুক্ত করবেন?

ব্লগের পোস্টে এএমপি যুক্ত করার জন্য আপনাকে অবশ্যই HTML and CSS বিষয়ে ধারনা থাকতে হবে। সিএসএস জানা না থাকলেও মিনিমাম এইচটিএমএল জানা থাকতে হবে। এইচটিএমএল বিষয়ে আপনার দক্ষতা থাকলে খুব সহজে একটি ব্লগ পোস্টে এএমপি যুক্ত করতে পারবেন।

ব্লগের পোস্ট এমএমপি করার জন্য আপনার ব্লগার থিমটি অবশ্যই এএমপি সাপোর্টেড হতে হবে। কারণ ব্লগের থিম এএমপি সাপোর্ট না করলে ব্লগের পোস্ট এএমপি করে কোন লাভ হবে না। অনলাইনে ফ্রিতে অনেক ভালোমানের এএমপি থিম পাওয়া যায়। আপনি চাইলে সেগুলো ডাউনলোড করে ইনস্টল করে নিতে পারেন।

ব্লগের পোস্ট AMP করার জন্য পোস্টের ভীতরের বিভিন্ন ট্যাগ, ইমেইজ, ভিডিও এবং এডসেন্স কোড পরিবর্তন কতে হয়। যেমন- AMP tags for AMP Image, AMP Video, AMP Adsense Ads, এগুলো পরিবর্তন করলে একটি পোস্ট এএমপি হয়ে যায়।

ব্লগের পোস্ট HTML মুডে অন করা

গুগল ব্লগস্পটের পোস্ট এএমপি করার জন্য প্রথমে আপনার পোস্টটি Compose মুড হতে HTML মুডে অন করতে হবে। HTML মুডে অন করার পর একটি পোস্টের যাবতীয় কোড দেখতে পাবেন।

আপনার ব্লগের যে পোস্ট এএমপি করতে চান সেই পোস্ট অপেন করে উপরের চিত্রের তীর চিহ্নিত অংশের HTML এ ক্লিক করলে পোস্ট এইচটিএমএল মুডে অন হবে এবং পোস্টের যাবতীয় কোড দেখতে পাবেন। এই কোডগুলোর আংশিক পরিবর্তন করে একটি পোস্টকে এএমপি করতে হবে।

উপরের চিত্রের ভালোভাবে লক্ষ্য করুন, পোস্টের ভীতরের সবার উপরে এক লাইনের একটি কোড রয়েছে। আপনার প্রত্যেকটি পোস্ট অপেন করার পর পোস্টের উপরে <div dir="ltr" style="text-align: left;" trbidi="on"> কোডটি দেখতে পাবেন। প্রথমে আপনাকে এই কোডটি পরিবর্তন করতে হবে। এএমপি অপটিমাইজ করার জন্য উপরের কোডটি ডিলিট করে নিচের কোডটি যুক্ত করতে হবে।

 HTML
<div data-amp-style="text-align: left;" dir="ltr">

আপনি যদি HTML সম্পর্কে অভীজ্ঞ হন, তাহলে একটি নতুন পোস্ট তৈরি করার সময় ব্লগার পোস্ট এ্যাডিটরে টাইপ না করে এইচটিএমল মুডে অন করে নিচের কোডগুলোতে আপনার যাবতীয় লেখা টাইপ করে দিলে পোস্ট এএমপি হয়ে যাবে। তবে না করতে পারলেও কোন সমস্যা নেই, ম্যানুয়ালি করতে পারবেন।

 HTML
<div data-amp-style="text-align: left;" dir="ltr">
This is your blog post paragraph
<br />
<h2>This is Heading 2</h2>
<div>Type your Heading 2 paragraph here</div>
<h3>This is Heading 3</h3>
<div>Type your Heading 3 paragraph here</div>
<h4>This is Heading 4</h4>
<div>Type your Heading 4 paragraph here</div>
</div>

উপরের সবগুলো কোডের Paragraph অংশে আপনার পোস্টের সকল আর্টিকেল লিখে দিলেই আপনার পোস্টটি এএমপি হয়ে যাবে। তবে আপনার ব্লগের পোস্টে যদি বিভিন্ন ধরনের ছবি, ভিডিও, ইউটিউব Embedded ভিডিও এবং এডসেন্স কোড থাকে, তাহলে সেগুলোকেও এএমপি করতে হবে।

ব্লগ পোস্টের ছবি AMP

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

 HTML
<amp-img
    src="https://1.bp.blogspot.com/your-image-link.png"
    width="530"
    height="300"
    layout="responsive">
</amp-img>

এই কোডটি দিয়ে আপনার পোস্টের ইমেজ এএমপি করে নিতে পারবেন। এখানে শুধুমাত্র ইমেইজ এর লিংক এর স্থলে আপনার পোস্টের প্রয়োজনীয় ছবির লিংকটি যুক্ত করে দিতে হবে। তাছাড়া চাইলে ছবির Height and Width পরিবর্তন করতে পারবেন। এভাবে আপনার পোস্টের যে জায়গায় ছবি যুক্ত করার প্রয়োজন সব জায়গাতে ছবি যুক্ত করে নিতে পারবেন।

ব্লগ পোস্টের ভিডিও AMP

অনেক সময় ব্লগের প্রয়োজনে বিভিন্ন জায়গাতে ভিডিও যুক্ত করা প্রয়োজন পড়ে। বেশিরভাগ ক্ষেত্রে আমরা পোস্টের ভীতরে Embedded ইউটিউব ভিডিও শেয়ার করে থাকি। নরমালি আমরা যে ইউটিউব ভিডিও পোস্টে শেয়ার করি, সেটি এএমপি সাপোর্টেড নয়। ইউটিউব ভিডিও এএমপি সাপোর্টেড করার জন্য নিচের কোডটির মাধ্যমে ভিডিও যুক্ত করে নিতে হবে।

 HTML
<amp-youtube
    data-videoid="mGENRKrdoGY"
    layout="responsive"
    width="480"
    height="270">
</amp-youtube>

এই কোডের data-videoid এর এই mGENRKrdoGY জায়গাতে আপনার ইউটিউব ভিডিও এর আইডি বসিয়ে দিতে হবে। আপনি যে ভিডিও পোস্টে শেয়ার করতে চান, সেই ভিডিও এর লিংকে ভিডিও এর আইডি দেখতে পাবেন। প্রতিটা ইউটিউব ভিডিও এর লিংকে ইউনিক আইডি থাকে।

এএমপি এডসেন্স এড

গুগল এডসেন্স বিজ্ঞাপন আপনার ব্লগের যে জায়গাতে যুক্ত করা থাকুক না কেন, এএমপি পোস্ট লোড নেওয়ার সময় নরমাল এডসেন্স কোডগুলো এএমপি পোস্টে শো হবে না। এ জন্য যে বিজ্ঞাপন আপনার এএমপি পোস্টে দেখাতে চান সেটি এএমপি ফরমেটে সেট করে দিতে হবে। এএমপি পোস্টে শুধুমাত্র এএমপি বিজ্ঞাপন শো হবে, অন্য কোন বিজ্ঞাপন শো হবে না।

 HTML
<amp-ad
    layout="fixed-height"
    height="90"
    type="adsense"
    data-ad-client="ca-pub-12345678910111213"
    data-ad-slot="12345678910">
</amp-ad>

 HTML
<amp-ad
    height="90"
    width="200"
    type="adsense"
    data-ad-client="ca-pub-12345678910111213"
    data-ad-slot="12345678910">
</amp-ad>

উপরের দুটি কোডের মধ্যে প্রথমটি হচ্ছে Responsive বিজ্ঞাপন এবং পরেরটি হচ্ছে লিংক বিজ্ঞাপন। এখানে আপনার এডসেন্স একাউন্টের পাবলিশার আইডি ও বিজ্ঞাপন আইডি বসিয়ে দিতে হবে। এই কোডটি আপনার ব্লগের যেকোন জায়গাতে যুক্ত করতে পারবেন। ব্লগের যে জায়গাতে বাসবেন কেবলমাত্র এএমপি পোস্টে সেই বিজ্ঞাপন শো হবে। কম্পিউটার দিয়ে ভিজিট করার সময় এই বিজ্ঞাপন শো হবে না।

সাহায্য জিজ্ঞাসা

আসলে এগুলো ওয়েব ডিজাইনের একটি অংশ। যারা ওয়েব ডিজাইন বা ডেভেলপমেন্ট ভালো বুঝেন, তাদের জন্য এগুলো খুব সহজ কাজ। আর যারা আমার মত ওয়েব ডিজাইন সম্পর্কে কম বুঝেন, তাদের জন্য এই কাজটি করতে ঝামেলা পোহাতে হতে পারে।

আমি এই বিষয়টি সবচাইতে সহজভাবে উপস্থাপন করার সর্বাত্মক চেষ্টা করেছি। প্রত্যেকটি অংশ মনোযোগ দিয়ে প্রেকটিস করলে আশাকরি আপনাদের বুঝতে কোন সমস্যা হবে না। কোন অংশ বুঝতে বা ব্লগে এপ্লাই করতে সমস্যা হলে আমাদেরকে কমেন্ট করে জানাতে পারেন। এএমপি ব্লগস্পট ব্লগে যুক্ত করার বিষয়টি আমরা আরো সহজভাবে আপনাকে বুঝানোর চেষ্টা করব।

---

POST VIEWSl

Next Post Prev Post