Search Appearance در گوگل سرچ کنسول

بخش Search Appearance حاوی اطلاعاتی است که به نحوه نمایش سایت در SERP مرتبطشود و شامل ۵ قسمت است که در ادامه به توضیح آنها پرداخته شده است.

اطلاعات ساختار یافته

در این گزارش، انواع اطلاعات ساختار یافته ای که در طراحی سایت (ساخت سایت، طراحی سایت فروشگاهی،طراحی سایت شرکتی) استفاده شده است نمایش داده می شوند. به عنوان نمونه همان طور که در تصویر زیر مشاهده می کنید، در مجموع ۲۰۰ صفحه سایت، تعداد۸۲۶ آیتم دارای اطلاعات ساختار یافته (استراکچرد دیتا) هستند و ۱۵۶ آیتم دارای ایراد نیز وجود دارد و در مجموع از ۶ نوع اطلاعات ساختار یافته استفاده شده است که نوع hatom آن دارای ارور می باشد.

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

Rich cards

همان گونه که گفته شد، rich card ها نتایجی هستند که در SERP به صورت کارت نمایش داده می شوند و همانطور که در ابتدا به آن اشاره شد، گوگل این اطلاعات را از طریق اطلاعات ساختار یافته به دست می آورد.
گوگل سرچ کنسول در بخش rich card به شما گزارش می دهد که چه تعداد ریچ کارت در سایت اشما وجود دارد و آنها از چه نوعی هستند و همچنین گزارش ریچ کارت هایی که حاوی ارور هستند را نیز به شما ارائه می کند.

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

با توجه به تصویر بالا، وضعیت rich card ها به سه دسته Invalid cards و Enhanceable cards و Fully enhancable cards، تقسیم می شوند که در ادامه به توضیح آنها پرداخته شده است.

• Invalid cards : مواردی هستند که اطلاعات ساختار یافته آنها دارای دست کم یک مورد ایراد در فیلدهای اجباری اطلاعات ساختار یافته است.Invalid card ها علاوه بر آن ممکن است دارای تعداد یک یا بیشتر ایراد در فیلدهای اختیاری اطلاعات ساختار یافته نیز باشند.
• Enhanceable cards : مواردی هستند که اطلاعات ساختار یافته آنها دارای حداقل یک مورد غیر بحرانی در فیلدهای اختیاری اطلاعات ساختار یافته باشد. کارت های Enhanceable توسط گوگل پردازش می شوند ولی توصیه می کنیم که ایرادهای غیر بحرانی را نیز برطرف نمایید.
• Fully – enhanced cards : مواردی هستند که در آنها هیچ ایرادی در فیلدهای اجباری و اختیاری اطلاعات ساختار یافته وجود ندارد.

Data Highlighter

در صورتیکه به هر دلیلی امکان اضافه کردن اطلاعات ساختار یافته به کد سایت وجود نداشت، می توان از امکان Data Highlighter برای شناساندن ساختار صفحات سایت به گوگل استفاده نمود. بدین منظور ابتدا وارد صفحه Data Highlighter شوید و بر روی دکمه Start Highlighting کلیک کنید و سپس با توجه به تصویر زیر آدرس URL صفحه مورد نظرتان را وارد کرده و از منوی آبشاری انوع اطلاعات ساختار یافته صفحه مورد نظرتان را انتخاب نمایید.

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

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

کلیک بر روی دکمه Create Page Set

سپس با توجه به آدرس صفحه ای که در مرحله قبل برای هایلایت کردن به سرچ کنسول داده بودید، تعدادی صفحه دیگر همانند تصویر بعدی به شما نمایش داده خواهند شد. اگر ساختار URL سئو سایت شما اصولی باشد، سرچ کنسول تعدادی صفحه مشابه صفحه ای که در مرحله قبل هایلایت کرده اید به شما نمایش می دهد و شما می توانید با کلیک روی دکمه Create Page Set به مرحله بعدی بروید که در آن مرحله، سرچ کنسول تعدادی صفحه مشابه را بر طبق اصولی که شما مشخص کرده اید، توسط هوش مصنوعی هایلایت کرده و جهت گرفتن تاییدیه به شما نمایش می دهد.

در صورت مورد تایید بودن همه صفحاتی که توسط سرچ کنسول هایلایت شده، روی دکمه Publish کلیک کنید. شما می توانید به همین ترتیب برای قسمت های مختلف سایت از دیتا هایلایتر استفاده کنید. ضمنا می توانید در هر لحظه در صفحه Data Highlighter، کلیه هایلایت هایی که انجام پذیرفته را مشاهده کرده و آنها را اذیت کرده و یا از حالت انتشار در آورید و یا حتی آنها را حذف کنید.

