Çözüldü Site önizlemesi nasıl eklenir?

ÜçyüzGoneBeş · 20 Mart 2024

Selam, örnek olarak Discord'da bir sitenin bağlantısını attığımızda, altında embed şeklinde o sitenin bilgilerini içeren bir kutucuk oluyor. Örnek olarak Techolay'ın böyle gözüküyor;

Ancak, iş kendi siteme geldiğinde sadece bağlantı var.

Bunu nasıl Techolay'ın olduğu gibi düzenleyebilirim? Web'de bu durumu nasıl araştıracağımı bilmediğim için pek sonuca varabildiğim söylenemez.

Yonga · 20 Mart 2024

Meta tagler ile

W3Schools.com

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

<meta>: The metadata element - HTML: HyperText Markup Language | MDN

The <meta> HTML element represents metadata that cannot be represented by other HTML meta-related elements, like <base>, <link>, <script>, <style> or <title>.

developer.mozilla.org

Burada deneyebilirsin:

Meta Tags — Preview, Edit and Generate

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!

metatags.io

Bunlar da benim platformumdan örnekler:

ÜçyüzGoneBeş · 20 Mart 2024

@Yonga Üstte head'lerin arasına mı atacağım?

Yonga · 20 Mart 2024

Silinen üye dedi:
@Yonga Üstte head'lerin arasına mı atacağım?

Evet

Yapabildiğini yap takıldığın yeri ss at bakayım ben.

Vavien. · 20 Mart 2024

Silinen üye dedi:
@Yonga Üstte head'lerin arasına mı atacağım?

head'in içine. Bir tane olur zaten.

Paylaşılan siteden örnek. image, title ve description; og: şeklinde de olur.

Kod:

<meta property="og:image" content="https://metatags.io/images/meta-tags.jpg">
<meta property="og:title" content="Meta Tags — Preview, Edit and Generate">
<meta property="og:description" content="With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, Twitter and more!">

Open Graph protocol

The Open Graph protocol enables any web page to become a rich object in a social graph.

ogp.me

ÜçyüzGoneBeş · 20 Mart 2024

@Yonga @Vavien. Güncellenmesi geç mi sürüyor? Örnek olarak index.html'in içine;

HTML:

<!-- Primary Meta Tags -->
<title>copluk.</title>
<meta name="title" content="copluk." />
<meta name="description" content="selam, coplugume davetlisin." />

<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="http://elricstein.com.tr/" />
<meta property="og:title" content="copluk." />
<meta property="og:description" content="selam, coplugume davetlisin." />
<meta property="og:image" content="images/meta.png" />

<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="http://elricstein.com.tr/" />
<meta property="twitter:title" content="copluk." />
<meta property="twitter:description" content="selam, coplugume davetlisin." />
<meta property="twitter:image" content="images/meta.png" />
    <link reL="icon" type="image/jpg" href="favicon.jpg">
    <meta name="author" content="harrnish @codegrid">

Bu şekil ayarladım. Ancak Discord üzerimden kontrol ettiğimde şu şekil duruyor.

Son olarak, embedin solunda renk var. Onu nasıl düzenlerim?

Vavien. · 20 Mart 2024

og olmayan şekilde de koyun. Varsayılanını o gibi duruyor.

Silinen üye dedi:
Son olarak, embedin solunda renk var. Onu nasıl düzenlerim?

<meta name="theme-color" content="#006ef0">

Yonga · 20 Mart 2024

Discord'da değil Meta Tags — Preview, Edit and Generate adresinden kontrol et.

Vavien. dedi:
head'in içine. Bir tane olur zaten.

İki tane derken şu şekilde olduğu için demek istedi bence <head> </head>

ÜçyüzGoneBeş · 20 Mart 2024

Hallettim hocam. İkinize de teşekkürler.

Yonga · 20 Mart 2024

Silinen üye dedi:
Hallettim hocam. İkinize de teşekkürler.

♥ Yolun açık olsun.