() translation by (you can also view the original English article)
Sa mabilis na mungkahing ito, ipapakilala ko ang simple, subalit sobrang nakakatulong na tool na tinatawag na Hey Meta. Kung ikaw ay interesado na makita kung ano ang itsura ng iyong website’s sharing profile, at gusto mong masigurado na ang ginagamit mong meta tags ay tama, ang Hey Meta ang iyong kailangan. Simulan na natin ito!
Gawing Tama ang Iyong Meta Tags
Suriin ang Iyong Meta Tags
Tingnan ang pagiging epektibo ng kasalukuyang set up ng meta tag ng iyong website sa pamamagitan ng pagpasok ng URL sa input field. May ipapakita sa iyong social card preview (na malamang na ipapakita sa social networks, sharing apps at iba pa.) at ang pamagat, paglalarawan, featured image ng sinasabing URL.
Kung ang iyong web page ay walang kahit na anong meta tags para sa mga items na ito, walang maipapakita.
Gumawa ng Tamang Meta Tags
Kung ang iyong page ay mukhang may kulang na mga detalye,o nagpapakita ng maling (o sub-optimal) metadata maaari mon gamitin ang Hey Data para magawa ang tamang tags para sa iyo. Ilagay ang impormasyon na iyong nais na ipakita sa fields na makikita:
Ganoon din ang maaaring gawin sa paglalarawan sa website, URL, at featured image. Ang nagawang tags ay ipapakita sa previews, at ang markup ay ganito ang magiging itsura:
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 -->
|
Dito
makikita mo ang native HTML meta tags tulad ng like <title>, Twitter tags, at ang Open Graph tags tulad ng
<metaproperty="og:title"> na puwede para sa tamang social sharing. Ang mga tags na ito ay maaaring
ilagay sa ng <head> iyong HTML document.
Konklusyon
Siguraduhing ang iyong meta tags ay ipinapakita ang mga detalye ng iyong website ng tama!
Karagdagang Pagbabasa