HTML Improvement

قسمت HTML Improvement یکی از آیتم های کاربردی سرچ کنسول است. در این قسمت مشکلات Meta Description و Title tag و Non-indexable content نمایش داده می شود که دو آیتم اول بسیار کاربردی هستند. انواع مختلف پیغام های HTML Improvement در ادامه توضیح داده شده اند.

Meta Description

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

• Duplicate meta description : همانگونه که از نام آن مشخص است، آدرس صفحاتی که دارای متا دیسکریپشن تکراری باشند در این قسمت نمایش داده می شوند.
• Long meta description : گوگل تا این لحظه هیچ گاه تعداد کاراکتر مشخصی را به عنوان حداکثر یا حداقل کاراکتر مجاز دیسکریپشن تعیین نکرده است و عرض دیسکرییشن را مد نظر دارد. به عبارت دیگر با توجه به متفاوت بودن بهنای کاراکترهای مختلف، تعیین تعداد دقیق کاراکتر های مجاز امکان پذیر نیست، ولی به صورت تجربی مشخص شده که در لحظه نگارش این کتاب، حداکثر تعداد کاراکتر مجاز برای نوشتن متا دیسکریپشن در حدود ۳۲۰ کاراکتر است. با توجه به این توضیحاتی آدرس صفحاتی که متا دیسکرییشن آنها خیلی طولانی تر از حد مجاز باشند، در قسمت Long meta description نمایش داده می شوند.
• Short meta description : آدرس صفحاتی که متا دیسکریپشن آنها خیلی کوتاه باشد در این قسمت نمایش داده می شوند.

Title tag

در این قسمت، أدرس صفحاتی که Page title آنها نیاز به اصلاح دارند نمایش داده می شود. با توجه به اجباری بودن Page title و اهمیت بالای آن در محاسبات رنکینگ، تلاش کنید که همواره همه صفحات سایت شما فاقد ایراد Title tag باشند. انواع مشکلات عنوان صفحه که در این قسمت به شما نمایش داده می شوند به شرح زیر است:

• Missing title tags : صفحاتی که فاقد تگ عنوان صفحه هستند.
• >Duplicate title tags: صفحاتی که عنوان صفحه آنها تکراری است.
• Long title tags : در مورد حداکثر کاراکتر مجاز عنوان صفحه، در اینجا نیز مشابه متا دیسکیریپشن امکان تعیین عدد دقیق وجود ندارد ولی تجربه نشان داده است که در صفحه نمایش نتایج جستجو استدر گوگل بر روی دسکتاپ و موبایل، معمولا در حدود ۶۷ کاراکتر از عنوان صفحه نمایش داده می شود و این عدد در تبلت به حدود ۱۰۰ کاراکتر می رسد. در قسمت Long title tags، صفحاتی که عنوان صفحه آنها بسیار طولانی باشد نمایش داده می شود.
• Short title tags: صفحاتی که عنوان صفحه آنها خیلی کوتاه است.
• Non – informative title tags: عنوان صفحه در حقیقت باید بتواند در مورد صفحه به کاربر اطلاعات بدهد. اگر عنوان صفحه صرفا برای موتور جستجو نوشته شود و به عنوان نمونه اگر فقط تعدادی کلمه کلیدی در عنوان صفحه آورده شود و عنوان صفحه به تنهایی دارای معنای مشخصی نباشد و اطلاعاتی در مورد صفحه ندهد، این گونه صفحات در قسمت Non-informative title tags نمایش داده می شوند و هر چه سریعتر باید آنها را اصلاح نمود.

Non-indexable content

در این قسمت مشکلات مربوط به محتواهای غیر قابل ایندکس مانند برخی ویدیوها و عکسها نمایش داده می شوند.

Accelerated Mobile Pages

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

• در ستون اول به نام Issue می توانید نام ایراد صفحه با صفحات مشکل دار را مشاهده کنید.
• در ستون Severity، میزان اهمیت مشکل نمایش داده می شود که شامل دو نوع Critical یا بحرانی و Non-Critical یا غیر بحرانی است. صفحاتی که دارای ایراد Critical هستند از Index امپ گوگل خارج می شوند و باید مشکل آنها هر چه زودتر برطرف شود. صفحاتی که دارای ایراد Non-Critical هستند در ایندکس گوگل می مانند ولی بهتر است که هر چه زودتر نسبت بر برطرف کردن ایراد آنها اقدام شود.
• در ستون سوم به نام Pages with issues تعداد صفحاتی که دارای ایراد هستند نمایش داده می شوند.

