021-71053903 [email protected] پشتیبانی از شنبه تا چهارشنبه ساعت 9 الی 16

افزودن Meta تگ ها به قالب های HTML جنگو

افزودن Meta تگ ها به قالب های HTML جنگو

مقدمه

با سلام خدمت تمامی شما مخاطبین خوب وبسایت پایتونی ها با یک مقاله آموزشی دیگه در خدمت شما دوستان هستیم تا باهم تگ ها HTML و مربوط به Seo محتوای خاص پیج ها رو چک کنیم در ادامه این آموزش خواهید دید که چگونه می توان با استفاده از این تگ ها چطور می توانیم به بهبود وبسایت خود کمک کنیم.

متا تگ ها چیست؟

متا تگ ها عناصر HTML هستند <meta>که حاوی متادیتا یا داده های مربوط به صفحه وب هستند.

این داده ها شامل اطلاعاتی مانند توضیحات و دیدگاه صفحه است.

 

متا تگ ها چگونه به نظر می رسند؟

مثال متا تگ توضیحات

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" content="This page is about...">
  </head>

</html>

تمام متا تگ ها در <head>عنصر قرار دارند و  تگ های HTML در حال بسته شدن ندارند.

اکثر متا تگ ها از فرمت داشتن یک nameمقدار مشخصه و به دنبال آن یک مقدار مشخصه پیروی می contentکنند.

 

چرا متا تگ ها مهم هستند؟

متا تگ ها به مرورگرها و موتورهای جستجو کمک می کنند تا هدف اصلی صفحه وب و نحوه نمایش آن در نتایج موتورهای جستجو را تعیین کنند.

آنها همچنین اطلاعات مورد نیاز برای نمایش صفحه را به عنوان پیوند در پلتفرم های رسانه های اجتماعی ارائه می دهند.

به عنوان مثال، عنوان و متن توضیحاتی که در نتایج جستجوی گوگل مشاهده می شود، همان عنوان و متن ارائه شده در متا تگ ها هستند.

متا تگ های پایه

هر قالب HTML باید یک <head>عنصر با این متا تگ های اساسی داشته باشد.

 

متا تگ مجموعه کاراکتر

متا تگ مجموعه کاراکترها در عنصر head

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

</html>

 

متا تگ مجموعه کاراکتر یکی از متا تگ های زیادی است که در عنصر head استفاده می شود.

این متا تگ خاص مجموعه کاراکترهای سند HTML را تعیین می کند.

مجموعه کاراکتر مشخص شده utf-8رمزگذاری ترجیحی برای صفحات وب است و به اکثر کاراکترها، علائم نقطه گذاری و نمادها اجازه می دهد به درستی در صفحه وب ارائه شوند.

 

متا تگ دیدگاه

متا تگ Viewpoint در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  </head>

</html>

متا تگ viewpoint دستورالعمل هایی را در مورد تغییر اندازه محتوای صفحه وب برای دستگاه های با اندازه های مختلف به مرورگر ارائه می دهد.

تنظیم widthشده است تا عرض صفحه را تقلید کند در حالی که initial-scaleسطح بزرگنمایی صفحه را تنظیم می کند.

این یک متا تگ مهم برای سازگاری موبایل و دستگاه است.

 

عنصر عنوان

عنصر عنوان در عنصر سر

<!doctype html>
<html lang="en">
    
  <head>
    <title>Title of Page</title>
  </head>

</html>

اگرچه یک متا تگ نیست، اما <title>اغلب با متا تگ گروه بندی می شود زیرا در <head>عنصر قرار دارد و اطلاعاتی را در اختیار مرورگرها و پلتفرم های رسانه های اجتماعی قرار می دهد.

این عنوان همچنین همان چیزی است که در تب مرورگر هنگام حضور کاربر در سایت ظاهر می شود.

 

 

متا تگ توضیحات

متا تگ توضیحات در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" content="This article is about...">
  </head>

</html>

بعد متا تگ توضیحات است. متا تگ توضیحات خلاصه ای توصیفی از صفحه وب را ارائه می دهد.

این یک قطعه کوچک از متن است که فقط در نتایج موتورهای جستجو و پست های رسانه های اجتماعی نشان داده می شود. در صفحه نمایش داده نمی شود.

