Html head title apple

Мета-теги HTML для Apple Safari

Обзор html мата-тегов для браузеров Safari на платформах Mac OS X и iOS.

Apple Touch Icon

Иконка сайта в iOS на экране закладок и домашнем экране.

Иконки разных размеров указываются атрибутом sizes :

Apple Touch Icon Precomposed

Тоже самое что и apple touch icon , но с наложенными эффектами в стиле iOS с закругленными углами и т.д.

Mask Icon

Используется в MacOS при сохранении сайта на рабочий стол. Элементы SVG должны быть черного цвета, цвет задается атрибутом color .

Apple-Mobile-Web-App-Title

При добавлении сайта на домашний экран в iOS задает имя иконки.

Apple-Mobile-Web-App-Capable

В Safari iOS для закрепленных сайтов на экране «Домой» включает полноэкранный режим.

Apple-Mobile-Web-App-Status-Bar-Style

Задает стиль панели состояния при полноэкранном режиме.

Может иметь следующее значение:

default	Белый фон
black	Черный фон
black-translucent	Прозрачный фон и белый цвет иконок и шрифтов

default

black

black-translucent

Apple-Itunes-App

В iOS Safari выводит баннер с приложением в App Store.

Баннер не отобразится, если устройство не поддерживает приложение или оно недоступно для данной локали, подробнее на developer.apple.com.

Format-Detection

В iOS запрещает распознавать номера телефонов и адреса.

Источник

How to Add Image in the Title Bar

The majority of websites add an icon or image logo in the title bar. The icon logo is also called a favicon.

Favicon, which is also known as a URL icon, a tab icon, a shortcut icon, website icon, or bookmark icon, is a file containing one or more small icons, associated with a particular website or web page.

Favicon is used in the top left corner of the tab. Favicons are attractive and can be useful for user engagement.

The two ways of adding favicons are presented below.

The first way of adding favicons¶

• The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
• You must convert your image into the .ico format. There are many online tools to do that.
• Opening the tool, you must upload your image file. Then, the image will be converted automatically.
• Download the image and save your .ico file on the computer.
• Rename the file to favicon.ico, because the browser automatically recognizes only this name.
• Upload the file to the host directory, where your website files are located.
• When your favicon.ico file is uploaded, the browser will select it automatically and display the image in the browser.

The second way of adding favicons¶

• The image must be square dimensioned in any image format (ico, jpg, bmp, gif, png) to appear in browsers properly. Images with non-square dimensions will also work. However, such icons may not look professional.
• Upload the file to the host directory, where your website files are located.
• The final step is to specify the image you want to use as a favicon in the code of your website.

Add the following link to your section: section:»>¶

Example of adding an image in the title bar:¶

Result¶

A favicon must have the following characteristics:¶

• Favicon.ico is the default name.
• Size should be 16×16, 32×32, 48×48, 64×64 or 128×128 pixels.
• Color should be 8 bites, 24 bites or 32 bites.

Depending on the favicon format, the type attribute must be changed:type attribute must be changed:»>¶

• For PNG, use image/png.
• For GIF, use image/gif.
• For JPEG, use image/gif.
• For ICO, use image/x-icon.
• For SVG, use image/svg+xml.

For different platforms, the favicon size should also be changed:

Platform	Name	Rel value	Favicon size
Google TV	favicon.png	icon	96×96
Opera Coast	favicon-coast.png	icon	228×228
Ipad Retina, iOS 7 or later	apple-touch-icon-152×152-precomposed.png	apple-touch-icon-precomposed	152×152
Ipad Retina, iOS 6 or later	apple-touch-icon-144×144-precomposed.png	apple-touch-icon-precomposed	144×144
Ipad Min, first generation iOS 7 or later	apple-touch-icon-76×76-precomposed.png	apple-touch-icon-precomposed	76×76
Ipad Mini,first generation iOS 6 or previous	apple-touch-icon-72×72-precomposed.png	apple-touch-icon-precomposed	72×72
Iphone Retina, iOS 7 or later	apple-touch-icon-120×120-precomposed.png	apple-touch-icon-precomposed	120×120
Iphone Retina, iOS 6 or previous	apple-touch-icon-114×114-precomposed.png	apple-touch-icon-precomposed	114×114

For Apple devices with the iOS operating system version 1.1.3 or later and for Android devices, you can create a display on their home screens by using the Add to Home Screen button within the share sheet of Safari. For different platforms, add the link in the head section of documents.

Источник

Html head title apple

A simple guide to HTML elements

Table of Contents

Recommended Minimum

Below are the essential elements for any web document (websites/apps):

meta charset — defines the encoding of the website, utf-8 is the standard

meta name=»viewport» — viewport settings related to mobile responsiveness

width=device-width — use the physical width of the device (great for mobile!)

initial-scale=1 — the initial zoom, 1 means no zoom

Elements

Valid elements include meta , link , title , style , script , noscript , and base .

These elements provide information for how a document should be perceived, and rendered, by web technologies. e.g. browsers, search engines, bots, etc.