Security Issues در گوگل سرچ کنسول

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

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

• (Social Engineering (Phishing and Deceptive Sites
• Malware infection type: Server configuration
• Malware infection type: SQL injection
• Malware infection type: Code injection
• Malware infection type: Error template
• Cross-site malware warnings
• Hacked type: Code injection
• Hacked type: Content injection
• Hacked type: URL injection

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

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

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

بهینه سازی عکس برای موتور های جستجو

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

فرمت عکس

فرمت های مختلفی برای عکسها وجود دارند که معروف ترین آنها عبارتند از png ، jpg و gif دوفرمت Webp و SVG نیز در چند سال اخیر مورد استفاده قرار گرفته اند که در دنیای بهینه سازی سایت برای موتور جستجو از اهمیت ویژه ای برخوردار هستند، در ادامه در مورد این دو فرمت توضیح داده شده است.

فرمت Webp

گوگل در سال ۲۰۱۰ فرمت Webp را برای عکس ها به صورت متن باز معرفی کرد. فایل های با فرمت Webp از فرمت های jpg و png فشرده تر هستند و از انیمیشن و transparency نیز پشتیبانی می کنند و بنابراین جایگزین  مناسبی برای فایل های GIF نیز هستند.

انواع فایل Webp

فرمت Webp با دو نوع Lossless یا بدون افت کیفیت و Lossy یا با افت کیفیت قابل ارائه هستند. طبق اعلام گوگل، فایل های Webp از نوع Lossless به میزان ۲۶ درصد و از نوع Lossy به میزان ۳۴-۲۵ درصد فشرده تر از فایل های JPEG فشرده شده با تکنیک های دیگر هستند. همچنین تبدیل فایل PNG بهWebp سایز فایل را به صورت میانگین به میزان ۴۵ درصد کاهش می دهد.

مرورگر های گوگل کروم و اپرا  از ابتدا از فرمت Webp پشتیبانی می کردند ولی مایکروسافت ایترنت اکسپلورر از ورژن ۶ به بعد از Webp پشتیبانی می کند.

فرمت SVG

SVG مخفف Scale Vector Graphic است و در سال ۲۰۰۱ توسط کمپانی W3C معرفی گردید. فایل های SVG به صورت وکتور هستند. اگر یک فایل SVG را با یک ادیتور متنی مانند notepad ناهید دید که یک فایل SVG کاملا به صورت کد نوشته می شود و به عنوان مثال می توانید کد رنگ قسمت های مختلف عکس را در ادیتور متنی تغییر دهید. یکی از مزیت های عکس های با فرمت SVG این است که می توان به راحتی از آنها به صورت inline در HTML استفاده نمود.

تبدیل فرمت عکس

جهت تبدیل فرمت های مختلف عکس به یکدیگر با هدف SEO روشهای مختلفی مانند استفاده از افزونه های مختلف، استفاده از سرویس های آنلاین با استفاده از API و تبدیل فرمت ها به صورت دستی وجود دارد.

نکته ای که باید به آن دقت کرد این است که از هر فرمتی که استفاده می شود، باید حداقل سایز فایل لازم را داشته باشد. همانطور که در فصل PageSpeed Insights گفته شد، به عنوان نمونه می توانید در نرم افزار فوتوشاپ با استفاده از save for web و تنظیم کیفیت روی عدد ۶۵-60، سایز فایل عکس را تا حدی کاهش دهید که چشم انسان متوجه افت کیفیت آن نشود.

inline کردن عکس

در راستای بهینه سازی سایت روش های زیادی برای بهینه سازی عکس و کاهش تعداد درخواست سرور وجود دارد که یکی از آنها کم کردن تعداد درخواست یا request به سرور جهت و عکس ها است. یکی از راههای کاهش تعداد درخواست به سرور استفاده از تکنیک inline کردن عکس است.

استفاده از base64 برای inline کردن عکس

از base64 برای encode کردن باینری به متن استفاده می شود. با استفاده از این تکنیک این امکان وجود دارد که هر عکسی را به صورت داده های متنی ذخیره کرد. خوشبختانه مرورگرهای مختلف می توانند base64 را decode کنند، به عبارت دیگر اگر شما یک عکس را به صورت base64 به صورت inline در فایل HTML در <img> بنویسید، مرورگرها می توانند آن عکس را در صفحه HTML رندر کرده و به کاربر نمایش دهند.

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

اضافه کردن عکس به صورت base64 در HTML به روش زیر است:

<“=img src=”data:image/jpeg;base64,/9j/4AAQSkZIKACgD/9k>

ابزارهایی آنلاین بسیاری مانند آدرس زیر برای تبدیل عکس به base64 وجود دارند که می توانید توسط آنها به راحتی هر عکسی را به base64 تبدیل کنید.

https://www.base64-image.de

اینلاین کردن عکس در CSS با base64

این امکان وجود دارد که از تکنیک base64 برای حذف درخواست به سرور جهت بارگذاری عکس در CSS استفاده نمایید. بدین جهت می توانید عکسbackground را به صورت base64 در CSS هم بنویسید.

در نمونه زیر یک عکس به صورت base64 در CSS به عنوان پس زمینه قرار داده شده است.

inline.

{background:url(data:image/gif;base64,ROIGODlhEAAQAMQAAORHHOVS}

KuhPGolfo0o/XBs/fNwfjZ0fKCrKUE1lBavAViFIDITImbKC5Gm2hB0SIBCBM

{;QiBOUjIQA7) no-repeat right center

اینلاین کردن عکس SVG

عکسهای با فرمت SVG را می توانید با هر ادیتور متنی مانند notepad در ویندوز باز کرده و کدهای درون آن را مشاهده کنید. اگر عکس SVG را با ادیتور متنی باز کنید، دو تگ <svg> و <svg/> را می توانید در ابتدا و انتهای کدها ببینید. برای inline کردن عکس SVG دقیقا به همین تگ باز و بسته شدن svg و هر آنچه در بین آنها است نیاز دارید.

برای اضافه کردن یک عکس با فرمت SVG از روش زیر عمل کنید:

<“svg width=”100” height=”100>

<circle cx=”50″ cy=”50″ r=”40″ stroke=”green” stroke-width=”4″ fill=”yellow>

<svg/>

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

تکنیک CSS immage Sprites

در ارتباط با موضوع تکنیک CSS immage Sprites می توان گفت ابتدا در دهه ۸۰ میلادی تولید کنندگان بازی های آتاری و کمدو برای بالا بردن کارایی سخت افزار اقدام به ترکیب عکس های کوچکی که در صحنه های مختلف بازی استفاده می شد با یکدیگر کردند و سپس با گذاری عکس بزرگتر تولید شده در مموری، قسمتهایی از عکس بزرگتر را در صحنه هایی که می خواستند نمایش می دادند.

تکنیک CSS immage Sprites دقیقا از همان تنوری دهه ۸۰ بازی های آتاری تبعیت می کند. در تکنیک CSS Sprites شما می توانید تعدادی عکس را در یک عکس جدید در کنار یکدیگر قرار دهید و در حقیقت یک فایل عکس داشته باشید که تعدادی عکس دیگر در آن در موقعیت های مختلف در کنار یکدیگر قرار گرفته باشند. سپس شما می توانید عکس مذکور را یک بار بار گذاری کردهو با استفاده از مشخص کردن فاصله هر عکس کوچک از لبه های عکس بزرگ و همچنین تعیین پهنای هر عکس کوچک در CSS، اقدام به نمایش عکس کوچک مورد نظرتان کنید.

بنابراین از تکنیک CSS Sprites جهت بهینه سازی عکس استفاده نمی شود و جهت بهینه سازیتعداد درخواست هایی که به سرور برای بارگذاری عکس ها ارسال می شود، استفاده میشود.

چه زمانی از CSS Image Sprites استفاده کنیم

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

چه زمانی از CSS Image Sprites استفاده نکنیم

ادغام کردن عکس هایی که فقط در یک صفحه بارگذاری می شوند با عکسهایی که در صفحات گوناگون بارگذاری می شوند، باعث بالا رفتن file size عکسی می شود که در CSS Sprites استفاده می شود و عملا باعث بارگذاری دیرتر دیگر صفحات می شود. همچنین ادغام عکس های با file size بالا نیز منجر به تولید یک فایل با file size خیلی بالا می شود که بارگذاری آن به زمان زیادی نیاز خواهد داشت که از دیدگاه سئو منطقی نیست.

استفاده از CSS Sprite Generator

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

شما می توانید با استفاده از ابزار های آنلاین مانند سایت http://css.spritegen.com به راحتی عکس های خود را آپلود کنید و یک عکس بزرگ به همراه کلاس های CSS مورد نیاز و نحوه استفاده از آن در HTML را دریافت کنید.

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