توضیحات باید در عبارات یا جملات کامل نوشته شود تا به توضیح محتوای صفحه کمک کند.

 

 

مثال با تمام متا تگ های اساسی

تمام متا تگ های اصلی در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Page</title>
    <meta name="description" content="This page is about...">
  </head>

</html>

در بالا یک الگوی اولیه وجود دارد که شامل تمام متا تگ های اساسی مورد نیاز در یک <head>عنصر است.

باز هم، اینها باید در هر صفحه HTML باشد و محتوای صفحه وب را به اندازه کافی نامگذاری و توصیف کند.

 


 

نحوه استفاده از متا تگ های شبکه های اجتماعی

سایت های رسانه های اجتماعی دارای مجموعه متفاوتی از متا تگ ها هستند که برای نمایش لینک های وب سایت شما استفاده می کنند.

متا تگ های پروتکل Open Graph صفحات وب را به یک شی در یک نمودار اجتماعی تبدیل می کند. این برچسب‌ها باعث می‌شوند که صفحه وب مانند هر شی دیگری در آن پلتفرم رسانه اجتماعی خاص عمل کند.

پروتکل Open Graph اکثر پلتفرم های رسانه های اجتماعی از جمله فیس بوک، توییتر و پینترست را پوشش می دهد.

به خاطر داشته باشید که متا تگ های رسانه های اجتماعی معمولاً فقط به مقالات یا صفحات محصولی که در یک سایت رسانه اجتماعی به اشتراک گذاشته می شوند اضافه می شوند.

 

متا تگ توضیحات

متا تگ توضیحات در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <title>Title of Article</title>
  </head>

</html>

عنصر عنوان ثابت خواهد ماند.

 

متا تگ عنوان Graph را باز کنید

متا تگ عنوان Graph را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:title" content="Title of Article">
  </head>

</html>

مقدار ویژگی ویژگی og:titleدرست مانند عنصر عنوان معمولی کار می کند، اما تمرین خوبی است که هر دو را در بر بگیرد.

 

متا تگ توضیحات نمودار را باز کنید

متا تگ Graph description را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="description" property="og:description" content="This article is about...">
  </head>

</html>

مقدار ویژگی ویژگی  og:descriptionفقط باید به متا تگ توضیحات موجود اضافه شود.

 

متا تگ نوع Graph را باز کنید

متا تگ Graph type را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:type" content="article" >
  </head>

</html>

ویژگی og:typeنوع پیوندی را که شما به اشتراک می گذارید، توصیف می کند. انواع متداول عبارتند از وب سایت، مقاله، وبلاگ، شرکت و تصویر.

 

متا تگ تصویر Graph را باز کنید

متا تگ تصویر Graph را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:image" content="https://...image.jpg">
  </head>

</html>

ارزش ویژگی ویژگی  og:imageبه پلتفرم های رسانه های اجتماعی اجازه می دهد تا URL تصویر مقاله/محصول ارائه شده در مقدار ویژگی محتوا را به راحتی پیدا کنند.

 

متا تگ alt تصویر Graph را باز کنید

متا تگ alt تصویر Graph را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:image:alt" content="This is a description of the image.">
  </head>

</html>

مقدار مشخصه ویژگی  og:image:url به افراد کم بینا اجازه می دهد تا توصیفی از تصویر مورد استفاده در پست داشته باشند.

 

متا تگ URL Graph را باز کنید

متا تگ URL Graph را در عنصر head باز کنید

<!doctype html>
<html lang="en">
    
  <head>
    <meta property="og:url" content="https://.../article-slug">
  </head>

</html>

مقدار ویژگی ویژگی  og:url، آدرس URL مقاله/محصول در وب سایت شما است.

 

متا تگ کارت توییتر

متا تگ کارت توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:card" value="summary">
  </head>

</html>

متا تگ کارت توییتر نوع کارتی را که توییتر برای نمایش لینک شما استفاده می کند مشخص می کند. مقدار می تواند "summary""summary_large_image""app", یا "player".

 

مثال با تمام متا تگ های OG

تمام متا تگ های اولیه OG در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Article</title>
    <meta property="og:title" content="Title of Article">
    <meta name="description" property="og:description" content="This article is about...">
    <meta property="og:type" content="article" >    
    <meta property="og:image" content="https://...image.jpg">
    <meta property="og:image:alt" content="A picture of the mountains.">
    <meta property="og:url" content="This is a description of the image.">
    <meta name="twitter:card" value="summary">
  </head>

