Метатеги и пример Facebook
Вы определенно видели экран «Поделиться ссылкой» в Facebook . Когда вы вставите ссылку в поле (рис. 1) и нажмете кнопку «Прикрепить», вы получите проанализированный запрос с заголовком, описанием и, возможно, большим пальцем (рис. 2). Эта функциональность хорошо известна в Facebook, но, похоже, она хорошо известна и в различных социальных сетях. На самом деле Linkedin , Reddit , DZone «s букмарклет использовать его.
Инжир. 1 — Facebook Прикрепить экран подсказки ссылки
Первое, на что нужно обратить внимание, это то, что эта информация, запрашиваемая Facebook, совпадает с информацией метатега. Однако есть небольшая разница.
Инжир. 2 — Facebook Прикрепленный Экран Связи
Facebook предпочитает для большого пальца изображение, установленное в <meta property = ”og: image”… />. В приведенном выше случае этот тег выглядит так:
<meta property="og:image" content="http://b.vimeocdn.com/ts/572/975/57297584_200.jpg" />
И изображение, указанное в атрибуте SRC, в точности совпадает с изображением, предложенным Facebook (рис. 3).
Инжир. 3 — большой палец Vimeo
Первое, что нужно отметить, это то, что реальный большой палец больше, чем большой палец, показанный в Facebook, поэтому Facebook изменяет его размер, и второе, что следует отметить, — это то, что метатегов формата og:… больше.
Метатеги и протокол Open Graph
По умолчанию метатеги содержат различную информацию о веб-странице. Они не видны на веб-странице, но содержат некоторую информацию об этом. Наиболее распространенные метатеги — это заголовки, описания и ключевые слова. Они, конечно, содержат заголовок страницы, но не то, что это может отличаться от тега <title>, краткое описание страницы и некоторые ключевые слова, описывающие содержимое страницы. Они хорошо известны еще и потому, что поисковые системы используют их при попытке собрать информацию о странице, и процесс SEO проходит через нее.
Однако метатеги HTML по умолчанию не могут содержать все. Таким образом, например, вы не можете указать предпочтительный эскиз для веб-страницы. Решением является протокол Open Graph . Он поставляется с мета-тегами, которые могут содержать все больше и больше ценной информации. Такой меткой является метатег og: image. Обратите внимание, что все метатеги Open Graph (og) определяются префиксом og: перед именем сущности. Таким образом, og: image подходит для изображений, а og: долгота для географического позиционирования.
Это действительно полезно, но как вы можете их прочитать?
PHP, метатеги и регулярные выражения
Когда вы пытаетесь прочитать информацию из источника веб-страницы, первым возможным путем является использование регулярных выражений . Однако PHP достаточно умен, чтобы предложить вам некоторые полезные функции. Такой функцией является get_meta_tags () . Как вы можете догадаться, этот метод читает метатеги по заданному URL.
$a = get_meta_tags('https://vimeo.com/10758212');
var_dump($a);
Однако этот метод не может читать теги Open Graph. Итак, наконец, вы должны использовать некоторые регулярные выражения.
preg_match('/<meta property="og:image" content="(.*?)" \/>/', $source, $matches);
Теперь вы можете получить тег og: image. И даже больше — захватите каждое изображение (<img>) с этой страницы.
preg_match_all('/<img src="(.*?)"/', $source, $m);