Icons

Social

Facebook Open Graph

Most content is shared to Facebook as a URL, so it’s important that you mark up your website with Open Graph tags to take control over how your content appears on Facebook. More about Facebook Open Graph Markup

Twitter Card

With Twitter Cards, you can attach rich photos, videos and media experiences to Tweets, helping to drive traffic to your website. More about Twitter Cards

Twitter Privacy

If you embed tweets in your website, Twitter can use information from your site to tailor content and suggestions to Twitter users. More about Twitter privacy options.

Schema.org

Note: These meta tags require the itemscope and itemtype attributes to be added to the tag.

Pinterest

Pinterest lets you prevent people from saving things from your website, according to their help center. The description is optional.

Facebook Instant Articles

OEmbed

QQ/Wechat

Users share web pages to qq wechat will have a formatted message

Browsers / Platforms

Apple iOS

Google Android

Google Chrome

Microsoft Internet Explorer

Minimum required xml markup for browserconfig.xml :

Browsers (Chinese)

360 Browser

QQ Mobile Browser

UC Mobile Browser

App Links

Other Resources

Related Projects

• Atom HTML Head Snippets — Atom package for HEAD snippets
• Sublime Text HTML Head Snippets — Sublime Text package for HEAD snippets
• head-it — CLI interface for HEAD snippets
• vue-head — Manipulating the meta information of the HEAD tag for Vue.js

Other Formats

🌐 Translations

🤝 Contributing

Open an issue or a pull request to suggest changes or additions.

Guide

The HEAD repository consists of two branches:

1. master

This branch consists of the README.md file that is reflected on the htmlhead.dev website. All changes to the content of the guide should be made in this file.

Please follow these steps for pull requests:

• Modify only one tag, or one related set of tags at a time
• Use double quotes on attributes
• Don’t include a trailing slash in self-closing elements — the HTML5 spec says they’re optional
• Consider including a link to documentation that supports your change

2. gh-pages

This branch is responsible for the htmlhead.dev website. We use Jekyll to deploy the README.md markdown file to GitHub Pages. All website related modifications should be made in this branch.

You may find it helpful to review the Jekyll Docs and understand how Jekyll works before working in this branch.

🌟 Contributors

Check out all the super awesome contributors 🤩

👤 Author

Josh Buchea

💛 Support

If this project was helpful for you or your organization, please considering supporting my work directly:

Источник

Блог Vaden Pro

Правильный для мобильных сайтов

В нынешнее время мобильные гаджеты всё увереннее покоряют мир. Приблизительно год назад доля трафика от мобильных устройств составляла около 4%, а на сейчас этот показатель увеличился ровно в двое и теперь составляет 8%. Некоторые эксперты уже прогнозируют, что такая тенденция будет сохраняться и дальше. А пара экспертов из Cisco вообще утверждают, что доля мобильного трафика за 2016 год вырастет не в два, а в 18 раз.

Соответственно, можно с уверенностью сказать, что если разработчики еще не сталкивались с мобильным сегментом интернета, то пора начинать это делать прямо сейчас.

Сейчас мы рассмотрим некоторые элементы контейнера , причем те, с которыми верстальщики работающие с десктопными версиями сайта скорее всего даже и не сталкивались.

В первую очередь хочется начать с того, что добавим некоторое расширение нашему тегу :

Благодаря такой манипуляции мы присвоим тегу класс .iem7, при условии, что страница будет открыта в мобильном IE. Это может крайне пригодится, ведь все знают, что порой страницы открываются очень по «странному» в этом браузере, и с помощью добавленного класса, это можно будет поправить.

Appcache

html manifest = «default.appcache» >

А вот добавляя manifest в тег мы можем подключить appcache. Это по сути включит кэширование страницы непосредственно в браузер, что позволит пользователю юзать приложение оффлайн. Ну а помимо этого пользователи смогут просматривать сайт когда нет сети (но это касается лишь тех страниц которые ранее были закешированны) , это позволит сайтам загружаться и открываться намного быстрее, ну и сервера будут менее загруженными.

Также AppCache дает возможность разработчикам задать список элементов, которые обязательно должны быть закешированны.

Чтобы это сделать, в файле необходимо записать следующее:

Чтобы убедиться в верности заполнения данного файла, можно воспользоваться специальным валидатором.

Title

title > Заголовок title >

Самый обыденный тег, все знают, что он задает заголовок страницы, но в случае с мобильными сайтами, есть некоторые нюансы. В мобильной версии он работает в целом как и в десктопной, но иногда title используется для подписи вкладок, отметки сайта в истории браузера. Но бывает и так, что он выводится в самом верху экрана. А главное, о чем стоит помнить, так это то, что в отличии от десктопной версии, title мобильный имеет серьезное ограничение по символам, как правило это 15-40 символов в книжном режиме, и немного больше (60) в альбомном. Соответственно, в мобильной версии заголовок следует уменьшить.

HandheldFriendly

meta name = «HandheldFriendly» content = «True» >

