اسرار بهینه سازی پروژه های خبری برای موتورهای جستجو از کجا می توان URL های ثابت را برای جایگزینی کد PHP دریافت کرد

احتمالاً قبلاً می دانید که برای تبلیغ یک وب سایت در آن موتورهای جستجو، سایت نیاز به بهینه سازی دارد. در این مقاله در مورد نحوه انجام صحبت خواهم کرد سئو اولیهخودتان سایت را بهینه کنید درک این نکته مهم است که این مثال بهینه سازی فقط یک نمونه اساسی است. اغلب اوقات شما نیاز دارید که سایت را با جزئیات نگاه کنید و بهینه سازی سایت را انجام دهید، زیرا برخی چیزها به نحوه ساخت سایت بستگی دارد. برو!

بهینه سازی قالب وردپرس

ما بهینه سازی اولیه سئو قالب را برای وب سایت شما انجام خواهیم داد.

ما همه کارها را به تنهایی و فقط در یک روز انجام خواهیم داد

مبانی سئو بهینه سازی وردپرساین الگو برای اطمینان از عدم وجود متن های غیر ضروری و ناخواسته در تگ های عنوان H1-h6 است. این معمولاً زمانی اتفاق می‌افتد که قالب در آن خریداری شود فرم تمام شدهبه عنوان مثال در فروشگاه Templateonster. شاید واقعیت این باشد که توسعه دهندگان قالب با SEO آشنا نیستند - این کاملاً طبیعی است. بنابراین، اولین کاری که باید انجام دهید این است که تگ های عنوان خود را بهینه کنید.

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

بهینه سازی قالب header.php

قالب header.php معمولا حاوی نام سایت است که عنوان صفحه اصلی است. عنوان سایت روشن است صفحه نخستباید در برچسب ها محصور شود، مانند این:

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

بهینه سازی قالب index.php

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

آنها باید به ترتیب با عنوان و توضیحات ثابت جایگزین شوند. اگر ناگهان، پس از ذخیره این، به جای حروف روسی، کاراکترهای مزخرفی بیرون آمدند (در مورد رمزگذاری های زبان روسی و مشکلات ناشی از آنها بخوانید)، سپس فایل را دوباره برای ویرایش در Notepad++ باز کنید (توضیحات آن ادامه دارد)، "Encoding" را انتخاب کنید. " از منوی بالا - "تبدیل به UTF-8 بدون BOM" و سپس فایل را دوباره ذخیره کنید.

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

پرس و جو در چند ثانیه

در نتیجه، پس از بارگذاری صفحه، در پایین (در قسمت پاورقی) خواهید دید که چند تماس با پایگاه داده انجام شده است:

توجه: نسخه تطبیقی ​​سایت فعال شده است که به طور خودکار با اندازه کوچک مرورگر شما تنظیم می شود و برخی از جزئیات سایت را برای سهولت در خواندن پنهان می کند. از تماشاکردن لذت ببرید!

سلام. امروز به ادامه مبحث بهینه سازی طرح بندی وب سایت HTML می پردازیم که در مقاله شروع کردیم.

بیایید ابتدا بفهمیم که چرا این مهم است و سپس به نکات عملی برویم.

یک قالب وب سایت به درستی ساخته شده (طراحی شده):

• می تواند به طور قابل توجهی سرعت بارگذاری صفحه را افزایش دهد (به خصوص اگر همه چیز قبلاً در حال اجرا بود).
• دسترسی صفحات شما به TOP را آسان تر می کند نتایج جستجو(نه تنها به دلیل بارگذاری سریع)؛
• این شانس شما را برای سازگاری کامل بین مرورگرها افزایش می دهد، یعنی سایت به طور یکسان در همه مرورگرها نمایش داده می شود.
• این تضمین کوچکی می دهد که پس از سال ها دیگر مجبور نخواهید بود سایت خود را برای مرورگرهای جدید (یا برای نسخه های جدید مرورگرهای قدیمی) دوباره طراحی کنید.

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

بخش 1: استانداردهای HTML و CSS را دنبال کنید

