Технический сбой

Сайт временно работает в режиме только для чтения, идут восстановительные работы. Приносим свои извинения за неудобства.
DLE FAQ » Все вопросы » Общие вопросы по вёрстке » Open graph разметка, широкое изображение?

Open graph разметка, широкое изображение?


     Все вопросы » Общие вопросы по вёрстке    5636

вопрос
Как сделать, чтобы при шаринге ВК, выводилось изображение размером побольше.

По-дефолту у меня выглядит как-то так (как и на dle-faq)

Open graph разметка, широкое изображение?


А надо сделать так:

Open graph разметка, широкое изображение?



Описание добавил, смотрел теги на сайте как на втором скрине - теги вроде такие же. В чем проблема?

Ответил: ПафНутиЙ


Для начала следует почитать про разметку opengraph
в тег
<html>

добавьте атрибуты:
 prefix="og: http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"

куда-нибудь пред
</head>

вставить:
<meta property="og:type" content="website">
<meta property="og:image" content="http://dle-faq.ru/{THEME}/imaes/image.png">

ну и соостветсвенно картинку по требуемому адресу.
Размер картинки 470x246px

12 комментариев

disazakon
Юзер

disazakon - -

эм кидать ссылку не на главную а на публикацию.

cowsdby
Юзер

cowsdby - -

вообще-то тут и висит ссылка на публикацию с dle-faq, у меня аналогичная ситуация.
Жду более адекватного ответа, спасибо

ПафНутиЙ
Админ

ПафНутиЙ - -

можете проверить на этой странице, инструкция в ответе

Каков вопрос - таков и ответ. Просто помните об этом.

Inperations
Юзер

Inperations - -

Не понятно

куда вставить prefix="og: http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"

вот так что ли сделать?
<!DOCTYPE html>
<html lang="ru">
prefix="og: http://ogp.me/ns#" xmlns:fb="http://ogp.me/ns/fb#"
<head>
{metatags}

Inperations
Юзер

Inperations - -

И ещё

Вот тут ссылка ваша мне туда что в писать?
<meta property="og:image" content="https://dle-faq.ru/{THEME}/imaes/image.png">

ПафНутиЙ
Админ

ПафНутиЙ - -

про атрибуты
Но по большому счёту достаточно открыть исх код этой страницы и всё станет ясно.
Цитата: Inperations
Вот тут ссылка ваша мне туда что в писать?

путь к своей картинке.

Каков вопрос - таков и ответ. Просто помните об этом.

Inperations
Юзер

Inperations - -

Тоесть в моем случае картинка в папку которуб она сохраняется да?

сайт.ру/uploads/posts/2015-01/thumbs/ ??

Я так и сделал но все по старому

ПафНутиЙ
Админ

ПафНутиЙ - -

адрес сайта?

Каков вопрос - таков и ответ. Просто помните об этом.

Inperations
Юзер

Inperations - -

Lnc24.ru

ПафНутиЙ
Админ

ПафНутиЙ - -


Что я делаю не так?

Каков вопрос - таков и ответ. Просто помните об этом.

Inperations
Юзер

Inperations - -


На facebook Нормально да а как сделать что бы в контакте было так же? И на картинке ссылка на сайт.


И новость в контакт пытаюсь она не добавляется так с большой картинкой.

Как на картинке

Dema_vs_
Юзер

Dema_vs_ - -

Присоединяюсь к вопросу выше, а вконтакте как проделать?

Похожие вопросы

наверх