متا تگ های مهم در طراحی سایت

در قسمت Head پرونده های HTML از تگ های متا برای قرار دادن کدهای بخصوص هنگام طراحی سایت استفاده می شود.تگ های متا در ظاهر سایت نشان داده نمی شوند اما در عوض مرورگرها و خزنده های موتورهای جستجو قادر به دیدن و خواندن آنها هستند.

عناصر متا معمولا برای اضافه کردن دستورالعمل های اضافی به وب سایت و راحت تر کردن آنالیز فایلهای HTML در طراحی سایت استفاده می گردند.ساختار تمام کدهای meta در HTML معمولا یکسان است : ابتدا یک اِلِمان تعریف می شود سپس محتوایی به آن اختصاص داده می شود.فرمول ایجاد یک metadata به صورت زیر است :

<meta name="Name of element" content="assigned index"/>

هرچند که یکی اصلی ترین اهداف استفاده از تگ های meta هنگام طراحی سایت رساندن اطلاعات به موتورهای جستجو در جهت سئو و بهینه سازی سایت بوده است اما در سال های اخیر به تدریج از تاثیر این metadata ها بر روند بهینه سازی سایت کاسته شده است.با این حال به طراحان سایت همچنان توصیه می شود از این تگ ها در بخش Head کدهای HTML استفاده کنند چرا که تاثیر آن ها بر سئو بطور کامل از بین نرفته و از طرفی وجود آنها ضرری برای سایت ندارد.ضمنا تگ ها متا می توانند دستورالعملی جهت کنترل خزنده ها و بات های جستجوگر تعریف کنند که برای بعضی مقاصد مفید است.

یک لیست بلندبالا از اِلِمان هایی که می توان هنگام طراحی سایت در قسمت Head کدهای HTML قرار داد وجود دارد.علاوه بر اطلاعات ضروری مانند عنوان صفحه (Page Title) ، توضیحات صفحه (Page Description) و تعریف نوع کارکترهای صفحه (Charset) ، قسمت Header می تواند اطلاعات جامع تری نیز در اختیار مروگرها یا ربات ها و خزنده های دنیای آنلاین قرار دهد.می توان از تگ های متا برای تعریف عبارات کلیدی و یا مشخص کردن موضوعی خاص برای صفحات وب سایت استفاده نمود.بعلاوه نویسندگان محتوای سایت نیز می توانند از تگ های متا برای ذخیره اطلاعات مربوط به قوانین کپی رایت استفاده نمایند.

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

1- عنوان (Ttile)

باید تاکید کرد تگ title یک تگ مستقل در HTML محسوب میشود نه یک تگ متا. اما از آنجایی که عنوان (title) صفحه در ارتباط با رفتار مرورگرها و خزنده ها است از این رو در اغلب مواقع وابسته به metadata ها در نظر گرفته می شود.title به عنوان یکی از عناصر اصلی در بخش head کدهای HTML ، معمولا قبل از تگ های متا نوشته می شود.زمانی که مرورگر این تگ را می خواند از متن داخل برای مشخص کردن عنوان صفحه های bookmark شده و عنوان tab در مرورگر استفاده می نماید. از طرفی تگ title به عنوان یکی از فاکتورهای مهم و موثر در سئو و بهینه سازی سایت به حساب می آید و از این رو در بهتر شدن جایگاه سایت در موتورهای جستجو مانند گوگل نقش مهمی دارد.به منظور بهینه سازی سایت و تاثیر مثبت در فرایند SEO باید توجه داشت که متن داخل تگ tite از 55 کارکتر بیشتر نشود.همچنین پیشنهاد می شود عبارت کلیدی اصلی صفحه وب سایت نیز در متن آن گنجانده شود. نمونه ای از تگ title که جهت بهینه سازی سایت برای موتورهای جستجو در بخش head کدهای HTML قرار می گیرد به صورت زیر است :

<title> متا تگ های مهم در طراحی سایت | آوینا پرداز</title>

2- رمزگذاری کارکتر (Character encoding) :

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

<meta charset="utf-8"/>

3- شرح (Description) :

تگ شرح که به نام  meta description شناخته می شود در حقیقت فضایی است برای یک توضیح مختصر در مورد محتوای صفحه.زمانی که موضوعی را در گوگل جستجو می کنید، در صفحه اعلام نتایج، در زیرِ عنوان سایت هایی که در صفحه گوگل به شما پیشنهاد می شود یک یا دوخط شرح مختصر در مورد موضوع آن صفحه نوشته شده.این متن معمولا همان متن درون تگ description است که توسط خزنده های موتورهای جستجو خوانده و به نمایش داده می شود.بنابراین جهت بهبود سئو سایت این در نوشتن این متن دقت لازم را به عمل آورید.شرح هر صفحه تاثیر زیادی در کلیک کردن مخاطب دارد اگر شرح و توضیح نوشته شده برای صفحه از نظر کاربر مناسب و تا حدودی جذاب باشد روی آن کلیک خواهد کرد و از این رو تاثیری مستقیم بر بهبود روند بهینه سازی سایت دارد.نمونه ایی از کد meta description در زیر آورده ایم :

