yazn_108 image

يزن احمد(@yazn_108)مطور مواقع فرونت اند

لا تتصل بنا بل تواصل معي

لا حاجة للتكلف في صياغة الرسالة كل ما تحب ان اساعدك فيه، اخبرني عنه. اذا عندك اي شيء تحب تخبرني عنه فانا جاهز لمساعدتك والهدف من المنصة هو البساطة وتجنب التكلفات والرسميات التي اعتدنا عليها في المواقع حتى اصبحت جميع المواقع لها نمط واحد وان تنوعت في الافكار والاشكال.اهلا وسهلا ومرحبا بك

اشترك في النشرة البريدية

ما راح أزعجك برسائل كثيرة، كل القصة إنك تحط بريدك عشان يوصلك تنبيه أول ما أنشر مقالات جديدة. بسيطة وسهلة 👌 أهلاً بك.

هدف المنصة/من انا؟شروط الاستخدام

© جميع الحقوق محفوظة لـyazn_108

اظهار بيانات محددة عند مشاركة رابط الموقع

الـOpen Graph هي مجموعة وسوم خاصة بالشبكات الاجتماعية (Facebook, LinkedIn, Twitter...). وظيفتها تحديد كيف يظهر رابط موقعك عند مشاركته (العنوان، الوصف، الصورة).

  1. ماهي نتيجة استخدام meta tags؟
  2. ماهو open graph؟
  3. كيف يمكن توليدها بشكل تلقائي؟
  4. ما دور Meta Tags وOpen Graph في تحسين ظهور صفحات الويب على محركات البحث ومنصات التواصل الاجتماعي؟
  5. اشترك في النشرة البريدية

ماهي نتيجة استخدام meta tags؟

تستخدم لعرض بيانات عن محتويات الرابط عند مشاركته كما في الصورة وهذا الامر يرفع نسبة الثقة عند المستخدمين ويظهر موقعك بشكل احترافي.

ماهو open graph؟

الـOpen Graph هو بروتوكول (Open Graph Protocol) أنشأته شركة فيسبوك سنة 2010، والغرض منه هو جعل أي رابط على الانترنت يتم مشاركة مع بعض التفاصيل عن محتويات الرابط يتم تحديدها من قبل صاحب الصفحة التابع لها الرابط.

html

<!-- HTML Meta Tags -->
<title>Front End Web Developer</title>
<meta name="description" content="I am Yazn, a front-end web developer from Syria. I seek professionalism in the field of website interface development. This is an exhibition of my work in which I present my new works on an ongoing basis">

<!-- Facebook Meta Tags -->
<meta property="og:url" content="https://yazn-108.github.io/">
<meta property="og:type" content="website">
<meta property="og:title" content="Front End Web Developer">
<meta property="og:description" content="I am Yazn, a front-end web developer from Syria. I seek professionalism in the field of website interface development. This is an exhibition of my work in which I present my new works on an ongoing basis">
<meta property="og:image" content="https://raw.githubusercontent.com/yazn-108/yazn-108.github.io/main/imgs/open-graph-image.png">

<!-- Twitter Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta property="twitter:domain" content="yazn-108.github.io">
<meta property="twitter:url" content="https://yazn-108.github.io/">
<meta name="twitter:title" content="Front End Web Developer">
<meta name="twitter:description" content="I am Yazn, a front-end web developer from Syria. I seek professionalism in the field of website interface development. This is an exhibition of my work in which I present my new works on an ongoing basis">
<meta name="twitter:image" content="https://raw.githubusercontent.com/yazn-108/yazn-108.github.io/main/imgs/open-graph-image.png">

<!-- Meta Tags Generated via https://www.opengraph.xyz -->

كيف يمكن توليدها بشكل تلقائي؟

من خلال الدخول إلى موقع www.opengraph.xyz تقوم بادخل رابط موقعك وهو يعطيك الاكواد الاساسية مع اضافة البيانات التي استطاع التعرف عليها ولكن هذا لا يمنع من انك تحتاج للتعديل عليها بشكل يدوي.

ما دور Meta Tags وOpen Graph في تحسين ظهور صفحات الويب على محركات البحث ومنصات التواصل الاجتماعي؟

فعليا الـOpen Graph ليس له تدخل فعلي في ارشفة موقعك في نتائج بحث Google على سبيل المثال ولكن كثرة النقر على رابط موقعك بسبب شكلة الاحترافي يساهم في زيادة موثوقيته عند محركات بحث Google وهنا يأتي دور الـMeta Tags التي سوف اتكلم عنها بشكل بسيط لأن سيتم الحديث عنها في مقالة منفصلة إن شاء الله؛ الـMeta Tags تساعد محركات البحث (مثل Google و Bing) على فهم محتوى موقعك وبالتالي تعطيه ترتيب في نتائج البحث عندما يقوم احد المستخدمين بالبحث عن شيء موقعك له ارتباط فيه.