Следующим рассмотрим довольно специфический мета-тег HandheldFriendly. Когда то давно, этот тег был необходим для браузеров на мобильных ОС типа уже практически забытой Palm OS и всё еще актуальной Blackberry OS. Он определял разметку, «заточенную» под мобильные гаджеты. Сейчас он по сути делает тоже самое. Тег сообщает устройству, что страница версталась с учетом особенностей мобильного устройства, и что ее необходимо отображать не применяя масштабирование.

MobileOptimized

meta name = «MobileOptimized» content = «320» >

Очередной мета-тег, точно пригодится для IE. Это тег MobileOptimized. Его Microsoft сделала, чтобы задать фиксированную ширину странице, которая загружается в браузере IE. Задав в контенте этого тега точный горизонтальный размер странице в пикселях, она будет отображаться в одну колонку заданной ширины. Это может значительно упростить работу верстальщику, ведь браузер не будет пытаться подогнать ее так, как ему вздумается. Ну и помимо всего прочего, поисковые роботы, при индексировании страниц, так же обращают внимание на данный тег.

Viewport

meta name = «viewport» content = «width=device-width» >

А вот данному тегу можно посвятить целую статью. Но вкратце, что бы было понятно, данный мета-тег говорит браузеру какого размера область просмотра нам необходима. Это весьма полезно, ведь как правило мобильные браузеры пытаются уместить на дисплей мобильного гаджета сайт целиком, когда размер экрана маленький, то сайт выглядит настолько мелким, что прочитать что то становится проблематично. И данный тег помогает справится с этой проблемой.

Иконки

Переходим к иконкам, ведь для мобильных гаджетов они крайне актуальны. Суть вот в чем, на iOS и Android можно закладку сайта разместить на главном экране. Там она соответственно будет отображаться в виде иконки. И вот чтобы там отображалась именно ваша иконка, необходимо в корне сайта разместить картинку с размерами 57×57 px и назвать ее apple-touch-icon.png.
Однако для iPhone выше третьего поколения размеры изображения изменились и составляют 114×114 px, а для iPad 72×72 px. Ну а чтобы не мучатся с этими размерами, можно добавить просто квадратную картинку, которую Safari уже сам обрежет так, как ему будет необходимо, а также в старых версиях он добавит классические эффекты типа скругленные углы и стеклянность.

Ну и конечно же иконка может иметь полупрозрачность, в таком случае все прозрачные элементы станут черными.

Но от всех этих эффектов можно отказаться, при необходимости. Для этого стоит вместо стандартного значения написать следующее: apple-touch-icon-precomposed. Как утверждают эксперты, лучше всего использовать оба типа иконок, это позволит добиться максимальной совместимости со всеми операционными системами.

Так же стоит упомянуть, что если ваш сайт будет рассчитан исключительно на iOS, то ссылки на иконки делать вовсе не обязательно. Для этого можно лишь создать необходимые файлы с правильными названиями и разрешениями, и конечно же положить в корень сайта.

А вот Android «понимает» иконки только начиная с версии 2.1 и то, исключительно precomposed.

link rel = «shortcut icon» href = «images/l/apple-touch-icon.png» >

А вот таким образом мы подключаем возможность получать иконки на прочих операционных системах.

link rel = «apple-touch-startup-image» href = «images/l/splash.png» >

Ну а пока сайт, открытый с рабочего стола загружается, ему необходима картинка, и именно эта строка позволяет ее задать.

Вместо этого изображения можно поставить всё, что угодно, но при отсутствии такового, будет отображаться скриншот последнего запуска страницы. Но лучше всего вместо этого изображения поставить логотип и название сайта. Как и в случае с иконками необходимо придерживаться размеров изображения.

• 320×480 (для версии iPhone ниже 4 поколения)
• 640×960 (старше 4го поколения и нового iPod Touch)
• 768×1004 (iPad в портретном режиме)
• 1024×748 (iPad в горизонтальном режиме)

meta name = «apple-mobile-web-app-capable» content = «yes»/>

Данный мета-тег позволяет открыть страницу в полноэкранном режиме, при условии, что она открывается из закладки с рабочего стола.

meta name = «apple-mobile-web-app-status-bar-style» content = «default» >

Есть и мета-тег, который поможет поменять внешний вид статус бара, так чтобы он лучше подходил под дизайн вашего сайта.

В контент данного тега можно записать – default, black или black-translucent.

Понять не сложно что к чему: Default – оставит всё без изменений; black – добавит фоном черный цвет; black-translucent – добавит к черному фону еще и полупрозрачность.

В завершение еще парочка нужных тегов:

meta http — equiv = «cleartype» content = «on» >

Таким образом можно принудительно заставить IE использовать сглаживание шрифтов.

Ну и последние строки дают возможность забыть про автоматическое определение номеров и ссылок. То есть стандартно, в браузерах наборы цифр могут определяться как телефоны и по клику по ним, могут набираться. Так вот эти строки отключают эту функцию.

Источник