</html>

اینگونه است که تمام متا تگ های OG اولیه و متا تگ مورد نیاز توییتر باید در عنصر head ظاهر شوند.

 


 

متا تگ ها برای توییتر

اگر به دنبال اضافه کردن متا تگ های بیشتر توییتر به غیر از نوع کارت توییتر هستید، متا تگ های مخصوص توییتر را در زیر اضافه کنید.

این متا تگ ها در اسناد توسعه دهنده توییتر یافت می شوند .

 

متا تگ کارت توییتر

متا تگ کارت توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:card" content="summary_large_image">
  </head>

</html>

خلاصه توییتر هنوز باید اضافه شود.

 

متا تگ سایت توییتر

متا تگ سایت توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:site" content="@publisher_handle">
  </head>

</html>

سپس می توانید متا تگ سایت توییتر را اضافه کنید. این دسته توییتر وب سایت است.

 

متا تگ خالق توییتر

متا تگ خالق توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:creator" content="@author_handle">
  </head>

</html>

همچنین می‌توانید نام کاربری سازنده یا نویسنده محتوا را با متا تگ خالق توییتر اضافه کنید.

 

متا تگ عنوان توییتر

متا تگ عنوان توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:title" content="Title of Article">
  </head>

</html>

مقدار twitter:titleمشخصه name را می توان در مرحله بعد اضافه کرد. این فقط عنوان صفحه است.

 

متا تگ توضیحات توییتر

متا تگ توضیحات توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:description" content="This article is about...">
  </head>

</html>

مقدار twitter:descriptionمشخصه name درست مانند متا تگ توضیحات Open Graph عمل می کند.

 

متا تگ تصویر توییتر

متا تگ تصویر توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:image" content="https://...image.jpg">
  </head>

</html>

مقدار twitter:imageویژگی name با URL تصویر به عنوان مقدار ویژگی محتوا اضافه می شود.

 

متا تگ alt تصویر توییتر

متا تگ alt تصویر توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta name="twitter:image:alt" content="This is a description of the image.">
  </head>

</html>

در نهایت، ایده خوبی است که twitter:image:altمقدار ویژگی نام را به یک متا تگ اضافه کنید، زیرا به انتقال ماهیت تصویر به افراد کم بینا کمک می کند.

 

مثال با تمام متا تگ های توییتر

همه متا تگ های اساسی توییتر در عنصر head

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title of Article</title>
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="@publisher_handle">
    <meta name="twitter:creator" content="@author_handle">
    <meta name="twitter:title" content="Title of Article">
    <meta name="twitter:description" content="This article is about...">
    <meta name="twitter:image" content="https://...image.jpg">
    <meta name="twitter:image:alt" content="This is a description of the image.">
  </head>

</html>

تمام متا تگ های توییتر باید در عنصر head به این صورت باشد.

 


 

چگونه متا تگ ها را به قالب HTML جنگو اضافه کنیم

دو مورد از مزایای فراوان استفاده از چارچوب وب جنگو، تگ توسعه یافته و مدل های داخلی است.

تگ Django extends را می توان برای گسترش <head>عنصر به چندین قالب HTML استفاده کرد در حالی که مدل های جنگو به توسعه دهنده اجازه می دهد از همان الگوی HTML برای چندین شی مدل استفاده کند.

این بدان معناست که می توانید از همان <head>کد عنصر پایه برای همه صفحات مقاله در سایت خود با استفاده از همان چند خط کد استفاده کنید.

 

قبل از ادامه …

اگر مطمئن نیستید که چگونه از افزونه های جنگو استفاده کنید، مقاله نحوه استفاده از تگ های Extends و گنجاندن الگوی جنگو را بررسی کنید.

اگر نیاز به یادگیری نحوه استفاده از یک الگوی HTML برای چندین شی مدل دارید، Django II: Creating a blog را در دوره آموزشی ساختن یک برنامه وب جنگو بررسی کنید .

هنگامی که تگ قالب Django extensions را پیاده سازی کردید و یک مدل جنگو برای صفحه مقاله/محصولات خود ایجاد کردید، سپس می توانید از این دو با هم برای بارگذاری پویا در متا تگ های خود استفاده کنید.

 