در هر صورت، می‌گویم که علاوه بر HTML و CSS، می‌توانیم بخش‌های JS و PHP سایت‌هایمان را نیز بهینه کنیم، که منابع فشرده‌تر هستند و سرعت بارگذاری صفحه را به طور قابل توجهی کاهش می‌دهند. اما جدا از سرعت بارگذاری صفحات، اجزای JS و PHP بر خلاف نشانه گذاری HTML، یعنی قالب سایت، به هیچ وجه (تا زمانی که آن را خراب نکنند) تاثیری در ارتقای سایت ندارند.

1.1 همیشه برچسب ها را ببندید.

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

• مورد فهرست
• مورد فهرست
• مورد فهرست

هر تگ li بسته است، اگرچه این مورد نیاز نیست.

1.2 تودرتوی صحیح تگ ها را رعایت کنید.

طبق اصل: اول باز می شود، آخر به بسته می شود. مثالی از اشتباه بودن آن:

متن

نحوه صحیح:

متن

1.3 هرگز CSS و JS را در قالب HTML و ویژگی های برچسب ننویسید.

هرگز! به عبارت دیگر، وجود ویژگی style و تگ style را فراموش کنید:

متن

p(رنگ: قرمز؛ اندازه قلم: 20 پیکسل؛ تراز متن: مرکز)

همه استایل ها را در یک فایل css. جداگانه توضیح دهید

شما می‌توانید ویژگی style را فقط با رندر کردن پویا با استفاده از جاوا اسکریپت برای برخی اقدامات استفاده کنید. به عنوان مثال، اگر با کلیک بر روی یک عکس، باید رنگ تمام متن موجود در صفحه را تغییر دهید، تنها در این صورت می توانید به صورت پویا یک ویژگی سبک با مقادیر مورد نیاز برای تگ مورد نظر ایجاد کنید (در این مثال، برای بدن). چرا؟ زیرا روبات های جستجوگر به هر حال آن را نمی بینند و هیچ کس (از جمله کاربران) کد اضافی را دانلود نمی کند، زیرا این عمل پس از بارگیری کامل صفحه انجام می شود.

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

همین امر در مورد JS نیز صدق می‌کند؛ همه کدهای JS باید در یک فایل جداگانه باشند، نه در طرح‌بندی یا حتی بدتر از آن، در میان ویژگی‌های برچسب.

1.4 Caps Lock و حروف بزرگ را فراموش کنید.

تمام برچسب ها، ویژگی ها و معانی آنها را با حروف کوچک (کوچک) بنویسید، در مورد شیوه نامه های CSS نیز همینطور است.

تقریباً هر آنچه در بالا توضیح داده شد در مشخصات رسمی HTML و CSS است و به اعتبار سند مربوط می شود.

بنابراین، باید توجه داشته باشم که با رعایت استانداردهای W3C، یعنی با حفظ اعتبار سند، از مزایای SEO زیر برخوردار می شوید:

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

با این حال، نباید روی اعتبار تمرکز کنید، باید سعی کنید تا حد امکان به آن پایبند باشید، اما نه به ضرر همه چیزهای دیگر (زمان، عملکرد و غیره).

قسمت 2. افزایش سرعت بارگذاری صفحه - یکی از عوامل رتبه بندی 2.1 اندازه واقعی تصویر را نشان دهید.

نکته اینجا دو چیز است:

• مطمئن شوید که ویژگی های عرض و ارتفاع را برای تگ img لحاظ کنید: این کار بارگذاری تصاویر را سرعت می‌بخشد، زیرا مرورگر از قبل می‌داند چه اندازه نمایش داده شود.
• مطمئن شوید که یک تصویر با همان اندازه مشخص شده در ویژگی ها درج کنید.

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

2.2 به جای JS از CSS3 استفاده کنید.

JS می تواند بارگذاری صفحات شما را به میزان قابل توجهی کاهش دهد و همچنین پس از بارگیری صفحه به ایجاد بار ادامه دهد (افکت های مختلف مانند تیک تیک و سایر موارد پویا)، که می تواند در زمانی که برگه سایت باز است، سرعت مرورگر را کاهش دهد. .

امروزه بسیاری از افکت‌های زیبا و جالب را می‌توان تنها با استفاده از ویژگی‌های CSS3 (مثلاً transition، box-shadow، border-radius، opacity، transform، background-size) و ماهرانه به دست آورد.

