اپن گراف (Open Graph) در طراحی سایت دروپال

اپن گراف (Open Graph) در طراحی سایت دروپال

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

اما در بسیاری از موارد پیش آمده که شما لینک وب سایتی را در محلی کپی کرده و مشاهده کرده اید که خلاصه ای از نوشته و عکس و نام وب سایت به صورت خلاصه وار به نمایش در آمده و یا در شبکه های اجتماعی مانند: Twitter، +Goolge، Facebook برای شما این امر بسیار پیش آمده است اما این امر چگونه ممکن است؟ این امر توسط متا تگ های های با نام اختصاری اپن گراف (Open Graph) صورت میگیرد تفاوتی که تگ های اپن گراف (Open Graph) به متا تگ های معمولی دارند در آنها گزینه ای با عنوان OG استفاده شده است. در این نوع تگ ماتگ هایی با عناوین: og:image، og:site_name،og:url، og:description، og:title، og:type را بیشتر مشاهده خواهیم کرد در ادامه نحوه نصب و اجرای این نوع تگ را بر روی طراحی سایت شما آموزش خواهیم داد.

نصب ماژول متاتگ (Metatag)

در مقالات گذشته در مورد ماژول متاتگ (Metatag) صحبت کردیم و نحوه نصب و تنظیم این ماژول را به شما آموزش دادیم جهت مشاهده این آموزش میتوانید به این لینک مراجعه کنید.

پس از نصب ماژول فوق در صفحه ماژول ها گزینه ای را با عنوان Metatag: OpenGraph تیک دار کنید تا فعال شود پس از فعال شدن این ماژول شما باید وارد صفحه تنظیمات آن شوید برای وارد شدن به صفحه تنظیمات ماژول از این لینک بعد از نام وب سایت خود استفاده کنید: /admin/config/search/metatags پس از وارد شدن در صفحه فوق شما سه گزینه را مشاهده خواهید کرد:

  • Global
  • Global: صفحه اول
  • محتوا

شما در این قسمت نیازی به این ندارید که برای هر صفحه خود به صورت جدا گانه مقداری را تعیین کنید میتوانید توسط تنظیمات گزینه Global برای تمامی تنظیمات صفحه های داخلی و اول خود مقدار تعیین کنید به همین منظور وارد تنظیمات Global شوید تا مقادیر آن برای شما نمایان شوید به ترتیب مقادیر زیر را مقدار دار کنید:

  • نام سایت (site name): نام وب سایت خود را قرار دهید
  • نوع محتوا (content type): بسته به نوع کاربری وب سایت خود این فیلد را مقدار دهی کنید
  • آدرس سایت (Page URL): آدرس وب سایت خود را در این قسمت قرار دهید
  • نام صفحه (Content title): در این قسمت از Token های فعال مقدار [site:name] را قرار دهید
  • توضیحات صفحه (Content description): توضیحات خلاصه وب سایت خود را در آن قرار دهید
  • Image (تصویر) در این قسمت باید به وسیله ماژول Imagecache Token برای نود های خود تصویر قرار دهید

در این قسمت با تنظیمات فوق شما OG های معمول را برای وب سایت خود تنظیم کردید.

متا های شبکه های اجتماعی

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

  • Metatag: Google+
  • Metatag: Facebook
  • Metatag: Twitter Cards

پس از فعال سازی زیر ماژول های زیر به صفحه تنظیمات آنها باید بروید برای رفتن به صفحه تنظیمات آنها بعد از نام سایت خود ادرس زیر را وارد کنید: /admin/config/search/metatags در صفحه باز شده بر روی گزینه Global کلیک کنید.

تنظیمات متای فیسبوک FACEBOOK 

مقداری را با عنوان FACEBOOK پیدا کرده تا عناوین زیر ظاهر گردد:

  • نشانی اپ (Application ID): نشانی اپلیکشین خود را وارد کنید
  • صفحه‌ها (Pages): آدرس صفحه فیسبوک خود را وارد کنید

تنظیمات متای TWITTER CARD

مقدار Twitter Card را پیدا و فعال و مقدار زیر را برای آن مقدار دهی کنید:

  • نوع توییتر (Twitter card type): مقدار این فیلد را بر روی Summery قرار دهید
  • نشانی توییتر سایت (Site's Twitter account): مقدار این فیلد را برابر نام اکانت خود که با @ شروع شده قرار دهید
  • نشانی منتشر کنند محتوا (Creator's Twitter account): مقدار این فیلد را برار نشانی منتشر کننده خود که با @ شروع شده قرار دهید
  • نشانی صفحه (Page URL): مقدار این فیلد را برابر نشانی صفحه توییتر خود قرار دهید

تنظیمات متای Google+

مقدار GOOGLE+ را پیدا و فعال کرده تا عنوان زیر ظاهر گردد:

  • نوع صفحه (Page type): مقدار این فیلد را برابر نوع کاربری طراحی سایت خود قرار دهید
  • عنوان (Title): مقدار این فیلد را برابر یکی از Token های فعال [current-page:title] قرار دهید
  • Image URL (آدرس عکس): مقدار این فیلد را برابر عکس وب سایت یا محتوای خود قرار دهید
  • Author URL (آدرس نویسنده): نشانی نویسنده خود را از گوگل اکانت خود قرار دهید
  • Publisher URL (کنتشر کننده): مقدار این فیلد را نشانی صفحه منتشر کننده گوگل پلاس خود را قرار دهید