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

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


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

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

По-дефолту у меня выглядит как-то так (как и на 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 - 5 декабря 2014 10:59 -

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

cowsdby
Юзер

cowsdby - 6 декабря 2014 11:07 -

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

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

ПафНутиЙ - 6 декабря 2014 11:40 -

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

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

Inperations
Юзер

Inperations - 11 января 2015 14:46 -

Не понятно

куда вставить 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 - 11 января 2015 14:51 -

И ещё

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

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

ПафНутиЙ - 11 января 2015 16:55 -

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

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

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

Inperations
Юзер

Inperations - 12 января 2015 00:00 -

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

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

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

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

ПафНутиЙ - 12 января 2015 20:36 -

адрес сайта?

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

Inperations
Юзер

Inperations - 12 января 2015 21:18 -

Lnc24.ru

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

ПафНутиЙ - 12 января 2015 21:28 -


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

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

Inperations
Юзер

Inperations - 12 января 2015 22:22 -


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


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

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

Dema_vs_
Юзер

Dema_vs_ - 14 января 2015 17:26 -

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

Чтобы комментировать - войдите или зарегистрируйтесь на сайте

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

наверх