تمام موارد فوق را می توان در یک عبارت خلاصه کرد: هر جا که می توانید (مشکوکید چگونه) JS را با CSS3 جایگزین کنید، بدون تردید از CSS3 استفاده کنید! برای یافتن چنین قطعاتی، به شما توصیه می کنم ویژگی های جدید CSS3 را بررسی کنید.

2.3 فتوشاپ کمتر - CSS بیشتر 3.

این شعار برای مدت طولانی توسط بسیاری از مدیران وب سایت مورد استفاده قرار گرفته است. شما می توانید دکمه ها و عناصر طراحی زیبا را با شیب های صاف، گوشه های نرم، سایه ها (داخلی و بیرونی) و متن زیبا در بالا تنها با CSS ایجاد کنید. هر جا که می توانید عناصر طراحی گرافیکی را با کد CSS جایگزین کنید - این کار را انجام دهید! مثال:

یا دکمه «اشتراک!» من در پایان هر مقاله به هر حال، فراموش نکنید که در اعلان‌های مربوط به مقالات مفید جدید، بدون هرزنامه یا تبلیغات مشترک شوید.

علاوه بر ویژگی های CSS3 ذکر شده در بالا، به فرمت توضیحات رنگ RGBA نیز دسترسی دارید.

برای ایجاد یک گرادیانت متقابل مرورگر با CSS، می‌توانید از خدمات رایگانی مانند این مورد از colorzilla.com استفاده کنید.

2.4 ترکیب تصاویر در CSS sprites.

تصاویری که نمی‌توانیم با استفاده از CSS 3 ترسیم کنیم، باید در یک تصویر واحد (در حالت ایده‌آل) ترکیب شوند. این به منظور کاهش تعداد درخواست ها به سرور هنگام بارگذاری صفحه ضروری است. این آیتم می تواند بار روی وب سرور شما را به میزان قابل توجهی کاهش دهد و در عین حال سرعت بارگذاری صفحه را دو پرنده با یک سنگ افزایش دهد!

برای درک بهتر آنچه در مورد آن صحبت می کنم، کافی است نگاهی به CSS sprite من بیندازید:

بد نیست، نه؟ برای همه عناصر یک تصویر پس زمینه وجود دارد، فقط آن را جابه جا می کنیم و به لطف ویژگی background-position، قسمت مورد نظر از تصویر را در پس زمینه یک عنصر خاص جایگزین می کنیم، به عنوان مثال، مانند این:

#subs,#left,.mail,.rss,.vk(background:url(/images/1.png) no-repeat) #subs(background-position: -28px -120px;) #left(background-position: -35px -20px;) .mail(پس‌زمینه موقعیت: -43px -50px;) .rss (موقعیت پس‌زمینه: -12px -8px؛) .vk(موقعیت پس‌زمینه: -34px -56px؛)

بهترین کار این است که با استفاده از فتوشاپ یک اسپرایت به صورت دستی ایجاد کنید، اما این ممکن است برای شما بسیار پیچیده به نظر برسد، بنابراین می توانید از خدمات رایگانی استفاده کنید که همه کارها را برای شما انجام می دهند، از جمله نوشتن کد CSS برای شما. سرویس مورد علاقه من SpriteMe است. اما از تکرار خسته نمی شوم: همیشه بهتر است همه چیز را به صورت دستی انجام دهید، به ویژه، به این ترتیب اسپرایت می تواند بسیار فشرده تر (از نظر اندازه و بنابراین وزن) و در نتیجه کارآمدتر باشد.

2.5 فایل های JS را به درستی قرار دهید.

همه فایل‌های JS موجود در سایت شما باید تا حد امکان در پایین کد قرار گیرند؛ لازم نیست آنها را در "سر" سایت (بین تگ‌های head) قرار دهید - این امر بارگذاری صفحه را به میزان قابل توجهی کاهش می‌دهد. بیشترین بهترین گزینهشامل فایل‌های JS قبل از برچسب بدنه بسته می‌شود، یعنی در پایین صفحه، جایی پایین‌تر وجود ندارد.

و یک نکته بسیار مفید دیگر: در حالت ایده‌آل، تمام فایل‌های JS شما باید در یک واحد ترکیب شوند، یعنی کد (Ctrl + X) را از همه فایل‌ها جدا کرده و در یک کپی کنید تا در نهایت شما یکی در پایین، قبل از بسته شدن تگ بدنه تک فایل:

...

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