متا تگ های جنگو

تگ های متا با استفاده از فیلدهای شی مدل جنگو

<!doctype html>
<html lang="en">
    
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{object.title}}</title>
    <meta property="og:title" content="{{object.title}}">
    <meta name="description" property="og:description" content="{{object.content|striptags|truncatewords:20}}">
    <meta property="og:image" content="{{object.image_field.url}}">
    <meta property="og:image:alt" content="{{object.image_alt}}">
    <meta property="og:url" content="https://www.website.com/{{object.slug}}">
    <meta name="twitter:card" value="summary">
  </head>
  <body>

    {% block content %}

    {% endblock %} 

  </body>

</html>

هر فیلد شی مدل را به متا تگ مناسب اضافه کنید. با توجه به اینکه header.html به آن الگوی HTML گسترش یافته است،  این فیلدهای شی مدل دقیقاً مانند قالب article.html اضافه می شوند.

تنها چیزی که باید از آن آگاه بود نحوه بارگذاری توضیحات متا تگ بر اساس محتوای مقاله است.

شما باید دو فیلتر داخلی اضافه کنید: |striptagsو |truncatewords.

striptagsفیلتر تمام تگ های HTML را از متن حذف می کند در حالی که truncatewordsتعداد کلمات موجود در رشته را محدود می کند.

با اضافه شدن موارد، توضیحات ارائه شده در پلتفرم های رسانه های اجتماعی و مرورگرهای وب به صورت متن ساده و تنها چند خط اول مقاله خواهد بود.

باز هم، کد بالا تنها در صورتی قابل پیاده سازی است که از تگ الگوی گسترش جنگو در کنار مدل های جنگو استفاده شود.

 

حسابداری برای سایر قالب ها

با توجه به اینکه هر قالب HTML جنگو می‌تواند همان header.html را گسترش دهد، باید دستور if و else را به عنصر head اضافه کنید،  اما هر قالبی در یک شی مدل بارگیری نمی‌شود.

 

به عنوان مثال، به الگوی صفحه اصلی در پروژه جنگو فکر کنید.

صفحه اصلی احتمالاً در همان فایل header.html بارگیری می  شود،   اما یک مقاله نیست، بنابراین هیچ یک از متا تگ هایی که در بالا اضافه کردیم کار نمی کند .

 

یک شرط if/else را به عنصر head اضافه کنید

تگ های متا با استفاده از فیلدهای شی مدل جنگو

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

    {% if object.slug in request.path %}
    <title>{{object.title}}</title>
    <meta property="og:title" content="{{object.title}}">
    <meta name="description" property="og:description" content="{{object.content|striptags|truncatewords:20}}">
    <meta property="og:image" content="{{object.image_field.url}}">
    <meta property="og:image:alt" content="{{object.image_alt}}">
    <meta property="og:url" content="https://www.website.com/{{object.slug}}">
    <meta name="twitter:card" value="summary">

    {% elif request.path == '/' %}
    <title>Homepage Title</title>
    <meta name="description" content="This is the description for the homepage.">

    {% else %}
     <title>Another Title</title>
     <meta name="description" content="This is the description ...">
    {% endif %}

  </head>
  <body>

    {% block content %}

    {% endblock %} 

  </body>

</html>

برای حل این مشکل، دستور if را {% if  object.slug in request.path %}قبل از متا تگ مقاله اضافه کنید.

سپس عبارت else if را {% elif request.path == '/' %}بعد از آن با متا تگ های صفحه اصلی اضافه کنید.

به تعداد مورد نیاز عبارت های دیگری اضافه کنید تا تمام صفحات مختلف سایت شما را پوشش دهد، مطمئن شوید که هر صفحه متا تگ های منحصر به فرد خود را دارد.

در نهایت یک عبارت else اضافه کنید که به صفحه باقیمانده متا تگ متفاوتی بدهد و شرط if را پایان دهید.

محمدرضا حسنی

224 مطلب منتشر شده

دانش آموخته رشته فناوری اطلاعات / موسس پایتونی ها

درباره این مطلب نظر دهید !

مطالب پرمخاطب پایتونی ها

محصولات فروش پایتونی ها

%60
تخفیف

آموزش فیگما (Figma)

30,000 تومان
2