<meta name="description" content="طراحی سایت فروشگاه اینترنتی کاری بسایر تخصصی است که نیاز به مهارت ، تجربه و شناخت کافی از رفتار مخاطب و موتورهای جستجو دارد.در این میان از اهمیت سئو سایت فروشگاهی نیز نباید غافل شد."/>

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

4- کلمات کلیدی (Keywords)

از طریق تگ meta keywords می توان عبارات کلیدی اصلی وب سایت را برای موتورهای جستجو تعریف کرد.در واقع موتورهای جستجو از تگ keyword استفاده می کنند تا تطبیق عبارتی که کاربر جستجو کرده با صفحه وب سایت را بهتر انجام دهند و نتایج مرتبط تری را برای کاربران به نمایش در بیاورند.هرچند باید گفت در سال های اخیر بدلیل سئو استفاده هایی که از این تگ انجام شد، موتورهای جستجوی بزرگ مانند گوگل تاثیر meta keyword بر سئو و بهینه سازی سایت را بسیار کاهش دادند تا جایی حتی برخی از متخصصان سئو عقیده دارند meta keyword ها دیگر تاثیری بر SEO سایت ندارد.اما به عقیده ما اگر هم استفاده از meta keyword تاثیر مثبتی در بهینه سازی سایت نداشته باشد مطمئنا خالی گذاشتن آن تاثیر منفی خواهد داشت.

بهتر است برای هر صفحه عبارت کلیدی مربوط به همان صفحه استفاده شود و کلمات کلیدی بدون ارتباط با موضوع صفحه در این بخش گنجانده نشود.در این تگ هر کلمه کلیدی از طریق یک ویرگول از دیگر کلمات جدا می شود.نمونه ای از meta keyword در زیر آمده است :

<meta name="keywords" content="طراحی سایت ارزان,قیمت طراحی وب سایت"/>

5-مولف و کپی رایت (Author and Copyright) :

