Resim URL'sini oluştur
Bu okuma boyunca, çeşitli görsellerin yerlerine koymak için URL'lerini oluşturmamız gerekecek. Bu temayı kullanırken bir görsel URL'si oluşturmanın en iyi yöntemi şu şekildedir:
- Blogger Düzeni'ne gidin.
- Resim Yükleyici widget'ının yanındaki kalem simgesine tıklayın .
- Bilgisayardan resim yükle seçeneğini seçin .
- Dosya seç'e tıklayarak resminizi yükleyin . Resim tamamen yüklenene kadar bekleyin.
- Kaydet butonuna tıklayın .
- Kalem simgesine tekrar tıklayın.
- Artık Resim URL'si alanında bulunan url'yi, yüklediğiniz resmin url'si olduğu için kopyalayabilirsiniz .
Meta etiketleri
Meta etiketleri tarayıcılara ve arama motorlarına önemli bilgiler sağlayarak SEO'yu geliştirir ve sayfa görüntüsünü optimize eder.
Favicon
Favicon'un Blog ayarları üzerinden yüklenebileceğini biliyoruz, ancak buradan yüklenen ikon birden fazla boyutta mevcut değil. Bu nedenle, tema varsayılan olarak bu ikonu kullanmıyor. Meta etiketlerinde kullanmak üzere aynı resmin birden fazla boyuttaki url'sini oluşturmak için bir png favicon resminin url'sini açıkça sağlamanız gerekir. Varsayılan olarak favicon olarak bir kukla resim kullanılır.
Varsayılan favicon'u değiştirmek istiyorsunuz. HTML'yi Düzenle'de aşağıdaki kod parçasını bulun ve işaretli URL'yi özel favicon URL'nizle değiştirin. Görüntü 1:1 oranında ve en az 512px genişliğinde olmalıdır , yani 512px*512px , 640px*640px , vb.
<Variable name="meta.icon" description="Favicon URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisldTSPR5qQSsrqZDyfYV81HFSq4Pko5u8xpbzKJ7V05CZAaCkfxG550uqbp2xlCxukxcVL4i2so2XxNri-wqqUO0yuVLLznfFes1rdmg7Ywq8pWE8FXwWQfcyrNiAPlyI3_ngX12x7-KGzAVPfjiTWPMP3HdwelG4pn729xMfH05-hdWVbQyaIsgMkQg/s0/favicon.png"/> [!] Favicon URL [!] @type {String} [!] Recommended image ratio: 1:1 [!] If Blank: It will use Favicon URL from Blogger Blog Settings [!] Warning: Dont't add invalid URL
Blog ayarlarından yüklenen favicon'u kullanmak istiyorsanız, öznitelikteki resim url'sini temizleyip valueboş bırakın.
Meta Anahtar Sözcükler
Özel anahtar kelimelerinizi keywordsmeta etiketine eklemek için aşağıdaki kod parçacığını bulun ve işaretli kısmı virgülle ayrılmış özel anahtar kelimelerinizle değiştirin.
<Variable name="meta.keywords" description="Keywords Meta Tag content" type="string" default="" value="KEYWORD_1, KEYWORD_2, KEYWORD_3"/> [!] Keywords Meta Tag content (comma-separated) [!] @type {String} [!] If Blank: Doesn't add keywords other than page name [!] Message: Separate multiple keyword with comma
Özel anahtar kelimeler eklemek istemiyorsanız işaretli kısmı temizleyebilirsiniz.
Meta açıklaması
Meta açıklaması, Blog ayarları üzerinden Arama açıklamasını etkinleştir seçeneğini açıp, Arama açıklaması alanına açıklamanızı ekleyerek ayarlanabilir .
Yazı ve sayfalarınız için kenar çubuğunda bulunan Arama açıklaması alanından açıklamanızı ekleyebilirsiniz .
Meta varsayılan resim
Resim meta etiketi, mevcutsa gönderilerin veya sayfaların küçük resmini kullanır. Bu nedenle, küçük resim yoksa veya ana sayfa ve diğer sayfalar için varsayılan bir resim kullanmamız gerekir.
In order to use a default image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.
<Variable name="meta.image" description="Image Meta Tag URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiXcTftM-dWwVR9KOkc8PzPng9FbMz-KC083W_hWFV2t2LA10-l0BtsfTj3J3WL2TrClC8aohb-H2Qn_W2DylQ7R11V71k2SGozHBnjSNAKLEUbKzLW4ALsYwMEjcEGSCIyfGLQwERqsQRFlnTv0wm8M0CkGroeYzpKJ_ZPC6_diPbuINzcP075OzTcF7I/s0/meta-image.png"/> [!] Image Meta Tag content [!] @type {String} [!] Recommended image ratio: 16:9 [!] If Blank: Doesn't add meta tag if any not available [!] Message: If the view is single item, it will use thumbnail url of item if available [!] Warning: Don't add invalid URL
Opengraph default image
Opengraph image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.
In order to use a default image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.
<Variable name="opengraph.image" description="Open Graph Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXxFjLFkLM3eZsKgzpO8R-f3pQPsb-ica2dzqZ-TpJw-fhOsZMG3fUs6UzvcualJbzE9xoUPtqIAI68pQcy9E2IXSFt8SxYEpcaIln78PEZzj1S-iiDp4aJtwNdkImyH5oEtzuzKUxetnUMMjaJWhi6BTLBkNxQX8tUzsL3Q2hqQq_hBF7_w6z5yUYxws/s0/open-graph-image.png"/> [!] Open Graph Image URL [!] @type {String} [!] Recommended image ratio: 16:9 [!] If Blank: Doesn't add meta tag if any not available [!] Message: If the view is single item, it will use thumbnail url of item if available [!] Warning: Don't add invalid URL
You can also use the same image url used in Meta default image.
Twitter Card default image
Twitter card image meta tag uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail or for homepage and other pages.
In order to use a default image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.
<Variable name="twitter.image" description="Twitter Card Image URL" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg31MuIa565c6YDVhaRleYhJeby_kBMwkr0CTcf27hP0n3b71IPnvFtkVhSIveXiBSMZ56AzX_-s5PqayrsuY7LYwJiX1P2u0acO1kiCjIuPzQ0e3uSsqATTI_2zlbHaJ48e_oZvwwZgBhTjpHJnnKiXeWF2Pwco8UHeZoP-M7bLskRArbe9Td_Ve_B1iI/s0/twitter-card-image.png"/> [!] Twitter Card Image URL [!] @type {String} [!] Recommended image ratio: 16:9 [!] If Blank: Doesn't add meta tag if any not available [!] Message: If the view is single item, it will use thumbnail url of item if available [!] Warning: Don't add invalid URL
You can also use the same image url used in Meta default image or Opengraph default image.
Rich Results
To avoid errors in Google Rich Results Test, we have added url of dummy images. However you can replace them with your custom image urls.
Schema organization logo
Find the following code snippet in Edit HTML and replace the marked url with your custom logo url. The logo must be of 1:1 ratio with a minimum width of 512px, i.e 512px*512px, 640px*640px, etc.
<Variable name="metadata.organizationLogo" description="Metadata Organization Logo" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgLYXKas2Slg6XQSDnVv2sZp3WrBMgpRTTNdEEmBCO54XHW3kmftJKJMU-CrNBEwOn0CU1J-KwAeGuS-ETuCpXhZob0AYrl789Lrwu_T_CDJYJ2k1hOQ-ur_Ek-iEAIm5-0C-nMjY8DtWtfyZfRaOXJC8mdBvdunVCbObp9ra6rMrcSg7jGCf298UE13as/s0/organization-logo.png"/> [!] Metadata Organization Logo [!] @type {String} [!] Recommended image ratio: 1:1 [!] Warning: Don't add invalid URL
Default schema thumbnails
Article schema uses the thumbnail of posts or pages if it is available. Therefore, we need to use a default image if there is no thumbnail.
In order to use a default thumbnail image for such cases, find the following code snippet in Edit HTML and replace the marked part with your custom thumbnail image url. The image must be of 16:9 ratio with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc.
<Variable name="metadata.defaultThumbnail" description="Metadata Default Thumbnail" type="string" default="" value="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvC6vD6OtRfm9LfBlmnU43YBdoPU22C5TbYwdvBh-tcs70b-uyK7D_iri6WRtUUrtvSrhJrp5vo3IQTo-ta0t_J1VrozfN3ZdCapfbhEKcqMgphQeM3clXm8goom0uOKITSosfDKij6h9AUyYyZ7-nliDKV5EOiE9YyzFA_yW1vtud1lIt_mgTxGpBHUA/s0/metadata-default-thumbnail.png"/> [!] Metadata Default Thumbnail [!] @type {String} [!] Recommended image ratio: 16:9 [!] Warning: Don't add invalid URL
Article schema
The theme uses Article schema type for blog pages and BlogPosting schema type for blog posts. You can also add a label News to a post in order to use NewsArticle schema type for that post.
Image ratios
This section gives you information about what ratio and size of images you should use.
Post thumbnail
To make sure your images do not get cropped on social platforms' previews, thumbnails, etc. We decided to use images of fixed ratio everywhere where post thumbnails are used.
We recommend using images of 16:9 with a minimum width of 1280px, i.e. 1280px*720px, 1920px*1080px, etc. as your post or page thumbnails. For post images other than the thumbnail, feel free to use images of any ratio or size.
Carousel image
To make sure carousel images do not get cropped, use images of 5:2 ratio with a minimum with of 1080px, i.e. 1080px*432px, 1920px*768px, etc.
Footer logo
For footer logo, use an image of 1:1 ratio with a minimum width of 512px, i.e. 512px*512px, 640px*640px, etc.
Optimization
This section will guide you best practices to optimize your blog when using this theme.
Jump breaks
In the year 2009, Blogger introduced the Jump Breaks. With Jump Breaks you can show just a snippet of your post on your blog's index page. Blogger will insert a Read more link to the full post page where your readers can keep reading.
It is highly recommended to add Jump Breaks after first or second paragraph of every posts. There are two ways of adding Jump Breaks to your post. The first way is by clicking on Insert Jump Break icon in Compose view and the second way is to add <!--more--> in HTML view.
Warning!
If you don't add jump breaks in your posts, things may break if any of your posts has too much contents. The pagination will not work as expected, the number of posts you want to show on index page will not be respected, none of your posts will be displayed on index page and many other unexpected behaviours. This doesn't apply only to our theme!
WebP image serving
Blogger recently added an option WebP image serving in Blog Settings, it can be toggled on to automatically serve post images in WebP formats. Blogger does it by automatically adding the rw parameter to post images. It improves the performance of the webpages.
It is recommended to toggle on WebP image serving from Blog Settings.
Defer off-screen images
Blogger recently added an option Lazy load images in Blog Settings, it can be toggled on to automatically lazy load post images. The post images will only be loaded when reader scrolls to those particular images. Blogger does it by automatically adding loading='lazy' to all the post images. It improves the performance of the webpages.
It is recommended to toggle on Lazy load images from Blog Settings.
Custom codes
This section will guide you to add custom codes in the theme. We recommend you add custom codes as described below for better managements.
Custom meta tags
Custom meta tags can be added through Blogger HTML Editor.
- Go to Blogger HTML Editor.
-
Find the following line of code and add your custom meta tags below it.
<b:comment><!--[ Add additional meta tags (below) ]--></b:comment>
Custom CSS
Tema Tasarımcısı aracılığıyla özel CSS eklemenizi önermiyoruz çünkü tema bunu desteklemiyor. Özel CSS'nizi Blogger HTML Editörü aracılığıyla eklemeniz gerekiyor.
- Blogger HTML Editörüne gidin.
-
Aşağıdaki kod satırını bulun ve altına özel CSS kodunuzu ekleyin.
/*--[ Custom CSS Global (NO AMP) ]--*/İpuçları!
CSS ile birlikte, özel eklenen CSS'nin kullanımını açıklayan yararlı bir yorum ekleyin.