SEO

Snapchat ve Instagram'a Google'ın cevabı

Amsterdam'da AMP Conf 2018 sırasında yapılan birçok heyecan verici duyuru arasında, Snapchat ve Instagram Öyküleri'ne benzer yeni bir format olan ve hızlandırılmış yeni mobil sayfalar (AMP) bileşeni kullanılarak uygulanan AMP Öyküleri'nin tanıtımı yer alıyordu.

Snapchat ve Instagram'ın aksine Kendi ilgili platformları içindeki özellikler olan hikayeler, AMP Hikayeleri bir mobil Google arama motoru sonuç sayfasında (SERP) bulunacak. Geri kalan AMP Projesinin geri kalanında olduğu gibi, diğer platformlar da biçimi kullanacak. Bu, kullanıcılara, mobil kullanıcıların sevdiği bilinen bir formatta video, ses, resimler ve metin gibi zengin medya özellikleri ile son derece etkileyici bir slayt gösterisi deneyimi kazandırıyor.

Hızlandırılmış mobil sayfaları (AMP) tanıtan bir dakikalık video var. ) Hikaye biçimi:

Henüz heyecanlı mısınız? Öyleyim, ama ne yazık ki, bu yazı olarak kamuya açıklanmamıştır. Amper öyküsü bileşeni halen "deneysel" ve geliştirme modundadır ve başlamak için AMP Dev Kanalı içindeki kullanıcı için etkinleştirilmelidir.

Microsoft, Kablolu dahil olmak üzere önceden onaylanmış yayıncılardan oluşan seçkin bir grup ve CNN – zaten biçimle denemeler yapıyor ve g.co/ampstories adresine gidip ilgili yayıncının adına bir arama başlatarak Google deneyiminde bulunabilir.

Örneğin, "Kablolu" araması, Wired dergisinin web sitesi için tasarladığı AMP Hikayeleri dizisi.

Kendi web sitenizde AMP Hikayeleri'ni denemekle ilgileniyorsanız, burada başlangıç ​​denemesine katılmak için başvurabilirsiniz.

AMP Öyküleri'ni kullanıcıların Google arama ve içeriğinizle etkileşim kurmaları için gerçekten benzersiz bir yol sağlayarak yakın gelecekte kullanıcılara sunulmasını sağlayın.

Bu değişiklikler için önceden hazırlanmaya değer.

AMP Hikayelerinin Avantajları

Instagram ve Snapchat'ın ürününe kıyasla, AMP Hikayeleri için birkaç avantaj var:

  • Bu, içerik yönetimi sistemlerinin (CMS) hazır olmasına yardımcı olmak için kullanabileceğiniz bir öğretici hazırladım.
  • Platformdan bağımsızdır ve bir Twitter veya Pinterest'in kendi platformunda kullanmaya karar vermiş bir biçimi olabilir.
  • Bu, Google arama ile çalışacak ve muhtemelen anahtar kelimeye dayalı amacı yansıtacaktır.

İlk AMP Öykümüzü nasıl birlikte yazabileceğinizi keşfedelim

İlk AMP Öyküsü

Bir AMP Öyküsünün temeli, beklediğiniz gibi, bir AMPHTML sayfası.

Yukarıdaki gibi bir kalıp şablonunu başlangıç ​​noktanız olarak kullanabilirsiniz.

( Not: Bu sütunun geri kalanında etiketlerdeki boşlukları göstermemelisiniz senaryoyu gerçekte yazdığında dahil – Kaldırılması gerekiyor.

Am-story, AMP'nin genişletilmiş bir bileşeni olduğundan, 'ye

bir ek etiketi eklemeniz gerekecek:

Bu noktada, aslında AMP Öyküsü'nü başlatmaya hazırız

Bir AMP Öykü sandığı yaratmak

AMP Öyküsü'nü oluşturan üç ana etiket var; bunları bir araya getirerek bir araya getirerek bir araya getiriyorsunuz genel deneyim:

Ekmekiniz olarak etiketi ile başlayın. Geri kalanlar soğuk algınlığı kesikleriniz. – sayfa > içinde kapsüllenmiş ve sonra -grid > -page > içinde kapsüllenmiştir. 19659005] Belirli bir köprü metni biçimlendirme dili (HTML) sayfasında yalnızca bir etiketiniz olacaktır.

Beklediğiniz gibi bir AMP Öyküsü içinde tek bir "slayt" temsil eder. Muhtemelen AMP Hikayenizde çoklu slaytlara sahip olacaksınız – bu da bir anlam ifade eder – bu etiketlerden birçoğuna içinde sahip olursunuz.

Son olarak, her içinde bir veya birkaç sahip olursunuz. ] etiketleri, CSS Grid düzenlerine dayalı, her bir slayt içinde çeşitli öğelerin düzenlenmesi için kullanılan bir etiket.

İlk AMP Öykünüzü oluşturmanın ardındaki temel kavram budur. Şimdi, mevcut ek yapılandırmalara ve seçeneklere biraz daha derine girelim.

Bir öğesi ve kapanış etiketi ile başlıyoruz. Bu, HTML sayfamızın içinde izin verilen tek unsur olacaktır.

özniteliğini bağımsız olarak bir gereksinim olan eklemeliyiz ve daha sonra, ek olarak eklenebilir:

  • bookend-config-src. Bunu, AMP Öyküsü'nün son ekranında bulunan sosyal paylaşım seçenekleri ve ilgili bağlantılar hakkında bilgi sağlayan bir javascript nesne gösterimi (JSON) bitiş noktası belirtmek için kullanabilirsiniz. (Biz buna geri döneceğiz.)
  • background-audio. Bütün hikaye deneyiminde oynayacak bir ses dosyası belirleyebiliriz. Örneğin, bu bir MP3 dosyası olabilir.

