Ссылки в контакте

[Nestand]

Написал со скрытым div'ом то же не канает. Скорее всего контакт кэширует страницу, потому что когда размещаю запись на стене, открывается старая фотка...

 

[warg]

есть только два способа, как писали выше через link rel="image_src" либо через конструктор объекта,
оба расписаны Для просмотра ссылки Войди или Зарегистрируйся.
и да, VK как и Фейсбук кэширует информацию о ссылке после первого запроса, далее использует уже его, а он обновляется в режиме "как повезет".
но можно обновить и в ручную Для просмотра ссылки Войди или Зарегистрируйся

 

[Nestand]

Да все проблемы были из за кэширования, как только его сбросил, так сразу все и заработало.

Всем спасибо за ответы, решил собрать до кучи все теги, может кому-то пригодятся:

<link rel="image_src" href="http://сайт.ru/img/externallogo1.jpg" /> //для вконтакте
<meta property="og:title" content="Название сраницы" />
<meta property="og:type" content="website"/>
<meta property="og:image" content="http://сайт.ru/img/externallogo1.jpg" />  //фото для фейсбука, вибера, скайпа и пр.
<meta property="og:url" content="http://сайт.ru/" /> //адрес сайта
<meta property="og:description" content="Описание сайта." />
<meta property="og:site_name" content="Название сайта" />
<meta property="og:locale" content="ru_RU" />
<meta property="fb:admins" content="100009041660000" />  //id админа фейсбука для статистики
    <!-- Google Plus -->
<meta itemprop="name" content="Название страницы"/>
<meta itemprop="description" content="Описание страницы"/>
<meta itemprop="image" content="http://сайт.ru/img/externallogo.jpg"/>
    <!-- Twitter -->
<meta name="twitter:card" content="summary"/>  <!-- Тип окна -->
<meta name="twitter:site" content="название сайта"/>
<meta name="twitter:title" content="Название страницы">
<meta name="twitter:description" content="Описание страницы"/>
<meta name="twitter:creator" content="имя создателя"/>
<meta name="twitter:image:src" content="http://сайт.ru/img/externallogo.jpg"/>
<meta name="twitter:domain" content="сайт.ru"/>
    <!-- Apple -->             //картинки для избранного и на рабочий стол для apple устройств
<link rel="apple-touch-icon" href="touch-icon-iphone.png">
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

А какого вообще размера делать эти картинки?
<meta property="og:image" content="Для просмотра ссылки Войди или Зарегистрируйся" /> //фото для фейсбука, вибера, скайпа и пр.
<link rel="image_src" href="Для просмотра ссылки Войди или Зарегистрируйся" /> //для вконтакте
<meta itemprop="image" content="Для просмотра ссылки Войди или Зарегистрируйся"/> //для гугл+
<meta name="twitter:image:src" content="Для просмотра ссылки Войди или Зарегистрируйся"/> //для твиттера

 

[warg]

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

PS: интересный способ сказать спасибо dislike'ом

 

[Anddrew]

А как сделать так, чтобы вставилось то изображение, которое нужно, а не то, которое выберет ВК? Как вообще происходит выбор картинки?

 

[Q_BASIC]

А как сделать так, чтобы вставилось то изображение, которое нужно, а не то, которое выберет ВК? Как вообще происходит выбор картинки?

Если несколько допустимых изображений на странице - вк дает выбор. Изначально ВК выбирает первую доступную картинку

Можно сделать так:

<div style="display:none">
<img src="адрес картинки для вк" />
</div>

 

[FasticsDev]

почитай документацию для разработчиков вконтакте.

 

[frankMeister]

Если у тебя в коде есть изображение картинки
div style="display:none">
<img src="ссылка на картинку" />
</div>
То будет выделятся красивенько, а если нет, то как обычная ссылка

 

[siriusfrk]

Вот тут есть статья про семантическую разметку (а именно это и позволяет делать красивое отображение Для просмотра ссылки Войди или Зарегистрируйся