نحوه مشاهده کد منبع صفحه: کد HTML هر صفحه وب را ببینید (به علاوه: موارد استفاده از SEO)

به دنبال راهی آسان برای مشاهده کد منبع یک صفحه هستید؟

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

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

کد منبع یک صفحه وب چیست؟

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

این کد فرم، سبک و تعامل صفحه را ارائه می دهد.

مثلا،

• HTML قالب بندی هایی مانند سرفصل ها و پاراگراف ها را فراهم می کند.
• CSS یک ظاهر طراحی را ارائه می دهد، از جمله رنگ ها و چیدمان.
• جاوا اسکریپت عناصر تعاملی مانند پاپ آپ ها را فراهم می کند.

مرورگرها بلافاصله این فایل های کد را بارگیری و تفسیر می کنند و یک صفحه وب قابل مشاهده را ارائه می دهند.

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

همچنین می توانید از آن برای بررسی های ساده سئو استفاده کنید.

نحوه مشاهده کد منبع یک صفحه در گوگل کروم

ما از گوگل کروم برای مثال خود استفاده خواهیم کرد زیرا بیشترین سهم بازار را در بین مرورگرها دارد. و میانبرهای صفحه کلیدی که برای Chrome به اشتراک می گذاریم برای اکثر مرورگرهای دیگر از جمله Apple Safari و Brave نیز کار می کنند.

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

روش 1: میانبر صفحه کلید

• مک: ⌘ + گزینه + u
• ویندوز/لینوکس: Ctrl + U

روش 2: کلیک راست کنید، انتخاب کنید

• کلیک راست در یک صفحه وب (در مک بوک، صفحه لمسی را با دو انگشت فشار دهید.)
• انتخاب کنید منبع صفحه را ببینید از پنجره پاپ آپی که ظاهر می شود.

روش 3: منوی برنامه اپل

• با باز بودن Chrome، منوی Apple App را باز کرده و انتخاب کنید مرور. از این منوی کشویی، را انتخاب کنید توسعه دهنده » منبع را ببینید

از Line Wrap و Search Code استفاده کنید

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

از آن استفاده کنید ⌘ + f برای باز کردن کادر جستجوی کد.

علاوه بر دیدن یک صفحه کد منبع واحد، می‌توانید از هر صفحه وب به ابزارهای توسعه‌دهنده Chrome دسترسی داشته باشید تا اطلاعات دقیق‌تری درباره کد دریافت کنید. طراحان و توسعه دهندگان وب از این ابزارها استفاده می کنند.

برای دسترسی به ابزارهای برنامه‌نویس Chrome، از Chrome برای پیمایش به یک صفحه وب استفاده کنید.

سپس از میانبر صفحه کلید مناسب استفاده کنید:

• Mac: ⌘ + option + i
• ویندوز/لینوکس: F12 یا Control + Shift + I

با این کار یک پنجره جدید در همان تب مرورگر باز می شود و کد پشت صفحه نمایش داده می شود.

این نما شنوندگان رویداد CSS و جاوا اسکریپت را از جمله موارد دیگر نشان می دهد.

نکته: همه مرورگرهای وب اصلی، از جمله موزیلا فایرفاکس و مایکروسافت اج، یک پنجره «ابزار توسعه‌دهنده» ارائه می‌دهند و همان میانبر کروم برای آنها کار می‌کند.

کاربردهای رایج برای مشاهده کد منبع صفحه

2 دلیل متداول وجود دارد که چرا غیر توسعه دهندگان می خواهند کد منبع یک صفحه را ببینند.

یکی این است که مراجع پست مهمان خود را بررسی کنید. و دیگری کنجکاوی است: بیایید ببینیم متا تگ ها در HTML چگونه هستند.

استفاده از 1: مراجع پست مهمان را بررسی کنید

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

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

این استراتژی بازخورد به افراد کمک می کند تا حضور آنلاین خود را ارتقا دهند و به طور ماهرانه ارتباط برقرار کنند.

با این حال، مهم است که کد هر پیوندی را که دریافت می‌کنید بررسی کنید. چرا؟ گاهی اوقات یک صاحب سایت به طور تصادفی یک ویژگی پیوند مانند “sponsored” یا “nofollow” اضافه می کند که هر گونه ارزش SEO را نفی می کند.

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

نحوه بررسی HTML برای ویژگی های پیوند: روش 1

• به صفحه ای که به صفحه شما پیوند داده شده است بروید.
• روی هر قسمت از صفحه کلیک راست کنید.
• “مشاهده منبع صفحه” را انتخاب کنید.