Sonunda, etiketiniz şöyle görünebilir:

AMP Öyküsü'ndeki her slayt için bir amp öykü sayfası gerekir. Her bir öğenin her bir sayfa için benzersiz bir değer olması gereken bir gerekli kimlik özelliği vardır.

Ardından eklemeyi seçebileceğiniz iki isteğe bağlı özellik vardır:

  • otomatik ilerletme. Otomatik ilerleme için tek bir slaydı zorlayarak bir süre ayarladık. Örneğin auto-advance-after = "5s" olarak ayarlarsak, beş saniye geçtikten sonra AMP Hikayesi bir sonraki slayda ilerleyecektir.
  • background-audio. seviyesinde kullanılan, AMP Öyküsü deneyiminin tamamında oynayacak olan özellikten farklı olarak, o slaydı görüntülerken oynayacak bir ses dosyası ayarlayabiliriz.

Örneğin, şuna benzer: 19659048] Artık bir veya daha fazla öğemiz var, içeriğini belirlemeye başlayabiliriz. içindeki ve özel öğe gibi diğer öğeleri de kullanabiliriz. Bu öğeler, alt katta belge nesne modelinde (DOM) bulunan alt katta ve en sonuncusu da üstte olacak şekilde aşağıdan yukarıya katlanır.

içindeki bu öğelerin her biri, çeşitli animasyon niteliklerinden biriyle kendine özgü animasyon uygulanmış:

  • animate-in. Bir öğeyi canlandıracaksanız, giriş animasyonunu temsil ettiği için bu gerekli. solmaya ve soldaki sinek gibi değerler olarak önceden tanımlanmış animasyonlar vardır. Tam bir liste için belgelere bakın.
  • animasyon süresi boyunca. Anılan animasyonu kısaltmak veya uzatmak isterseniz, bir birimi belirleyebilir ve animasyon sürenizin uzunluğunu belirtebilirsiniz.
  • animate-in-delay. Bir animasyonun başlangıcını bir zaman birimi belirterek erteleyebilirsiniz.
  • animate-in-after. Belirli bir içindeki bir dizideki animasyonların sırasını belirtmek için bunu kullanabilirsiniz. Çeşitli animasyonlu öğelere id öznitelikleri verin, ardından adı geçen animasyonun bir değeri olarak belirtin.

Örneğin şu gibi görünebilir:

Şimdi, içinde daha gelişmiş katmanlı elemanlar keşfedelim ve .

içinde dahil edebileceğimiz birçok standart HTML veya hızlandırılmış mobil sayfa HTML (AMPHTML) öğesi arasında, benzer öğe benzer katmanların oluşturulmasına yardımcı olur.

Kullanabileceğiniz önceden tanımlı dört şablon var:

  • Dolgu. İlk çocuğun kanamasını gösterir. Bu, bir resimle birlikte kullanmak gerçekten güzel.
  • Dikey. Katmanlar, yukarıdan aşağıya dikey olarak elementler.
  • Yatay. Bu, yatay öğeleri soldan sağa katlar ve .
  • Üçüncüsü'nün dikey alanını kaplar. Bu şablon, ekranınızı eşit boyuttaki üç satıra böler. Her satıra farklı içerik yerleştirebilirsiniz. Satırlar üst-üçüncü, orta-üçüncü ve alt-üçüncü olarak gösterilir.

Her zaman olduğu gibi, bununla ilgili AMP dokümantasyonu temiz bir nefes alıyor ve yardıma ihtiyacınız olursa bu şablonların çok iyi görsel temsillerini görüyor.

Örneğin:

Yukarıdaki örnekte iki öğe kullanıyoruz. Birincisi, tam ekran görüntüsünü arka plan olarak görüntülemek için doldurma şablonunu kullanıyor.

İkincisi, bir başlık ve alt başlık koymak için dikey şablonunu kullanıyor.

Bu basit bir örnektir, ancak ile bazı çok daha ilginç katmanlama yapabilirsiniz.

JSON dosya son noktası

. Söz verilecek en son şey, son slayttaki görüntülenecek bazı içeriği belirlememizi sağlayan bir bookend adı verilen bir JSON bitiş noktası.

Ayrıca, AMP Öyküsü için hangi sosyal paylaşım seçeneklerinin kullanılabilir olduğunu belirtmek için de kullanılabilir. JSON ile aşina iseniz yapılandırmak çok kolaydır.

Sosyal paylaşım işlevselliği için, paylaşım sağlayıcılarının bir JSON nesnesini belirtebiliriz; burada hangi sağlayıcıları [19659034] gerçek:

İlgili bir makale nesnesinde, her biri bir başlık, URL ve küçük resim içeren bir dizi bağlantı gösterebiliriz:

Bunu, tek bir JSON dosyasında bir araya getirip ararız bookend-config-src niteliğini.

Hepsini bir araya getirme örneği

Bu noktada kendi AMP hikayenizi oluşturmak için gereken tüm bilgilere sahip olmanız gerekir. Örnek olarak, Barry Schwartz'ın Arama Motoru Yuvarlak Masadaki Daily Search Forum Recaps'inden birine dönüştürerek bir demo hazırladım.

Onaylanmış bir yayıncı olmadığım için, demo Google arama sonuçlarında görünmeyecek. Demo kodunun oluşturulmasıyla ilgileniyorsanız, buraya tıklayın.

Bu makalede dile getirilen görüşler konuk yazarın görüşleri olup, mutlaka Arama Motorları Arazisi değildir. Personel yazarları burada listelenmiştir.