تگ های متای “Author” و “Copyright” را می توان در سورس کدهای HTML هنگام طراحی سایت قرار داد.از این تگ ها برای دخیره اطلاعاتی مانند اینکه چه کسی محتوای سایت را تالیف کرده و حق امتیاز(کپی رایت( آن متعلق به چه کسی یا چه شرکتی است استفاده می گردد. استفاده از این تگ ها انتخابی است و ضرورتی ندارد اما مانند همیشه باید بگوییم استفاده از آنها بهتر از خالی گذاشتنشان است.

<meta name="author" content="دپارتمان طراحی سایت شرکت آوینا پرداز" />

<meta name="copyright" content="آوینا پرداز آریا" />

6- دستور عمل برای خزنده های اینترنت (ربات ها) :

یکی از عملکردهای اصلی تگ های متا ایجاد دستورعمل هایی برای شاخص گذاری (index) صفحات است. این تگ ها برای این استفاده می شوند که به موتورهای جستجو اعلام کنند کدام صفحه در فهرست بندی موتورهای جستجو توسط خزنده ها شناسایی شود یا نشود.همچنین از طریق این تگ ها می توان مشخص نمود که لینک های خروجی سایت توسط رباتها یا خزنده ها دنبال شوند یا نادیده گرفته شوند.از این طریق این نوع تگ ها که به متا ربات (meta robots) شناخته می شوند یکی از بیشترین تگ های مرتبط با سئو و بهینه سازی سایت محسوب می شوند.

Index

برای اینکه به خزنده های موتورهای جستجو اجازه دهیم HTML صفحه را فهرست بندی یا ایندکس کند :

<meta name="robots" content="follow"/>

از آنجایی در حالت عادی موتورهای جستجو، بطور خودکار تمام صفحات را ایندکس می کنند استفاده از این کد ضرورتی ندارد.

Noindex

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

<meta name="robots" content="noindex"/>

شاخص “robot” در کد بالا اشاره به تمام ربات ها و خزنده های اینترنتی دارد اما این امکان نیز وجود دارد که ربات خاصی را نیز در این قسمت تعریف کرد.مثلا اگر میخواهید صفحه شما فقط توسط ربات گوگل ایندکس نشود می توانید از “googlebot” بجای “robots” استفاده نمایید.

Follow

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

<meta name="robots" content="follow"/>

Nofollow

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

<meta name="robots" content="nofollow"/>

تگ های متای index یا noindex و همچنین follow یا Nofollow  را می توان بصورت ترکیبی و باهم نیز استفاده کرد.برای مثال می توان از این تگ ها هنگام طراحی وب سایت بگونه ای استفاده نمود که به خزنده و رباتها اجازه داده شود که سایت را ایندکس کنند اما اجازه نداشته باشند لینک ها دنبال یا ردگیری کنند. به نمونه های زیر توجه کنید:

<meta name="robots" content="index,nofollow" />

<meta name="robots" content="index,follow" />

<meta name="robots" content="noindex,nofollow" />

معادلات HTTP (HTTP Equivalents) :

از طریق خاصیت “http-equiv”  متا تگ های HTML می توانند اطلاعاتی را در خود ذخیره کرده و وظایفی را انجام دهند.این اطلاعات که اغلب در بخش header http قرار می گیرند معمولا به عنوان جایگزین در صورتی که وب سرور (web server) بدرستی تنظیم نشده باشد در نظر گرفته می شوند.عموما header های HTTP نسبت به header های HTML دارای ارجحیت هستند.

1- کنترل ذخیره سازی (Cache control) :

بصورت عادی زمانی که وب سایتی را باز میکنیم اطلاعات آن در پروکسی سرور یا مرورگر ذخیره می شود.این امر باعث می شود در دفعات بعد وب سایت مورد نظر بسیار سریعتر بارگذاری شود مخصوصا اگر در طراحی سایت به میزان زیادی عکس یا کدهای CSS و جلوه های گرافیکی بکار رفته باشد این کار بسیار مفید می باشد.برای جلوگیری از دخیره شدن اطلاعات سایت در مروگر می توان از کد زیر استفاده نمود :

<meta http-equiv="cache-control" content="no-cache"/>

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

2- تاریخ های انقضا (Expires) :

بجای اینکه از طریق کدهای قبلی بطورکامل از ذخیره اطلاعات سایت در کَش (Cache) جلوگیری کنید می توانید برای این اطلاعات یک تاریخ انقضا تعیین کنید. برای این منظور از کد متای زیر استفاده می شود:

<meta http-equiv="expires" content="مدت زمان بکارگیری اطلاعات بر حسب ثانیه"/>

این تگ باعث می شود مدت زمان بکارگیری اطلاعات یا در واقع زمانی که پس از آن باید اطلاعات منقضی شوند مشخص گردد.وقتی که این زمان تعیین شد پس گذشت این زمان دیگر اطلاعات از کَش بارگذاری نمی شوند و مستقیما از منبع اصلی لود می گردند.برای اینکه در شرایطی محتوای سایت از server بارگذاری شود میتوان عدد 0 را انتخاب کرد و برای اینکه اطلاعات کش پس از 12 ساعت منقضی اعلام گردد باید این مقدار به ثانیه تبدیل نمود یعنی : 43200 ثانیه.

<meta http-equiv="expires" content="0"/>

<meta http-equiv="expires" content="43200"/>

بجای این کار می توان یک تاریخ مشخص برای انقضای اطلاعات معرفی کرد که باید بر اساس سیستم گرینویچ (GMT) نوشته می شود.

<meta http-equiv="expires" content="Sat, 07 Feb 2017 00:00:00 GMT"/>

3- بارگذاری مجدد (Refresh) :

متا تگ های حاوی شاخصه “http-equiv” را میتوان به عنوان روشی ساده برای Redirect کردن ( انتقال به آدرس اینترنتی دیگر) استفاده کرد.همانند تگ های قبل می توان به این تگ ها نیز یک تاریخ انقضا اختصاص داد.در صورتی که از این کد هنگام برنامه نویسی طراحی سایت استفاده شود مرورگرها و یا خزنده ها و ربات های اینترنتی به صورت خودکار به URL تعریف شده منتقل می شوند.مثال زیر نشان دهنده انجام انتقال به سایت آوینا پرداز پس از گذشت 15 ثانیه از زمان بارگذاری است :

<meta http-equiv="refresh" content="15; url=https://www.avinapardaz.com/"/>

ازنجایی که تگ refresh در برخی مرورگرها به خوبی کار نمی کند، کنسرسیوم جهانی وب (W3C) پیشنهاد کرده است که از نوعی از کدهای HTML به نام کدهای 301  بجای انتقال URL از طریق تگ های متا استفاده شود.

بطور کلی برای طراح سایت و کسی که خدمات مربوط به تولید و نگهداری وب سایت را انجام می دهند آشنایی با تگ های متا امری ضروری است. برخی از این تگ ها در گذشته اثر قابل توجهی در بهبود سئو سایت داشتند و از این تگ ها مانند تگ های keyword  و description استفاده های زیادی در جهت بهینه سازی سایت انجام می گرفت.هرچند امروزه تاثیر این تگ های متا مانند گذشته نیست اما بی توجهی به آنها و عدم آشنایی با کارکردشان قطعاً تاثیر منفی در جایگاه وب سایت شما در موتورهای جستجو خواهد گذاشت.