.
اطلاعات کاربری
درباره ما
دوستان
خبرنامه
آخرین مطالب
لینکستان
دیگر موارد
آمار وب سایت

Open Graph

Open Graph
Open Graph

درود خدمت شما مخاطب نازنین که هم‌اکنون وقت و انرژی خود را بسیج کرده‌اید تا قدم دیگری بردارید در جهت پی‌شبرد وردپرس خودتان و یا احتمالا با اذهانی آشفته از بازار شلوغ وب‌مسترها سر از این پیج درآوردید. به هر حال خوش آمدید. موضوع بحث من در این گفتگو دو طرفه خواهد بود که تلاش خواهم کرد ابهامات و شبهات نوشته را در دیدگاه‌ها دنبال نمایم. Open Graph Meta Data in WordPress (متادیت‌های اپن گراف در وردپرس) بحث امروز ماست. اغلب در افزونه‌های سئو و تا حدود زیادی نیز در جت پک، با Open Graph سروکار داشته‌ایم. زمانی که وردپرس، مجهز به جت پک است و همان وردپرس از یاست استفاده می‌کند، نیاز دارد که اپن گراف را در یاست غیر فعال کند، چرا که در غیر این صورت ممکن است وردپرس با خطای oops روبرو شود.
 
بسیاری از افراد می‌پرسند که اپن گراف چه کاربردی در وردپرس دارد؟ یکی از کاربردهای گراف در وردپرس این است که متاهای آن قابلیت اتصال به سوشال نتوورک‌های وب‌سایت را دارند که در ادامه خواهیم دید به چه شکلی بر سئوی سایت با کمک شبکه‌های اجتماعی موثر است. اغلب زمانی که فرد، وب‌سایت خود را در الکسا و یا مراجع رتبه‌بندی جستجو می‌کند، از خود می‌پرسند که صفحات سوشال وبسایت من، هزاران لایک و فالوور دارند، پس چرا در اینجا نشان داده نمی‌شود و گوگل هواداران وبسایت من در شبکه‌های اجتماعی را نمی‌بیند یا اگر میبیند چرا تعداد آن را درست محاسبه نمی‌کند؟  نحوه اضافه کردن فیس‌بوک و بازکردن نمودار متای داده‌ها در وردپرس می‌تواند در تفهیم این موضوع به جستجوگرها به کمک مدیران وردپرس بیاید.
 
مراجع بسیاری تا کنون در رابطه با نحوه اضافه کردن دکمه لایک فیسبوک به وردپرس یا فالو توئیتر و پلاس گوگل مطالب نوشته‌اند و برخی نیز شجاعت کرده و استفاده کرده‌اند که بنده برای توصیف آنها از واژه مهملات و صفحه پرکن‌های بی‌مصرف یاد می‌کنم. مهملاتی که نه تنها سودی ندارند بلکه وردپرس را کند و کند و کندتر می‌کنند و هرگز نیز در تفهیم تعداد هواداران سوشال‌ها به جستجوگرها کارایی ندارند و در کنار این ناکارمدی، از آنجا که در ایران، بازشدن پروتکل HTTPS با تاخیری 2 ثانیه‌ای همراه است، قرار دادن این دکمه‌ها، سرعت لود هر قالبی را به همین میزان کند می‌کند. بنده این مهملات را به هیچ مدیری پیشنهاد نمی‌کنم. توضیح خواهم داد که چگونه می‌توان با بازکردن نمودار متاها در شبکه‌های اجتماعی، تمام این مسائل را حل کرده و وردپرس خود را سئو کنید.
 
سه روش را معرفی می‌کنیم که هر مدیری به خواست خود می‌تواند از آن استفاده نماید. ما در وب‌سایت خود نیز از این تکنیک استفاده می‌کنیم. این تکنیک نه تنها کمک می‌کند که متهای خود را برای سوشال‌ها تشریح و سئو کنید، بلکه با ایجاد ارتباطی که بین جستجوگرها با پیج‌های فیسبوک ایجاد شده، به نوعی متاها برای جستجوگرها نیز تعریف و سئو می‌شوند و امروزه جستجوگرها نیز به گستردگی اپن گراف در تم‌های وردپرس اهمیت خوبی می‌دهند.
 