2.6 فایل های CSS را به درستی قرار دهید.

فایل CSS که اتفاقاً باید یک و تنها باشد (به همین دلایل) باید در جهت مخالف و در بالاترین حد ممکن در کد قرار گیرد!

اما لازم نیست آن را بالای تگ عنوان قرار دهید، این برای سئو مهم ترین است و بهتر است آن را در بالای صفحه بگذارید. من شخصاً فایل CSS را بلافاصله بعد از تگ عنوان و همه متا تگ ها قرار می دهم و بعد از آن می توانید به عنوان مثال یک فاویکون (نماد وب سایت در تب مرورگر) و غیره را متصل کنید.

قسمت 3. طرح بندی درست سئو 3.1 کد ناوبری سایت.

تمام ناوبری سایت (منوها، پودرهای سوخاری، لیست های سازنده در فروشگاه های آنلاین و غیره) باید با استفاده از لیست های بدون شماره (تگ های ul، li) و نه با استفاده از تگ های div و a اجرا شود.

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

• آیتم منو 1
• آیتم منو 2
• آیتم منو 3

3.1.1 ظرافت های منوی افقی.

اگر نیاز به پیاده‌سازی یک منوی افقی دارید، می‌خواهم 2 نکته رایگان به شما ارائه دهم:

• هرگز از ویژگی float CSS برای این کار استفاده نکنید (شناور، باعث می شود عناصر دیگر دور آن بپیچند)، به جای آن از کد زیر استفاده کنید: ul.menu li(display:inline-block;)
• کد نیازی به شروع هر آیتم منوی جدید در یک خط جدید مانند مثال بالا ندارد. بهتر است همه چیز را در یک خط بنویسید و فاصله بین موارد را با استفاده از حاشیه تنظیم کنید. مثال:

ul.menu li (نمایش: inline-block؛ حاشیه: 0 5px؛ )

• آیتم منو 1
• آیتم منو 2
• آیتم منو 3

شکست خط در HTML برابر با یک فاصله است، یعنی اگر بین آیتم های منو Enter را در کد قرار دهید، کاربران در صفحه سایت بین آنها فاصله خواهند داشت. چه اشکالی دارد؟ هر مرورگر ممکن است عرض فضای سفید متفاوتی داشته باشد و برخی ممکن است آن را به کلی نادیده بگیرند. در نتیجه، سایت شما در همه جا متفاوت به نظر می رسد، و گاهی اوقات (از تجربه خودم) این حتی می تواند به طور جدی طراحی را مخدوش کند.

بنابراین، من قانون خودم را هنگام طراحی دارم: بین هیچ یک از عناصر بلوک درون خطی (نه فقط منو) نباید فاصله یا خط شکنی وجود داشته باشد! در عین حال، این ناچیز است، اما وزن کلی صفحات شما را کاهش می دهد، زیرا همانطور که قبلاً نوشتم: 1 کاراکتر (شامل فاصله ها و خطوط شکسته) = +1 بایت به وزن صفحات شما.

3.2 ویژگی Alt برای تصاویر

حتماً ویژگی alt را در تگ img قرار دهید:

اولاً، اگر می خواهید یک بررسی اعتبار انجام دهید (دقیقاً در XHTML، من در مورد HTML به خاطر ندارم، همیشه باید استانداردهای سختگیرانه XHTML را رعایت کنید) این مورد ضروری است، ثانیاً، اگر تصویر بارگیری نمی شود، سپس کاربر به جای آن تصویر حداقل متن نوشته شده در alt را نمایش می دهد (در مورد چیست). ثالثاً، این شانس قرار گرفتن تصاویر شما در جستجوی تصویر از Google و Yandex را افزایش می دهد که می تواند بازدیدکنندگان بیشتری را به سایت شما جذب کند.

و نکته آخر: کلمات مشخص شده در ویژگی alt هنگام رتبه بندی سایت شما در نظر گرفته می شود، یعنی می توانید کلمات کلیدی را در آنجا قرار دهید، اما به هیچ وجه زیاده روی نکنید، بهتر است یک alt برای افراد ایجاد کنید، فقط گاهی اوقات کلمات کلیدی را در آنجا درج کنید. .

اگر تمام ویژگی‌های alt شما با کلمات کلیدی مشابه پر شده‌اند، مطمئناً انتظار جریمه‌ها را دارید.

