ساختار سایت شما بر پایه کدهایی متنوع پایه ریزی و شکل داده شده است. از سیستم مدیریت محتوای وردپرس که بر پایه php کار می کند تا سایت هایی که بصورت دستی و با سایر زبان ها مانند ASP نوشته می شوند، همگی یک وب سایت کامل را شکل می دهند.
طراحی وب سایت شامل ۲ مرحله اساسی است:
- ساختاربندی اصلی صفحات وب که با Html نوشته می شود.
- اضافه کردن موارد ظاهری که با css صورت می پذرید.
کدهای html به عنوان زبان نشانه گذاری شناخته شده و اسکلت اصلی تمامی سایت ها را بوجود می آورند. html در واقع زبان برنامه نوسی نیست، بلکه برای نمایش محتوا در ساختاری از پیش تایین شده ایجاد شده و با کمک CSS ظاهر و شکل را به ارمغان می آورد.
موتورهای جستجو برای درک داده ها و ساختار صفحات و سایت، این کدها را می خوانند و بر اساس اطلاعاتی که در انها وجود دارد و قواعدی که تعریف می شود، می توانند نسبت به کاری که می خواهد صورت پذیرد تصمیم بگیرند. در این میان، ما با تگ هایی در Html طرف هستیم که با وجود مقادیری مشخص در آنها، موتورهای جستجو را برای درک بهتر و شناخت راحت تر کمک می کنند.
این متاتگ ها در ظاهر سایت هیچ نقشی ندارند و بطور خاص برای بات ها نوشته می شوند. به زبانی دیگر متاتگ ها، برچسب هایی برای موتورهای جستجو هستند تا درک درستی از صفحات و هدف شان را ارایه کنند. وجود این تگ ها برای سایت بسیار مهم و سرنوشت ساز هستند به شکلی که شناخت آنها برای سئو نیز حائز اهمیت است.
وجود تگ های <meta> در یک سند محتوا، حاوی متادیتای آن هستند که در صفحات Html مورد استفاده قرار می گیرند. در ادامه با اصطلاحات و انواع تگ های مهم در سئوی سایت آشنا می شویم.
متا دیتا – Metadata چیست؟
متادیتا به اطلاعاتی گفته می شود که که درباره سایر اطلاعات، داده هایی را به همراه می آورند. متادیتا ها را می توان بصورت دستی تولید کرد تا حاوی داده های دقیق تری باشند اما بشکل خودکار نیز برای موارد ساده تر استفاده می شوند. این اطلاعات در صفحات سایت برای مشخص شدن داده های توضیحی، ساختاری، منابع و آمار مورد استفاده قرار می گیرند.
تگ – Tag چیست؟
طراحی و ساخت یک وب سایت کامل، نیازمند استفاده از زبان های مختلف برنامه نویسی است که هیچکدام بجز Html برای مرورگرها قابل فهم نیست. پس یعنی مرورگر ها فقط کد ها و عناصری را نمایش می دهند که به وسیله Html نوشته شده باشند.
پس با یک زبان نشانه گذاری ابر متنی طرف هستیم که شامل بخش های مختلف به نام تگ است. هر کدام از این تگ ها دارای کاربرد و خواص منحصر بفردی بوده و به مرورگرها کمک می کنند تا متوجه شوند هر بخش از صفحه چه عنصری است و باید به چه صورت نمایش داده شود.
متا تگ چیست؟
متا تگ ها، همان کدهای HTML هستند که به موتورهای جستجو و کاربران کمک می کنند تا محتوای صفحات قابل درک باشند. از آنجاییکه متا تگ ها برای توصیف بهتر محتوا به کار گرفته می شوند، آنها را به جای قرار دادن در <body>، به قسمت <head> صفحه می بریم. این کدها در موفقیت و پیشبرد سئوی سایت بسیار ضروری هستند.
اهمیت متا تگ ها در چیست؟
متاتگ ها شامل داده های هستند که توسط موتور جستجو خوانده شده و همینطور برای افرادی که در جستجوی چیزی هستند نقش راهبردی دارند. اطلاعات موجود در این تگ ها مشخص کننده محتوایی است که کاربر می تواند در صفحه بدان دست پیدا کند و موتور جستجو نیز بر مبنی آن برای رتبه بندی تصمیم میگیرد. وقتی با انواع متاتگ های مهم در سئو آشنا شدید، با جایگاه این عناصر حیاتی بیشتر ارتباط خواهید گرفت.
در نظر داشته باشید که همه متاتگ های Html برای سئو قابل استفاده نیستند اما می توانید با راست کلیک بر روی هر صفحه ای قادر هستید تا با کلیک بر روی View Page Source، کدهای مهم را با داده هایی که دارد بررسی و مشاهده کنید.
آخرین بروزرسانی مستندات گوگل برای استفاده از متاتگ ها
گوگل در تاریخ 10 می 2022، مستندات جدید به عنوان سند راهنما برای استفاده از متادیتای معتبر در صفحه منتشر کرده است که پردازش نشانه‌گذاری های Html صفحات شما را تضمین می کند. گوگل سعی می کند این زبان نشانه گذاری را حتی زمانی که کدها نامعتبر یا ناسازگار باشند را درک کند اما اشتباهات در نشانه گذاری می تواند باعث ایجاد مشکل در وب سایت شما و همچنین در نتایج جستجو شود.
نکته: اگر از یک عنصر نامعتبر در رشته های Html استفاده کنید، گوگل هر عنصری را که بعد از قسمت نامعتبر ظاهر می شود را نادیده می گیرد.
آشنایی با متا تگ های سئو
همانطور که گفتیم، متا تگ های زیادی در Html وجود دارد که همه شان برای سئو کاربردی ندارند. به عنوان مثال کدهایی وجود داشته که حتی طی سالیان منقضی شده و دیگر کاربردی هم ندارند. به عنوان یک کارشناس سئو لازم است با این تگ ها و جدیدترین تغییرات در متاتگ ها آشنا شوید.
عناصر معتبر در <head>صفحه به شرح زیر است:
- title
- meta
- link
- script
- style
- base
- noscript
- template
عناصر نامعتبر در <head>صفحه به شرح زیر است:
- iframe
- img
- Any other HTML element
بررسی متا تگ های مورد نیاز برای سئو
1- متا تگ Title
<title>تگ عنوان</title>
این متاتگ به توصیف محتوای صفحه می پردازد. مقادیر این تگ در تب مرورگر و به شکا عنوان صفحه در نتایج جستجو به نمایش در می آید. این همان قسمتی است که یکی از مهم ترین سیگنال های رتبه بندی را بر حسب کلماتی که در آن قرار میگیرد، ارایه می کند. هرآنچه که در Title درج می شود باید با محتویات و ماهیت صفحه مرتبط باشد. مانند تیتر یک روزنامه که دلیل بر انتخاب برای خواندن نوشته های مربوطه می شود.
2- متا تگ Description
<meta name=”description” content=”شرح متای صفحه”/>
نقش شرح متای صفحه، همانطور که از نام اش پیداست، توصیف کوتاهی از چیزی است که در محتوا جریان دارد. پس حالا که یک کاربر موضوع صفحه را در تگ عنوان خواند، باید برای اطمینان از صحت اطلاعاتی که وجود دارد، شرح مختصری از نوشته را نیز مطالعه کند.
شما برای ترغیب مخاطب به کلیک برروی لینک صفحه تان که به نتایج رسیده است، با عنوان و شرح آن مجهز هستید. پس از بهترین و جذاب ترین اطلاعات که داده های حقیقی را به همراه دارد بهره ببرید. متا دسکریپشن باید صفحه را به خوبی توصیف کرده و به افزایش نرخ کلیک بیانجامد.
3- متا تگ Content Type
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
یکی از ضروری ترین تگ های صفحه که به بیان نوع کاراکترها می پردازد و عدم وجود مقادیر در این بخش، باعث بوجود آمدن مشکلات زیادی از جمله رندر می شود.
4- متا تگ Viewport
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”/>
به کمک متا تگ Viewport قادر خواهید بود تا چگونگی نمایش صفحات را در سایر دستگاه ها با صفحه نمایش های مختلف تنظیم کنید. استفاده می شود. وقتی مقادیر مناسب در تگ ذکر شده بدرستی قرار بگیرد، صفحه شما تجربه کاربری درست را برای همه مخاطبین به سرانجام می رساند.
5- تگ متن جایگزین تصویر – Alt
<img src=”http://example.com/seo.jpg” alt=”picture about seo” />
با یکی از مهم ترین ترین متا تگ های سئو آشنا شوید. استفاده از داده های مناسب در این بخش برای موتورهای جستجو بسیار حائز اهمیت بوده و کاربردهای فراوانی نیز دارد. هرچند امروزه با توسعه هوش مصنوعی و قدرت پردازش، موتور جستجوی گوگل می تواند عناصر و المان های تشکیل دهنده تصویر را بفهمد، با اینحال وجود این تگ را باید در چک لیست سئوی سایت قرار داد.
نکاتی برای نوشتن ویژگی شرح عکس با تگ Alt
- تصاویر را با نام های با معنی استفاده کنید
- متن جایگزین عکس باید کوتاه و مرتبط با محتوای نزدیک بخود باشد
- عکس های منحصر بفرد و واضح را بکار بگیرید به نحوی که شرح عکس با آیتم های آن منطبق باشد
- برای تصاویر از نقشه سایت استفاده کنید.
- کیفیت و کیفیت دو نوع متضاد هم هستند اما می توانند بصورت مناسب بکار گرفته شوند. عکس های با کیفیت ولی با حجم مناسب انتخاب کنید که برای مخطاب قابل شناخت باشد.
- تعداد حروف مورد نیاز در خصوصیت Alt بهتر است بین 50 تا 55 کاراکتر باشد.
6- متا تگ های بات ها – Robots Meta Tag
متا تگ نوفالو – nofollow
<META NAME=”robots” CONTENT=”nofollow”>
با استفاده از تگ نوفالو ه بات های گوگل می گویید که لینک یاد شده را دنبال نکنند. هرچند این بر عهده موتورهای جستجو است که لینکی را دنبال کنند یا نه، اما ارزشی از این مسیر انتقال داده نمی شود.
متا تگ نوایندکس – noindex
<META NAME=”robots” CONTENT=”noindex”>
این همان تگی است که باعث می شود موتورهای جستجو صفحه مورد استفاده شده را برای نتایج ایندکس نکنند. در واقع وقتی بات ها به این متا تگ برخورد کنند، دیگر برای ایندکس اقدام نخواهند کرد. اگر محتوایی دارید یا سایت شما صفحاتی دارد که نمی خواهید ایندکس شوند و یا جلوی این کار گرفته شود، بهترین راه بهره گیری از تگ فوق است.
7- متا تگ های شبکه های اجتماعی – Open Graph
کاربردی ترین و در عین حال پایه ثابت ترین انواع تگ ها در سایت، متا تگ OG است که به شما این امکان را می دهد تا با اشتراک گذاری محتوا در شبکه های اجتماعی، علاوه بر لینک، اطلاعات مفید دیگری مانند تصویر شاخص و شرح متای صفحه نیز برای کاربران نمایش داده شود.
<meta property=”og:type” content=”article” />
<meta property=”og:title” content=”title of page” />
<meta property=”og:description” content=”description of page” />
<meta property=”og:image” content=”link to image” />
<meta property=”og:url” content=”permalink” />
<meta property=”og:site_name” content=”site name” />
توییتر کارت – Twitter card
این تگ همانطور که از نام اش پیداست، فقط برای شبکه اجتماعی توییتر استفاده می شود که همان کارای og را دارد. با استفاده از این تگ، وقتی مخاطبین شما لینک صفحه را در توییتر اشتراک گذاری کنند، اطلاعات صفحه به شکلی که توصیف شده نمایش داده می شود.
<meta name=”twitter:title” content=”title of page”>
<meta name=”twitter:description” content=”description of page”>
<meta name=”twitter:image” content=”link to image”>
<meta name=”twitter:site” content=”@username”>
<meta name=”twitter:creator” content=”@username”>
آشنایی با تگ های هدر – Header Tags
تگ های هدر که برای ایجاد تیتر صفحات و داخل محتوا استفاده می شود، در سئو بسیار اهمیت دارند. تگ های هدینگ عبارتند از H1, H2, H3, H4, H5, H6 که مهم ترین انها تگ اچ1 نام دارد.
تگ های سمانتیک Html5
تگ های معنایی به موتور جستجو می کنند تا به داده ها و اطلاعات سایت دسترسی بهتری داشته باشند. این بدان معنی است که هم برنامه نویس و هم مرورگر از هرچیزی که در تگ ها قرار میگیرد مطلع هستند و برای همه کاملا مشخص است.
تگ های سمانتیک با ویژگی ها و کاربردهای فراوانی ارایه شده اند و نقش قابل توجهی در ساختار معنایی صفحات ایفا می کنند. به عنوان مثال همه ما می دانیم که در تگ <header> یا <footer> چه چیزهایی قرار میگیرد اما در تگ <span> تا زمانیکه اطلاعات وجود نداشته باشند و روی کل صفحه، برنامه کامل نشده باشد، نتیجه نهایی بدست نخواهد آمد.
تگ های معنایی در Html5
- <article>
- <aside>
- <details>
- <figcaption>
- <figure>
- <footer>
- <header>
- <main>
- <mark>
- <nav>
- <section>
- <summary>
- <time>
تگ <Header> یا <Header>
در تگ هدر به معرفی مواردی همچون لوگو، اطلاعات نویسنده و یا لینک های Navigation Links پرداخته می شود.
<header> <h1>JavaScript</h1> <h3>What is JavaScript?</h3> <p>Today we are going to talk about JavaScript</p></header>
تگ <Nav>
تگ Nav ، لینک های دسته بندی و صفحات را مشخص می کند. این بخش محل قرار پیوندهای اصلی سایت است و نباید در آن هر لینکی را قرار داد.
<nav> <ul> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> <li><a href=””></a></li> </ul></nav>
تگ <section>
این تگ ها برای دسته بندی مواردی بکار گرفته می شود که به هم ارتباط دارند. به بیان ساده تر می توانید تمام هدرهای سایت را در یک section قرار داد.
<section> <h1>Section Heading</h1> <p>The section tag can contain any elements.</p> <img src=”image.png” alt=”section example”></section>
تگ <article>
تگ آرتیکل به موضوعات مرتبط به یک هدف مشخص اشاره دارد که دارای مفهوم بخصوص هستند. به عنوان مثال در یک تگ article می توان عنوان یک مقاله را برای موتور جستجو درج کرد تا ماهیت آن قابل درک باشد.
<article> <h1>Fun Fact</h1> <p>Fun fact: most of the fun facts on the Internet are not actually fun.</p></article>
تگ <aside>
تگ aside حاوی اطلاعاتی است که در کنار صفحه قرار می گیرد. همانطور که در سایت خود مطالب دیگر صفحات را در سایدبار می گذارید، عملکرد تگ ساید نیز به همین شکل است.
<aside> <h4>Lake</h4> <p>Oxford lake is a lake in the state.</p></aside>
تگ <figure>
تگ <figure> در برگیرنده فضایی است که انواع محتوای جدا شدنی مانند تصویر و نمودار را ارایه می کند.
<figure> <figcaption>Cat</figcaption> <img src=”image.png” alt=”The Cat sands” width=”300″ height=”300″></figure>
تگ <details>
تگ <details> همانطور که از نام اش پیداست، به ترعیف جزئیات در سایت می پردازد. از <summary> برای افزودن خلاصه به این عنصر بهره ببرید
<details> <summary>Some details</summary> <p>Provide more info about the details here.</p></details>
تگ<main>
تگ<main> شامل محتوای اصلی صفحه است که در قالب مقاله، پاراگراف یا هر متن دیگری شکل میگیرد.
<main id=”content” class=”group” role=”main”>
تگ<mark>
تگ<mark> برای برجسته کردن یک متن در جاییکه باید بر معنی آن تاکید شود اشاره دارد.
<p>The mark tag is <mark>useful</mark> when you need to highlight important information</p>
تگ<time>
تگ<time> به تعریف و نمایش زمان و تاریخ در صفحه اشاره دارد.
<h2>The premiere show starts at <time>21:00</time> today.</h2>
تگ<img>
تگ<img> جهت افزودن تصویر به صفحات به کار گرفته می شود و شامل اطلاعات بسیار خوبی نیز است.
<img src=”image.png” alt=”Space Doggo” width=”50″ height=”50″>
تگ <form>
تگ <form> برای وارد کردن اطلاعات ورودی استفاده می شود.
<pre class=”wp-block-code”><code></code></pre>
تگ <table>
تگ <table> جدول، سطرها و ستون ها را در یک صفحه تعریف می کند.
<table><tr> <th>Place</th> <th>Animal</th> </tr> <tr> <td>Space</td><td>Dog</td> </tr></table>
