() translation by (you can also view the original English article)
في هذه النصيحة السريعة ، سأقدم لك أداة بسيطة ولكنها مفيدة جدًا تسمى Hey Meta. إذا كنت مهتمًا بمعرفة الشكل الذي يظهر به الملف الشخصي لمشاركة موقعك على الويب ، وتريد التأكد من صحة العلامات الوصفية التي تستخدمها ، فكل ما تحتاجه هو Meta. دعونا نتعمق اكثر
احصل على علامات Meta بطريقة صحيحة
التحقق من علامات "Meta"
تحقق من فعالية إعداد العلامة الوصفية الحالية لموقع الويب الخاص بك عن طريق إدخال عنوان "URL" في حقل الإدخال. ستظهر لك معاينة للبطاقة الاجتماعية (ما يُرجح أن يتم عرضه على الشبكات الاجتماعية ومشاركة التطبيقات وما إلى ذلك) والعنوان والوصف والصورة المميزة لعنوان "URL".
إذا لم يكن لصفحة الويب أي علامات وصفية "Meta" لهذه العناصر على الإطلاق ، فلن يتم عرض أي شيء.
إنشاء علامات ال"Meta" الصحيحة
إذا كانت صفحتك تفقد تفاصيلها ، أو تعرض بيانات وصفية غير صحيحة (أو دون المستوى الأمثل) ، يمكنك استخدام "Hey Meta" لإنشاء علامات صحيحة لك. أدخل المعلومات التي ترغب في عرضها في الحقول المعروضة:
يمكن القيام بذلك نفسه لوصف موقع الويب وعنوان "URL" والصورة المميزة. سيتم عرض العلامات المنشأة في المعاينات ، وسيبدو الترميز على النحو التالي:
1 |
<!-- HTML Meta Tags -->
|
2 |
<title>Test website</title> |
3 |
<meta name="description" content="This is the website description. Nice eh?"> |
4 |
|
5 |
<!-- Google / Search Engine Tags -->
|
6 |
<meta itemprop="name" content="Test website"> |
7 |
<meta itemprop="description" content="This is the website description. Nice eh?"> |
8 |
<meta itemprop="image" content="https://lorempixel.com/400/200/"> |
9 |
|
10 |
<!-- Facebook Meta Tags -->
|
11 |
<meta property="og:url" content="https://nothing.com"> |
12 |
<meta property="og:type" content="website"> |
13 |
<meta property="og:title" content="Test website"> |
14 |
<meta property="og:description" content="This is the website description. Nice eh?"> |
15 |
<meta property="og:image" content="https://lorempixel.com/400/200/"> |
16 |
|
17 |
<!-- Twitter Meta Tags -->
|
18 |
<meta name="twitter:card" content="summary_large_image"> |
19 |
<meta name="twitter:title" content="Test website"> |
20 |
<meta name="twitter:description" content="This is the website description. Nice eh?"> |
21 |
<meta name="twitter:image" content="https://lorempixel.com/400/200/"> |
22 |
|
23 |
<!-- Meta Tags Generated via https://heymeta.com -->
|
هنا سترى علامات "HTML "meta الأصلية مثل<title>، علامات "تويتر" ، وعلامات "Open Graph" مثل <meta property="og:title"> التي تسمح بالمشاركة الاجتماعية السليمة.هذي العلامات يمكن وضعها في<head> بملف الHTML الخاص بك.
الاستنتاج!
تأكد من أن العلامات الوصفية تعرض تفاصيل موقعك على الويب بشكل صحيح!
مزيد من القراءة