اولین مسیر برای مدیرانی است که از افزونه by YoastWordPress SEO  استفاده می‌کنند. این افزونه بر روی تنظیمات خود، اپن گراف را نیز حمل می‌کند که مدیران می‌توانند از قسمت Add Open Graph meta data، این بخش را فعال نموده و باقی کار را به افزونه بسپارند (البته مدیر نباید فراموش کند که شیر مطالب است که این بخش را راه‌اندازی میکند). طبق تصویر زیر عمل کنید.

Open Graph
Open Graph

زمانی که نام هر فایلی برای قرار گیری کد برده می‌شود، مدیر باید فایل نام برده را در پنل هاست وردپرس خود پیدا کرده و کد را در آنجا ذخیره نماید. چرا که اجرای فرمان در سرور، مستقیم در سایت اجرا می‌شود و فرمان توسط قالب اجرا می‌شود، به عبارت دیگر سرور دستور را می‌گیرد، به سایت منتقل می‌کند و سایت اجرا می‌کند. اما در مرحله پیشین چنین نبود زیرا قالب نمی‌تواند دستور را بگیرد و به سرور القا کند و سرور اجرا کننده باشد. اما در ادامه می‌توانید کد مورد نظر را که در پیکوفایل آپلود نموده‌ام، دانلود کرده و در انتهای functions.php قرار دهید و فراموش نکنید که منظور از این فایل، functions.php قالب وردپرس است.زمانی که به شما گفته می‌شود کدی را در functions.php و یا هر فایل دیگری در وردپرس اضافه کنید، اگر نویسنده جای دقیق قرارگیری را درج نکرده استفاده نکنید، اگر نویسنده نحوه کارکرد هک را تشریح نکرده استفاده نکنید، اگر نویسنده قبلا کد را تست نکرده استفاده نکنید، اگر مجموعه اعتبار اجرایی در ارائه هک و کد ندارد استفاده نکنید، اگر ارائه دهندگان را نمی‌شناسید از هک و کد آن استفاده نکنید. زمانی که قصد کپی کردن کد در functions.php را دارید، هرگز این کار را محیط مدیریت وردپرس انجام ندهید چرا که کل وبسایت شما از کار خواهد افتاد و با ارور 500 مواجه خواهید شد، زیرا محیط مدیریت وردپرس، محیط اجرای فرمان برای سرور نیست و حتی اگر کد صحیح نیز باشد، مدیر با ارور 500 مواجه می‌شود و قطعی سایت رخ می‌دهد.اما مسیر سوم برای افرادیست که نه از یاست استفاده می‌کنند و نه قصد استفاده از پلاگین را دارند. این مدیران می‌توانند نمودار متای داده به تم وردپرس خود را به صورت دستی و به کمک هک‌های وردپرس انجام دهند. از آنجا که در این روش، مدیر نیاز دارد که کدهای قالب سایت خود را ویرایش کند، تهیه نسخه پشتیبان (بکاپ) از کل سرور و سایت، امری ضروری است. بعد از تهیه نسخه پشتیبان، مدیر می‌تواند با اضافه کردن کد زیر به فایل functions.php، این قابلیت را به قالب سایت خود اضافه نماید. توضیح کوتاهی نیز خواهم داد در رابطه با نحوه قرار دادن این کد و هر هک و کد دیگر در وردپرس.اما هستند افرادی که از یاست استفاده نمی‌کنند و ساختار سئوی سایت آنان بر پایه یاست نیست. این مدیران نیز برای اضافه کردن و گسترش نمودار متای داده‌ها در وردپرس و  ایجاد تعامل بین وردپرس و سوشال نتوورک‌ها، می‌توانند با استفاده از پلاگین رسمی فیس بوک، این کار را انجام دهند. اطلاع دارم که هم اکنون بسیاری در ذهن خود خواهند گفت که ما از  All in One SEO استفاده می‌کنیم. این افزونه نیز چیزی کم ندارد. اگرچه مانند یاست، اپن گراف بر آن سوار نیست اما مشکلی نیز در هدر وردپرس با اضافه کردن این قابلیت ندارد و از آن پشتیبانی می‌کند. اولین اقدام این است که مدیر، افزونه رسمی Facebook plugin را نصب نماید که با فعال سازی آن، اپن گراف نیز در پوسته و وردپرس فعال خواهد شد و با هر اشتراک گذاری، به خوبی وظیفه خود را انجام می‌دهد.زمانی‌که شما Open Graph را فعال می‌کنید، آن را برای تمام سوشال نتوورک‌ها فعال کرده‌اید اما در صورتی کار می‌کند که شما نام کاربری صفحات خود را نیز به یاست معرفی کرده باشید و برای فیسبوک نیز یک مدیر تعریف کنید. بسیاری گمان می‌کنند که تعریف یک مدیر فیسبوک، دسترسی آنان را محدود می‌کند اما چنین نیست. شما در واقع این مدیر فیسبوک را برای افزونه تعریف می‌کنید که توسط اکانت آن مدیر، اپن گراف را به صفحات شما متصل کند و توسط آن با صفحات اجتماعی شما در ارتباط باشد. شما از این پس می‌توانید اطمینان داشته باشید که یاست، متهای شما را برای صفحات شما تشریح می‌کند.

