سمنتیک وب سایت یا وب معنایی چیست؟ این سوالی هست که من خودم باهاش برخورد کردم و به یه سری مطلب برخورد کردم. بهتر هست شما هم بدونید تا شاید توی طراحی برای سئو اثر بهتری بزاره.
توی سبک قدیم طراحی وب ما از المنتهای وب با این الگو استفاده می کردیدم که بر پایه table بود ، این نوع طراحی بسته ، محدود ، و ایرادات زیادی داشت(خودم من نزدیک به 10 سال با این سبک طراحی کردم) ، اینهم بخاطر ابزارهایی بود که استفاده می کردیم. بعد از مدتی با استفاده از css توی طراحی ها ما هم تغییر رو توی سورس بیشتر کردیم و از div توی طراحی استفاده کردیم. این سبک طراحی کمک شایانی توی کار انجام میداد ، بهترین فایده این سبک اینه که راحتت میشه با css کنترل کرد و با کمک فریم ورک های مرسوم علی الخصوص بوت استراپ میشه اون رو ریسپانسیو کرد.
حالا با تحقیق بیشتر دیدم که وقت تغییر رسید و ما هم باید تغییر جدید رو توی کد بزاریم ، این تغییر با نام وب معنایی یا سمنتیک وب مشهور است. توی این سبک شما در کد با بکار بردن المنتهای زیر می توانید وب سایت خود را از طریق کد و بدون خوانده شدن معنایی برای موتورهای جستجو کنید:
<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>
همانطور که می بینید ، این سبک طراحی برای فهماندن این است که هر محتوایی که در کد قرار می گیرد مربوط به چه نوع محتوایی می باشد. خوشبختانه جوملا با بروز رسانی خود این تغییرات رو اعمال کرده و شما لازم است فقط برای این کار در طراحی قالب خود تغییرات کوچکی ایجاد کرده و ساختار قالب خود را معناگرا کنید.
تگ | توضیحات |
---|---|
<article> | مشخص شدن مطلب یا مقاله |
<aside> | مشخص کردن ساید بار های سمت چپ و راست |
<details> | مشخص کردن جزئیاتی که کاربر دوست دارد نشان دهد یا مخفی کند. |
<figcaption> | ایجاد کپشن یا توضیحات برای یک figure تگ |
<figure> |
مشخص کردن محتوای وب شامل، تصاویر، نمودار، عکس ها، لیست کد، و غیره
|
<footer> | مشخص کردن فوتر مطلب یا سایت |
<header> | مشخص کردن هدر یا سر مطلب یا سایت |
<main> | مشخص کردن بخش اصلی یک مطلب |
<mark> | مارک کردن یا هایلایت کردن یک متن |
<nav> | مشخص کردن منو یا لینک های مرورگری |
<section> | مشخص کردن یک بخش از وب سایت |
<summary> |
مشخص کردن یک عنوان قابل مشاهده برای تک <details>
|
<time> | مشخص کردن تاریخ و زمان |
این تگ های را به طراحی خود اضافه کنید ، طراحی شما سمنتیک خواهد شد :-)
لیست کامل تر این تگ ها و کاربردش رو در لینک زیر ببینید :
لیست کامل تگ ها