3.3 از هدرهای HTML h1-h6 حداکثر استفاده کنید.

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

وجود هدرهای HTML در چیدمان وب سایت شما در حال حاضر یک مزیت برای ارتقاء موتور جستجو است و قرار دادن ماهرانه می تواند نتیجه را دوچندان کند. در اینجا چیزی است که خود Yandex در این مورد می نویسد.

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

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

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

من شخصاً همه زیرعنوانها را در یک مقاله در h2، زیرعنوانهای فرعی در h3 و زیرعنوانهای فرعی کوچک را در h4 قرار می دهم. در زیر هر مقاله یک فرم اشتراک و یک بلوک با دکمه وجود دارد شبکه های اجتماعی، نام آنها را در h6 قرار دادم. در ستون سمت راست سایت، نام بخش ها در h5 درج شده است.

همانطور که می بینید، من از هدرهای HTML حداکثر استفاده می کنم و منطق به طور خودکار به من می گوید که همه چیز را از بالا به پایین در کد مرتب کنم. اگر چه برای بت کامل لازم بود عناوین h6 و h5 را با هم عوض کنید، اما این خیلی ساده خواهد بود :) و چندان مهم نیست.

3.4 لینک سریع به سایت.

در ادامه مبحث سرفصل ها می خواهم در مورد اهمیت h1 و نحوه صحیح نوشتن آن صحبت کنم. اولا، من به شدت توصیه می کنم از آن فقط 1 بار در هر صفحه استفاده کنید! این را در CMS خود نظارت کنید. ثانیاً h1 تأثیر زیادی در سئو دارد (پس از عنوان رتبه دوم) اما من به شما توصیه می کنم متن را از عنوان در h1 کپی کنید.

Yandex می نویسد:

برای کمک به Yandex در برجسته کردن صحیح پیوندهای سریع، متن موجود در برچسب برای صفحات کلیدی باید با نام آن (با عنوان صفحه، برجسته شده، به عنوان مثال، با برچسب) و با متون پیوندهای اشاره شده به این صفحه مطابقت داشته باشد.

3.5 از همه گزینه های قالب بندی متن استفاده کنید.

قبلاً متوجه شده ایم که موتورهای جستجو سایت هایی را دوست دارند که ساختار واضح، قابل فهم و درستی دارند. بنابراین، علاوه بر هدر، باید تا حد امکان از ویژگی های دیگر استفاده کنید:

• استفاده از لیست های شماره دار و بدون شماره (ul، ol)؛
• متن اصلی را نه در تگ های div، بلکه در تگ های پاراگراف قرار دهید: p;
• متن را با عکس و فیلم همراه کنید.
• رسم جداول HTML.
• از برچسب های برجسته کردن متن منطقی (در حد اعتدال!) استفاده کنید: strong, em, u.

3.6 از کلمات کلیدی و متا تگ های توضیحات عاقلانه استفاده کنید.

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

توجه داشته باشید: از متا تگ های غیر ضروری استفاده نکنید (این بی معنی است)، حداکثر از سه متا تگ: کلمات کلیدی، توضیحات و متا تگ برای نشان دادن رمزگذاری سایت:

اگر CMS شما تعداد بیشتری از آنها را تولید می کند (Autor، Generator، و غیره)، پس با خیال راحت آنها را حذف کنید! سایت نباید حاوی زباله های غیر ضروری، چه در متن و چه در کد باشد.

3.7 کد خود را بهینه کنید.

هنگامی که سایت خود را به پایان رساندید، به این فکر کنید که چگونه می توانید نشانه گذاری HTML را کاهش دهید، مانند استفاده از , و همچنین توجه داشته باشید که آیا همه برچسب های شما کاری انجام می دهند یا خیر. اگر هیچ ویژگی CSS روی برچسب اعمال نشده است، پس چرا آن را اضافه کردید؟ برای بررسی این مورد، استفاده کنید. اغلب افراد تازه کار تعداد زیادی تگ div اضافی ایجاد می کنند. آن را بررسی کنید، کد کمتر بهتر است!

3.8 کد را کوتاه کنید.