//Adding the Open Graph in the Language Attributes
function add_opengraph_doctype( $output ) {
return $output . ' xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"';
}
add_filter('language_attributes', 'add_opengraph_doctype');
//Lets add Open Graph Meta Info
function insert_fb_in_head() {
global $post;
if ( !is_singular()) //if it is not a post or a page
return;
echo '<meta property="fb:admins" content="
YOUR USER ID"/>';
echo '<meta property="og:title" content="' . get_the_title() . '"/>';
echo '<meta property="og:type" content="article"/>';
echo '<meta property="og:url" content="' . get_permalink() . '"/>';
echo '<meta property="og:site_name" content="
Your Site NAME Goes HERE"/>';
if(!has_post_thumbnail( $post->ID )) { //the post does not have featured image, use a default image
$default_image="http://example.com/image.jpg"; //
replace this with a default image on your server or an image in your media library
echo '<meta property="og:image" content="' . $default_image . '"/>';
}
else{
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'medium' );
echo '<meta property="og:image" content="' . esc_attr( $thumbnail_src[0] ) . '"/>';
}
echo "
";
}
add_action( 'wp_head', 'insert_fb_in_head', 5 );

در قسمت‌هایی که با رنگ قرمز مشخص کرده‌ام، مدیر بایستی سفارشی سازی کرده و مشخصات وردپرس خود را بنویسد. در بخش  replace this with a default image on your server or an imag نیز آدرس تصویری که هنگام شیر مطلب در نتوورک‌ها همراه مطلب ارسال می‌شود، نوشته می‌شود. میتوان این بخش را در اپن گراف تعریف نکرد که بسته به سلیقه مدیر دارد. بلافاصله بعد از اجرای فرمان در functions.php، اپن گراف در هدر قالب باز شده و با اشتراک پست‌ها در سوشال نتوورک، به خوبی عمل می‌کند. از آنجا که این کد، صرفا اپن گراف فیسبوک است و برای پلتفرم‌های دیگر طراحی نشده، لذا توصیه من به تمامی مدیرانی که از یاست استفاده نمی‌کنند، استفاده از افزونه‌های اپن گراف وردپرس است که گراف را برای تمام پلت فرم‌های اجتماعی باز می‌کند که یکی از بهترین نمونه‌های آن، افزونه Open Graph است که می‌توانید آن را دانلود نمایید.

ما همیشه همراه شما هستیملبخند



:: برچسب‌ها: Open Graph,الکسا,وردپرس,Facebook plugin,All in One SEO,شبکه اجتماعی,by YoastWordPress SEO, ,
:: بازدید از این مطلب : 628
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
ن : سایت سیلز
ت : شنبه 10 مهر 1395
.

افزایش سرعت وردپرس

افزایش سرعت وردپرس
افزایش سرعت وردپرس

در این پست می‌خواهیم نحوه بهینه سازی وردپرس با افزونه Autoptimize را آموزش دهیم.
 