کد HTML صفحه در یک پنجره جدید باز می شود.

در انکر تکست جستجو کنید و پیوند اطراف را بررسی کنید nofollow، حمایت شده استیا UGC ویژگی های.

ما از مقاله ای از ReadWrite.com به عنوان مثال استفاده خواهیم کرد.

با پیمایش به انتهای این مقاله، می‌بینیم که بیوگرافی نویسنده مهمان شامل پیوندی به وب‌سایت او، Ditto Transcripts است.

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

با این کار کد HTML صفحه در یک تب جدید باز می شود. (فراموش نکنید که کادر “خط حمل” را علامت بزنید.)

اکنون می توانید صفحه “رونوشت های مشابه” را جستجو کنید. این چیزی است که ما می بینیم.

لینک یک لینک “dofollow” است که برای سئو بهینه است. به عدم وجود ویژگی های nofollow، sponsored یا UGC در کد پیوند توجه کنید.

نحوه بررسی HTML برای ویژگی های پیوند: روش 2

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

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

• به صفحه ای که به صفحه شما پیوند داده شده است بروید.
• روی پیوند بازخورد کلیک راست کنید.
• انتخاب کنید بازرسی کنید از پنجره کوچکی که ظاهر می شود.

با این کار، ابزار برنامه‌نویس کروم باز می‌شود.

به راحتی، این عمل پیوند (به رنگ آبی) را برجسته می کند تا دقیقاً بدانید کجا باید نگاه کنید.

در اینجا ما از همان ReadWrite.com به عنوان مثال خود استفاده خواهیم کرد.

برای مشاهده کد پیوند، روی آن کلیک راست کرده و از پنجره باز شده گزینه Inspect را انتخاب کنید.

با انتخاب «Inspect»، ابزار برنامه‌نویس Chrome باز می‌شود. پیوند با رنگ آبی برجسته خواهد شد.

بیایید این قسمت برجسته شده را بزرگ کنیم.

اگرچه این کد پیوند ممکن است حاوی چیزهایی باشد که شما متوجه آن نمی شوید، اما می توانید ببینید که درک نمی کنید nofollow، حمایت شده استیا UGC آنجا برچسب بزنید

استفاده از 2: ببینید متا تگ ها چگونه هستند

دلیل دومی که ممکن است غیر توسعه دهندگان از کد منبع در صفحه پیش نمایش استفاده کنند این است که کنجکاو هستند تا ببینند متا تگ ها در کد چگونه به نظر می رسند.

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

و افزونه هایی مانند All in One SEO (AIOSEO) ویرایش و بهینه سازی آنها را آسان می کند.

اما ممکن است از خود بپرسید که این 2 متا تگ در کد منبع چگونه هستند.

کشف کردن

• به یک صفحه بروید.
• رفتن به منبع صفحه را ببینید
• کادر “خط بسته بندی” را در گوشه سمت چپ بالا علامت بزنید.
• از آن استفاده کنید ⌘ + f برای جستجو < عنوان یا

در اینجا نمونه ای از تگ عنوان است.

و در اینجا توضیحات متا برای همان مقاله آمده است.

بهینه سازی این متا تگ ها با افزونه All in One SEO (AIOSEO) برای وردپرس آسان است.

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

این افزونه ایجاد شده دارای هزاران بررسی 5 ستاره در WordPress.org و بیش از 3 میلیون کاربر است.

اگرچه استفاده از AIOSEO برای مبتدیان آسان است، اما نتایج حرفه ای را ارائه می دهد.

همه در یک سئو را می توانید از اینجا دانلود کنید.

الف را خواهید دید پیش نمایش عنوان و توضیحات متا شما در نتایج جستجوی گوگل.

و شما راه‌های آسانی برای بهینه‌سازی این تگ‌ها به دست می‌آورید، مانند نگه داشتن توضیحات متا در یک طول مشخص.

علاوه بر این، All in One SEO توصیه هایی برای بهبود سئوی صفحات وب شخصی شما ارائه می دهد.

مزایای دیگر عبارتند از

پرسش و پاسخ برای بررسی کد منبع صفحه

بعدش چی؟

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

همچنین ممکن است بخواهید در مورد نقش بک لینک در سئو اطلاعات بیشتری کسب کنید و بینشی در مورد لینک های پولی و ساخت لینک بدست آورید. و گرفتن آن سرنخ ها را فراموش نکنید.

اگر این مقاله برای شما مفید بود، لطفاً برای آموزش سئو در کانال یوتیوب ما مشترک شوید. شما هم می توانید ما را دنبال کنید توییترلینکدین یا فیسبوک برای به روز ماندن.