پس از اتمام کار، کدهای HTML، CSS و JS خود را کوتاه کنید. چگونه کوتاه کنیم؟ همه چیز را در یک خط بنویسید، این ایده آل خواهد بود. و این یک شوخی نیست، تمام فاصله های بین برچسب ها و تمام خطوط شکسته در طرح بندی HTML را حذف کنید! هنگامی که Ctrl + U را در مرورگر فشار دهید، باید یک خط پیوسته را مشاهده کنید.

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

ساده ترین راه برای کوتاه کردن CSS و JS از طریق سرویس های ویژه است؛ برای JS می توانید به عنوان مثال از Closure Compiler از Google استفاده کنید (مراقب باشید، پس از بهینه سازی ممکن است کد شما دیگر کار نکند). برای CSS، csscompressor.com مناسب است، با این حال، من معمولا از یک سرویس واحد (برای JS و CSS) استفاده می کنم، در مورد آن در انتهای مقاله.

قسمت 4. ما همچنان به بهینه سازی طرح سایت برای موتورهای جستجو ادامه می دهیم.

2 پارامتر مهم هستند:

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

و اگر نکته دوم به احتمال زیاد تأثیر زیادی بر موقعیت نداشته باشد، پس نکته اول قطعاً ارزش توجه زیادی را در هنگام ساخت ساختار و طراحی سایت دارد.

Yandex می نویسد:

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

گوگل همچنین الگوریتم خاصی به نام دارد که تعیین می‌کند تا چه اندازه باید سایت خود را اسکرول کنید تا به بخش مفید (مرتبط با پرس و جو) صفحه برسید. تصویر زیر عملکرد این الگوریتم را نشان می‌دهد؛ الگوریتم میانگین وضوح صفحه نمایش (1024*768) را بررسی می‌کند:

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

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

چند نکته مفید در این زمینه:

• هدر سایت را تا حد امکان کوچکتر کنید (نمونه ای از نحوه عدم انجام: این وبلاگ).
• سعی کنید سایت را با تبلیغات شلوغ نکنید.
• اگر در طرح‌بندی دو ستونی نمی‌توانید تصمیم بگیرید که یک ستون اضافی را در سمت راست یا چپ ستون اصلی قرار دهید، همیشه آن را در سمت راست قرار دهید. ربات های جستجوگر، مانند افراد، از چپ به راست به سایت شما نگاه می کنند، یعنی بهتر است محتوای اصلی در سمت چپ باشد!

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

یک ترفند دیگر در این مورد وجود دارد. به عنوان مثال، ما 2 ستون سایت داریم - اصلی و اضافی. در عین حال، با وجود SEO، ما واقعاً می خواهیم ستون اضافی در سمت چپ باشد؛ هیچ چیز کشنده ای در این مورد وجود ندارد. اما در این صورت تمام کدها و تمام اطلاعات ستون اضافی (سمت چپ) از نظر کد بالاتر از قسمت اصلی خواهند بود و می توانیم این مشکل را برطرف کنیم!

برای این کار از ویژگی float CSS استفاده می کنیم. هنگام ایجاد یک طرح HTML، ستون اصلی (راست) را در سمت چپ ستون اضافی (بالای کد) قرار می دهیم:

قسمت اصلی سایت. ستون اضافی در سمت چپ.

حالا بیایید آنها را با استفاده از CSS عوض کنیم:

#text(float:right;) #left(float:left;) .clear(clear:both;) /* بدون بسته بندی */

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

قسمت 5. سرعت صفحه گوگل

Google Page Speed ​​یک سرویس آنلاین فوق‌العاده از Google و همچنین افزونه‌ای برای کروم و موزیلا است که در هنگام تجزیه و تحلیل قالب وب‌سایت HTML + CSS شما به یک دستیار ضروری تبدیل می‌شود. او تمام کاستی ها را به شما می گوید و مهمتر از همه، راه حل های خاصی را به شما می دهد.

همچنین این همان سرویسی است که من دوست دارم از آن برای کوتاه کردن کدهای HTML، JS و CSS استفاده کنم، پس از استفاده از آن، عملکرد 100٪ تضمین شده است.

فقط کافی است با Google Page Speed ​​شروع به کار کنید و سطح خود را در بهینه سازی مناسب قالب وب سایت خود در سمت کلاینت به میزان قابل توجهی بهبود خواهید داد.

با تشکر از توجه شما. روز خوبی داشته باشید و شما را ببینم!