زمانی که شما از یک قالب وردپرس و چند افزونه وردپرس استفاده می‌کنید، هر یک از آن‌ها شامل فایل‌های سی‌اس‌اس (CSS) و جاوا اسکریپت (JS) هستند. هر یک از این فایل‌ها بر روی هاست وردپرس و مرورگر کاربر به صورت یک درخواست HTTP جداگانه ارسال می‌شوند. این کار باعث افت سرعت می‌شود و لود مطالب را تا زمانی که این فایل‌ها به صورت کامل لود شوند به تاخیر می‌اندازند.
 
افزونه Autoptimize این مشکل را حل می‌کند.
 
شما می‌توانید این افزونه را از اینجا دانلود کنید.
 
افزونه Autoptimize چه کار می‌کند؟
 
افزونه Autoptimize تمامی فایل‌های سی‌اس‌اس و جاوا اسکریپت قالب و پلاگین‌های سایت‌تان را در یک فایل جداگانه سی اس اس و جاوا اسکریپت برده و آن‌ها را فشرده سازی می‌کند.
 
با این کار تنها یک درخواست برای فایل‌های سی‌اس‌اس و جاوا اسکریپت ارسال می‌شود و سرعت لود سایت بسیار بالا می‌رود.
 
 
برای شروع کار ابتدا افزونه را نصب کنید و بعد به قسمت تنظیمات -> Autoptimize در پنل مدیریت وردپرس‌تان بروید.
افزایش سرعت وردپرس
افزایش سرعت وردپرس
 
چک باکس اول یعنی “بهینه سازی کد HTML”، تمامی کدهای HTML وبسایت‌تان را بهینه و فشرده سازی می‌کند. با انتخاب این چک باکس هیچ تغییری در ظاهر وبسایت‌تان بوجود نمی‌آید بلکه سرعت سایت‌تان به طرز عجیبی بالا می‌رود.
 
 
با انتخاب چک باکس “بهینه سازی کد HTML”، چک باکس “نگه داشتن کامنت‌های HTML” از حالت غیرفعال در می‌آید. با انتخاب چک باکس “نگه داشتن کامنت‌های HTML”، تمام کامنت‌های صفحه باقی می‌مانند و حذف نمی‌شوند ولی اگر این چک باکس را فعال نکنید تمامی کامنت‌های صفحه پاک می‌شوند.
 
 
چک باکس “بهینه سازی کد Javascript”، تمامی فایل‌های جاوا اسکریپت قالب و پلاگین‌هایتان را در یک فایل جداگانه جاوا اسکریپت می‌برد و آن‌ها را فشرده می‌کند و سپس این فایل فشرده شده را به آخر کدهایتان یعنی قبل از بسته شدن تگ body می‌برد. با این کار سرعت سایت‌تان بسیار بالا می‌رود و ابتدا کدهای سایت‌تان لود می‌شوند و پس از نمایش کامل سایت، کدهای جاوا اسکریپت لود می‌شوند.
 
ممکن است نمایش صحیح سایت‌تان به کدهای جاوا اسکریپت و جی‌کوئری متکی باشد و لود این فایل‌ها در اول الزامی باشد، نگران نباشید چون در ادامه و در تنظیمات پیشرفته این افزونه این مشکل را برطرف می‌کنیم.
 
 
 
چک باکس “بهینه‌سازی کد CSS” ، تمامی فایل‌های سی‌اس‌اس قالب و پلاگین‌هایتان را در یک فایل جداگانه سی اس اس می‌برد و آن‌ها را فشرده می‌کند. این کار باعث افزایش سرعت سایت‌تان می‌شود.
 
 
اگر چک باکس “بهینه سازی کد CSS” را انتخاب کرده باشید چک باکس دیگر به نام “تولید data: URIs برای تصاویر” از حالت غیرفعال در می‌آید. اگر شما از چند تصویر کوچک مثل بکگراندها و… در سی‌اس‌اس استفاده می‌کنید، با انتخاب این چک باکس تصاویر به جای این که جداگانه دانلود شوند، به داده‌های خطی تبدیل شده و همراه فایل سی اس اس دانلود می‌شوند.
 
 
 

اگر شما از CDN استفاده می‌کنید مانند Amazon AWS یا MaxCDN، آدرس CDN خود را در فیلد متنی “ریشه آدرس CDN” وارد کنید. اگر شما از CDN استفاده نمی‌کنید این فیلد متنی را خالی بگذارید.

افزایش سرعت وردپرس
افزایش سرعت وردپرس

 

اگر شما توسعه دهنده هستید یا می‌خواهید کنترل بیشتری بر روی این افزونه داشته باشید باید تنظیمات پیشرفته را هم تنظیم کنید. برای این کار دکمه نمایش تنظیمات پیشرفته را انتخاب کنید.

افزایش سرعت وردپرس
افزایش سرعت وردپرس

افزایش سرعت وردپرس
افزایش سرعت وردپرس

افزایش سرعت وردپرس
افزایش سرعت وردپرس

 
 
همان‌طور که در بالا گفته شد بعضی از قالب‌ها به جاوا اسکریپت یا جی‌کوئری متکی هستند و برای نمایش صحیح سایت باید حتما این کدها در ابتدا و قبل از نمایش سایت لود شوند.
 
با انتخاب چک باکس “بارگذاری Javascript در تگ head”، دیگر فایل‌های جاوا اسکریپت به انتهای کدها نمی‌روند و در قسمت (تگ) head لود می‌شوند.
 
 
با انتخاب چک باکس “فقط اسکریپت‌های موجود در تگ <head> بهینه سازی شوند؟ (deprecated)“، فقط فایل‌های جاوا اسکریپتی که در قسمت (تگ) head وجود دارند بهینه و فشرده سازی می‌شوند و بقیه فایل‌های جاوا اسکریپت به طور معمول و بدون فشرده سازی لود می‌شوند.
 
 
اگر شما می‌خواهید فایل‌های جاوا اسکریپت خاصی توسط این افزونه بهینه سازی نشوند، نام آن‌ها را در فیلد متنی “محروم کردن اسکریپت‌ها از Autoptimize” وارد کنید.
 
 
اگر شما فکر می‌کنید که اسکریپت‌هایتان ممکن است دچار خطا شوند، با انتخاب چک باکس “اضافه نمودن دسته بندی بوسیله try-catch؟” می‌توانید خطاهای اسکریپت‌هایتان را مدیریت کنید و مانع نمایش خطا و اجرانشدن ادامه اسکریپت شوید.
 
 
 
با انتخاب چک باکس “فقط استایل‌های موجود در تگ <head> بهینه سازی شوند؟ (deprecated)“، فقط فایل‌های سی اس اس که در قسمت (تگ) head وجود دارند بهینه و فشرده سازی می‌شوند و بقیه فایل‌های سی اس اس به طور معمول و بدون فشرده سازی لود می‌شوند.
 
 
با انتخاب این چک باکس‌ها، تمامی کدها و فایل‌های سی اس اس به طور خطی یا inline تبدیل می‌شوند. توصیه می‌شود که این دو چک باکس را انتخاب نکنید چون باعث افت سرعت سایت‌تان می‌شود.
 
 
اگر شما می‌خواهید فایل‌های سی اس اس خاصی توسط این افزونه بهینه سازی نشوند، نام آن‌ها را در فیلد متنی “محروم کردن CSS ها از Autoptimize” وارد کنید.
 
اطلاعات CDN
 
در این قسمت می‌توانید اطلاعات CDN سایت‌تان را تماشا کنید.
 
 
این چک باکس به صورت پیش‌فرض فعال است و اسکریپت‌ها و فایل‌های سی اس اس فشرده شده را به صورت فایل‌های استاتیک ذخیره می‌کند. اگر وب سرور شما قادر به فشرده سازی و ایجاد expiry برای فایل شما نیست تیک این گزینه را بردارید.
 

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

ما همیشه همراه شما هستیملبخند



:: برچسب‌ها: Autoptimize,بهینه سازی کد HTML,تنظیمات HTML,تنظیماتJavascript,تنظیمات CSS,تنظیمات CDN,اطلاعات CDN, ,
:: بازدید از این مطلب : 545
|
امتیاز مطلب : 0
|
تعداد امتیازدهندگان : 0
|
مجموع امتیاز : 0
ن : سایت سیلز
ت : شنبه 10 مهر 1395
.

نویسندگان
آرشیو مطالب
مطالب تصادفی
مطالب پربازدید
تبادل لینک هوشمند
پشتیبانی